🌈 HSL to Hex Converter

HSL: The Color Model That Thinks Like a Human

When a designer says "make this blue a little more muted and slightly darker," they are speaking in HSL — even if they have never heard the acronym. The HSL color model — Hue, Saturation, Lightness — was invented precisely to map color description onto human intuition. The hex codes and RGB triplets that browsers and image formats actually store are great for machines but impenetrable to humans. Understanding how HSL relates to hex, and why the conversion involves some non-obvious math, gives you real control over color in any web or design context.

What Each Channel Actually Encodes

Hue is an angle on a color wheel measured in degrees from 0 to 360. At 0° and 360° you have red. Moving clockwise, you pass through yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300° before looping back to red. This circular arrangement is not arbitrary — it mirrors how additive light primaries blend into each other continuously.

Saturation controls color intensity as a percentage. At 100%, you get the pure, vivid version of the hue. At 0%, all color is washed out and you are left with a gray whose brightness is determined entirely by the Lightness channel. Values in between produce the dusty, muted, or pastel shades that make up most real-world design palettes.

Lightness is also a percentage, running from 0% (pure black, regardless of hue or saturation) to 100% (pure white, again regardless of hue or saturation). The full, unadulterated version of a hue sits at 50% lightness. This is why HSL is sometimes criticized: the "lightness" axis does not match perceived brightness very well. A saturated yellow at 50% L looks much brighter than a saturated blue at 50% L, even though they are mathematically equivalent. That limitation aside, HSL's intuitiveness makes it invaluable for generating color schemes programmatically.

The Math Behind the Conversion

Converting HSL to RGB is a multi-step process that is worth understanding in full. Given H in [0, 360), S and L both in [0, 1] as decimals, the first quantity you compute is the chroma C:

C = (1 − |2L − 1|) × S

Chroma represents the maximum difference between any two RGB components and is zero when the color is gray (S = 0) or at the lightness extremes (L = 0 or L = 1). Next you compute a secondary chroma X, which determines how the hue angle maps onto the intermediate color component:

X = C × (1 − |(H / 60) mod 2 − 1|)

The expression (H / 60) mod 2 − 1 produces a triangle wave that rises and falls as H sweeps through each 60° sextant of the color wheel. Depending on which sextant H falls in, you assign (C, X, 0) to (R, G, B) in different permutations — this is where the six if-else branches in most implementations come from. Finally, you add a matching offset M to all three components to hit the correct lightness level:

M = L − C / 2
(R, G, B) = (R₁ + M, G₁ + M, B₁ + M)

After multiplying by 255 and rounding to integers, you have your RGB triplet. Converting to hex is then trivial: format each integer as a two-digit uppercase hexadecimal string and concatenate them with a leading #.

Why the Color Wheel Shows Saturation, Not Hue Pairs

A common misunderstanding is that a "color wheel" should show complementary colors opposite each other. The wheel in this tool does show that — red at 0°, its complement cyan at 180° — but it encodes saturation as the radial distance from the center. The center of the wheel is gray (saturation 0%), and the outer edge is fully saturated (saturation 100%). Lightness is intentionally held at 50% in the wheel rendering because at 50% you see the richest, most discriminable version of every hue. Encoding lightness as a third axis would require a 3D representation — a bicone shape — which is impractical on a flat screen.

This is why the lightness slider exists separately. As you drag it toward 0%, the visible color darkens toward black regardless of where you picked on the wheel. Drag it toward 100% and everything bleaches toward white. The hex output encodes the combined effect of all three channels.

HSL vs HSB/HSV: A Common Point of Confusion

Many design tools — Photoshop, Figma, Sketch — show an HSB or HSV picker (Hue, Saturation, Brightness/Value) rather than HSL. These look similar but encode lightness differently. In HSV, maximum "Value" gives you the pure hue, not white. In HSL, maximum Lightness gives white, and 50% Lightness gives the pure hue. This means an HSL value of hsl(240, 100%, 50%) (pure blue) is equivalent to HSV's hsv(240, 100%, 100%). The conversion between them is straightforward but easy to get wrong, which is why it matters to know which model you are working in when copying values between tools.

Practical Uses: Where HSL Shines in Real Projects

CSS has natively supported the hsl() function since 2003, meaning you can skip the hex conversion entirely in stylesheets if you prefer. Modern CSS also supports the newer oklch() model, which fixes HSL's perceptual brightness inconsistency, but HSL remains the most widely understood and used non-hex color notation on the web.

HSL is especially powerful for generating color palettes programmatically. Want five shades of a brand blue? Fix hue and saturation, step lightness from 20% to 80%. Want an analogous palette? Step hue by 30° increments. Want a complementary pair? Add 180° to the hue. All of these operations are trivial in HSL and would require complex RGB arithmetic otherwise.

One important edge case: when saturation is 0%, hue is meaningless. HSL(0, 0%, 50%), HSL(180, 0%, 50%), and HSL(360, 0%, 50%) all produce the same mid-gray #808080. Any converter must handle this correctly, and the conversion math above does — C becomes 0 when S is 0, so the hue term contributes nothing.

Reading Hex Codes Backwards into HSL

If you are reverse-engineering a hex color to understand its HSL properties, the process goes: hex → RGB → HSL. Given RGB values normalized to [0,1], find the maximum (M) and minimum (m) component. Chroma is M − m. Hue comes from which component is dominant and the ratio of the other two. Saturation is chroma divided by (1 − |2L − 1|) where L = (M + m) / 2. Lightness is simply (M + m) / 2. Understanding this reverse path helps when you encounter a hex code from a brand guide and want to know how much lighter a tint should be — just convert to HSL, bump L up by 15 percentage points, and convert back.

Color representation ultimately serves human communication. Hex codes are compact and machine-friendly. RGB triplets are what the graphics hardware consumes. HSL is what designers think in. This converter sits at the intersection: you describe the color you imagine, and it produces the code the browser needs.