HSL to Hex Converter

Free, instant, copy-ready — no signup.

Enter hue (0–360), saturation, and lightness (0–100%) to get the matching hex color code. The result updates live as you type and copies in one click. Going the other way? Use the hex to HSL converter.

What HSL Is

HSL describes a color by three intuitive knobs instead of three light channels. Hue is an angle on the color wheel from 0° to 360° — 0° is red, 120° green, 240° blue, and the wheel wraps back to red at 360°. Saturation is intensity: 0% is gray, 100% is the most vivid version of that hue. Lightness runs from 0% (black) through 50% (the pure color) up to 100% (white).

That structure is what makes HSL so useful for systematic palettes: keep hue fixed and step lightness to build a ramp, or nudge lightness a few points for hover and active states. The lighten color and darken color tools automate exactly that move and hand you the final hex.

How HSL to Hex Conversion Works

The conversion goes through RGB. From saturation and lightness the algorithm computes a chroma value (how far the channels spread apart), the hue angle's 60° sector decides which of red, green, and blue get the high, middle, and low values, and a lightness offset shifts all three. Scale the results to 0–255 and write each channel in base 16 — that's your hex code.

hsl(153, 40%, 30%)  →  rgb(46, 107, 80)  →  #2E6B50

CSS note: you often don't need to convert at all — background: hsl(153 40% 30%) is valid CSS in every modern browser. The hex form matters for design tokens, emails, and tools that only accept hex.

Example HSL → Hex Values

Notice the two greens: same hue and saturation, different lightness — one number turns a dark brand color into a pastel. Prefer picking visually? The color picker shows hex, RGB, and HSL side by side as you drag.

Frequently Asked Questions

• How do you convert HSL to hex?

  Convert HSL to RGB first, then write each RGB channel as a two-digit base-16 number. The algorithm computes a chroma value from saturation and lightness, picks the RGB mix from the hue angle's 60° sector, and scales the result to 0–255. For example, hsl(153, 40%, 30%) becomes rgb(46, 107, 80), which is #2E6B50.

• Is hsl() valid in CSS?

  Yes. background: hsl(153 40% 30%) — or the older comma form hsl(153, 40%, 30%) — works in every modern browser, so you don't have to convert for CSS. The hex version matters for design tokens, emails, and tools that only accept hex.

• What do H, S, and L mean?

  H (hue) is an angle from 0 to 360° on the color wheel — 0° is red, 120° green, 240° blue. S (saturation) is the color's intensity, from 0% (gray) to 100% (fully saturated). L (lightness) runs from 0% (black) through 50% (the pure color) to 100% (white).

• Why does hsl(153, 40%, 30%) look so different from hsl(153, 40%, 60%)?

  Only the lightness differs: at 30% it is a dark forest green (#2E6B50), while at 60% it is a soft pastel green (#70C29D). Same hue, same saturation — lightness alone moves a color between dark and pale, which is exactly why HSL is so useful for hover states and palette ramps.

• Does HSL cover every hex color?

  Yes. Hex and HSL both describe the same sRGB color space, so every 6-digit hex code has an HSL equivalent and every HSL value maps to a hex code. Round-tripping can shift a channel by ±1 because HSL values are usually rounded to whole numbers.

Related tools: hex to HSL · hex to RGB · RGB to hex · color picker · tint & shade generator