Guide

HSL Color Explained: A Practical Guide for Designers

HSL describes color the way a human eye thinks about it: pick a hue, decide how vivid it should be, decide how bright. Once that maps to instinct, hex starts to feel like assembly language.

Last reviewed on 2026-10-03

What HSL stands for

HSL is short for hue, saturation, and lightness. In CSS it looks like this:

color: hsl(265, 75%, 63%);
background: hsl(180 100% 50% / 0.5);

Three numbers, in that order. They describe a single color, exactly the same color you can also write as #955AE7 or rgb(149, 90, 231) for the first example. Different notation, identical pixel.

There is nothing HTML-specific about it: HTML has no color syntax of its own, so HSL in an HTML page is always CSS — in a stylesheet, a <style> block, or an inline style="color: hsl(210 80% 45%)" attribute. Every browser in use today supports it.

How many digits does each value take?

There is no fixed width, unlike hex. Hue is a number of degrees (typically 0–359, so one to three digits), saturation and lightness are percentages from 0% to 100%. Leading zeros are not needed — hsl(5, 80%, 9%) is fine. Decimals are allowed on all three: hsl(212.5 62.3% 48.75%) is valid CSS, and useful when you need to hit an exact hex value that whole numbers can't reach.

Hue: where on the wheel

Hue is an angle from 0 to 360 degrees on the color wheel. The wheel is the same one you see in design apps: red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, magenta at 300°, and back to red. The angle is the only thing that decides which family the color belongs to.

Every 30° step at full saturation (100%) and mid lightness (50%), converted to hex:

The six primaries and secondaries (red, yellow, green, cyan, blue, magenta) sit exactly 60° apart; everything in between is a blend of its two neighbours. Want the CSS keyword versions instead? The named color index lists all of them with their hex and HSL values.

What is the maximum hue value? Is 360 the same as 0?

The wheel has 360 degrees, so the useful range is 0–359 and 360° is exactly the same as 0° — both are red. CSS does not clamp hue, it wraps it: hsl(400, 100%, 50%) is the same as hsl(40, 100%, 50%), and hsl(-30, 100%, 50%) is the same as hsl(330, 100%, 50%). A bare number means degrees, but you can also write units: hsl(0.5turn 100% 50%) equals hsl(180deg 100% 50%).

Adding 180° to a hue gives its complementary color. Adding 120° twice gives a triadic palette. The math that drives the palette generator on the home page is just hue arithmetic.

Saturation: how vivid

Saturation is a percentage from 0% to 100%. At 100% the color is fully vivid. At 0% it collapses to a shade of gray — the hue is still recorded but you can't see it, because there is no color information left.

Two things to internalise:

• Lowering saturation pulls a color toward neutral, which is what design systems usually want for backgrounds, borders, and muted text.
• "Saturation" in HSL is not the same as "saturation" in HSV or in image-editor sliders — they use different math. The CSS value is HSL specifically.

Lightness: how bright

Lightness is also 0% to 100%, but the scale is non-intuitive at first:

• 0% — pure black, regardless of hue or saturation.
• 50% — the most vivid version of the chosen hue.
• 100% — pure white, regardless of hue or saturation.

That means raising lightness past 50% does not make the color "more colorful" — it pushes it toward white. To get a brighter, still-saturated color, leave lightness near 50–60% and adjust saturation instead. This is the single most useful thing to remember about HSL.

When HSL beats hex

Hex is great for: copying a single value out of a design tool. HSL is better for almost everything else. Three concrete cases:

1. Building a color scale

To produce a 5-step gray scale in hex, you'd guess at six characters per step and tweak in a tool. In HSL, the same scale is obvious:

--gray-100: hsl(220, 14%, 96%);
--gray-300: hsl(220, 13%, 82%);
--gray-500: hsl(220, 10%, 60%);
--gray-700: hsl(220, 12%, 35%);
--gray-900: hsl(220, 18%, 14%);

Hue is locked. Saturation barely moves. Lightness does the work. The result feels intentional rather than improvised.

2. Hover and active states

"Make this button slightly darker on hover" is a one-line change in HSL: subtract 8% from lightness. In hex you'd be eyeballing it.

3. Theming

For a brand color at hsl(265, 75%, 63%), a sensible "dim" variant might be hsl(265, 35%, 45%): same hue, less saturation, less lightness. Anyone reading the stylesheet immediately understands the relationship.

The math behind the conversion

Going from HSL to RGB involves a chroma value C = (1 − |2L − 1|) × S, an offset, and a six-segment mapping based on which 60° slice of the wheel the hue lives in. The full algorithm is in the CSS Color Module specification. The takeaway: HSL is a transformation of the same RGB cube, not a different color space, so any HSL value can be expressed exactly as RGB and vice versa.

Worked example: hsl(265, 75%, 63%) to RGB and hex

Convert saturation and lightness to fractions first: S = 0.75, L = 0.63.

1. Chroma. C = (1 − |2 × 0.63 − 1|) × 0.75 = (1 − 0.26) × 0.75 = 0.555. This is how far apart the strongest and weakest channel will be.
2. Hue segment. H′ = 265 / 60 ≈ 4.417, so the hue lives in segment 4 (240°–300°, blue toward magenta). In that segment the channels are (R, G, B) = (X, 0, C).
3. Second-largest component. X = C × (1 − |H′ mod 2 − 1|) = 0.555 × (1 − |0.417 − 1|) ≈ 0.231.
4. Lightness offset. m = L − C / 2 = 0.63 − 0.2775 = 0.3525. Add it to every channel.
5. Scale to 0–255. R = (0.231 + 0.3525) × 255 ≈ 148.9 → 149. G = (0 + 0.3525) × 255 ≈ 89.9 → 90. B = (0.555 + 0.3525) × 255 ≈ 231.4 → 231.
6. To hex. 149 = 95, 90 = 5A, 231 = E7 → #955AE7.

The same recipe explains the quick answers people search for. hsl(39, 100%, 50%) gives rgb(255, 166, 0) = #FFA600, an orange one step away from the CSS keyword orange (#FFA500). hsl(90, 100%, 50%) gives #80FF00, a vivid chartreuse yellow-green. And whenever lightness is 0%, chroma is 0 and m is 0, so the result is #000000 no matter what the hue is. For the reverse direction, the RGB to HEX converter handles the last step.

HSL vs HSV (HSB): not the same thing

Design apps like Photoshop and Figma's color picker often show HSV, also called HSB (hue, saturation, value/brightness). The hue is identical in both models. Saturation and the third number are not:

• In HSL, 50% lightness is the pure color and 100% lightness is always white.
• In HSV, 100% value is the pure color (at full saturation), and you only reach white by also dropping saturation to 0%.

The conversion from HSL to HSV is V = L + S_L × min(L, 1 − L), then S_V = 2 × (1 − L / V) (or 0 when V is 0). Run the example above through it and hsl(265, 75%, 63%) becomes roughly hsv(265, 61%, 91%): same color, completely different numbers. So never paste HSB values from a design tool straight into a CSS hsl() call — convert them, or copy the hex instead. CSS has no hsv() function; the closest relative is hwb(), covered in the CSS color formats reference.

The home converter runs this conversion live — type a hex code and the HSL chip below the swatch updates as you type.

HSLA and the alpha channel

Modern CSS accepts an alpha value alongside HSL using a slash:

background: hsl(265 75% 63% / 0.25);

Alpha is a number from 0 (fully transparent) to 1 (fully opaque). The older hsla() function still works for backwards compatibility but is no longer required — modern browsers accept the alpha inside the regular hsl() function. For a deeper look at how alpha actually composites against the background, see the RGBA and transparency guide.

Common mistakes

• Treating lightness like brightness. A "brighter" red is usually more saturated red, not lighter. Push saturation toward 100% before pushing lightness past 60%.
• Forgetting the percent signs. hsl(265, 75, 63) is invalid; saturation and lightness need %.
• Using HSL for accessibility decisions. Two colors with the same lightness can have very different perceived contrast — lightness in HSL is geometric, not perceptual. For accessibility, calculate the actual contrast ratio (the home checker does this) instead of comparing lightness values.
• Mixing degrees and percentages. CSS now accepts hsl(265 75% 63%) with spaces and no commas. Both syntaxes are valid; pick one and stay consistent in a codebase.

HSL vs OKLCH and modern alternatives

HSL has been in CSS since 2010. It is intuitive but not perceptually uniform: equal numeric jumps in lightness do not produce equal jumps in perceived brightness, and equal hue rotations do not produce equally distinct colors. Newer formats — oklch(), lch(), lab() — fix this and are now widely supported. They are the better choice for serious color systems where uniform progression matters. HSL is still the right choice when you want a quick, readable adjustment in a stylesheet, and it will not stop being supported. The CSS color formats reference walks through the differences in detail.

Quick checklist

• Hue first — pick the family on the wheel.
• Saturation second — decide how much color you want versus gray.
• Lightness third — and remember 50% is the peak, not 100%.
• Use HSL for related colors; use a perceptual format like OKLCH for serious systems.
• Use the contrast ratio, not lightness, for accessibility checks.

Frequently asked questions

What does HSL stand for?

HSL stands for hue, saturation, and lightness. Hue is an angle on the color wheel (0–360°), saturation is how vivid the color is (0–100%), and lightness is how close it is to black or white (0–100%, with 50% being the pure color).

How does HSL work?

HSL picks a color in three steps: the hue angle chooses the color family on the wheel (0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta), saturation decides how much of that hue versus gray you get, and lightness moves the result from black (0%) through the pure color (50%) to white (100%). The browser converts it to RGB before drawing it.

What is the maximum hue value in HSL?

Hue runs from 0 to 360 degrees, and 360° is the same as 0° (both are red). CSS wraps values outside that range instead of rejecting them, so hsl(400, 100%, 50%) equals hsl(40, 100%, 50%) and a negative hue like -30 equals 330.

What color is hsl(125, 50%, 0%)?

Black (#000000). Any HSL color with 0% lightness is black, whatever the hue and saturation are, and any color with 100% lightness is white. The same applies to hsl(255, 100%, 0%): it is black too.

What color is hsl(90, 100%, 50%)?

A vivid chartreuse, a yellow-green halfway between yellow (60°) and green (120°). In hex it is #80FF00, or rgb(128, 255, 0).

What color is hsl(39, 100%, 50%)?

A bright orange: rgb(255, 166, 0), or #FFA600 in hex. It is one step away from the CSS named color orange, which is #FFA500.

Can HSL values have decimals?

Yes. CSS accepts decimal values for hue, saturation, and lightness, for example hsl(212.5 62.3% 48.75%). There is no fixed number of digits: hue is usually written with one to three digits and saturation and lightness as 0% to 100%.

Is an HSL shift the same as brightness and contrast?

No. A hue/saturation/lightness adjustment rotates the hue around the wheel and changes how vivid or how light colors are. Brightness shifts all channels up or down, and contrast stretches values away from or toward the middle gray. They can produce similar-looking results in some cases, but they are different operations, which is also why CSS has separate hue-rotate(), saturate(), brightness() and contrast() filters.

What is the difference between HSL and HSV (HSB)?

The hue is the same, but the other two values differ. In HSL, 50% lightness is the pure color and 100% is white. In HSV, also called HSB, 100% value with 100% saturation is the pure color. CSS only supports HSL, so convert HSB values from design tools before using them in hsl().