HSL to HEX Converter

One color, five spellings

CSS has accumulated several ways to write the same HSL color. The original CSS3 form separates the parts with commas; CSS Color 4 introduced a space-separated form and moved alpha behind a slash. Hue accepts a plain number or an explicit angle unit, and values past 360 simply wrap around the wheel. Every row below produces the identical pixel:

This converter swallows all of them, so you can paste whatever a stylesheet, a code review or an old tutorial hands you without reformatting first.

Hue angle units: deg, grad, rad and turn

A bare hue number means degrees, but CSS permits four angle units and they occasionally show up in generated code. 1turn is a full revolution, so 0.25turn equals 90°; 200grad equals 180°; and one radian is about 57.296°, which makes 3.1416rad land essentially on 180°. Saturation and lightness, by contrast, are plain percentages of their axes — no units to choose there.

Real code produces the exotic units more often than you’d expect. JavaScript’s Math.atan2, the standard way to derive a hue from a point on a color wheel, returns radians; preprocessor loops that slice a circle into n swatches tend to emit fractions of a turn. Whichever unit arrives, the six hex digits that come out are the same.

Worked example: hsl(220, 60%, 49%) to #3264c8

The conversion runs through chroma. First, C = (1 − |2L − 1|) × S = (1 − 0.02) × 0.6 = 0.588 — how much the strongest channel exceeds the weakest. Dividing the hue by 60 gives 3.667, which places 220° in the 180°–240° band where the channel pattern is (0, X, C): red gets nothing extra, blue gets the full chroma, and green gets the intermediate X = C × (1 − |3.667 mod 2 − 1|) = 0.588 × 0.333 = 0.196.

Every channel is then lifted by m = L − C ÷ 2 = 0.49 − 0.294 = 0.196 so the lightness comes out right. Scaling to bytes: red (0 + 0.196) × 255 = 49.98 rounds to 50, green (0.196 + 0.196) × 255 = 99.96 rounds to 100, and blue (0.588 + 0.196) × 255 = 199.92 rounds to 200. In hexadecimal those bytes read 32, 64 and c8, so the final code is #3264c8.

Hue wraps at 360°

Because hue is an angle, it has no ceiling and no floor: 360° is the same direction as 0°, hsl(380 60% 49%) equals hsl(20 60% 49%), and a negative hue counts backwards, so −40° means 320°. This matters in practice when hues come out of arithmetic — a JavaScript loop stepping a hue by +37 each iteration, or a theme rotating a base hue by −120, will happily produce values like 613 or −83. Nothing breaks: normalize with modulo 360, or let CSS and this converter wrap it for you.

Copying HSL out of design tools: the gotchas

• HSB is not HSL. Figma and Photoshop pickers show HSB (also called HSV), whose B means brightness. Pure red is HSB 0, 100, 100 but hsl(0, 100%, 50%) — paste HSB digits into hsl() and you get a washed-out impostor.
• Rounded displays drift. Tools round hue, saturation and lightness to integers for display, so the HEX you regenerate from them can differ from the original by a point per channel.
• Keep the percent signs. In the comma syntax, hsl(220, 60, 49) is not a valid CSS color — saturation and lightness must carry the %.
• Strip the degree symbol. Some tools print 220° with the ° character; CSS wants 220 or 220deg, never the symbol itself.
• Check for hidden alpha. A layer set to 80% opacity exports an alpha that belongs after the slash, not baked into lightness.

Special cases: grays, black and white

When saturation is 0% the hue does nothing at all — hsl(137, 0%, 49%) is the gray #7d7d7d, and swapping 137 for any other angle changes nothing. Likewise 0% lightness is #000000 and 100% lightness is #ffffff no matter which hue or saturation you request. This is why converting a gray back to HSL reports hue 0: the angle was never part of the information. Alpha survives the trip to HEX as a fourth pair, so hsl(220 60% 49% / 0.8) comes out as #3264c8cc, 0.8 × 255 rounding to 204, or cc.

All of the conversion happens locally in your browser — nothing you type is sent anywhere. To go the other way, the HEX to HSL converter breaks any code back into its angle and percentages, and the universal color converter prints the same input in Lab, LCH, OKLCH and CMYK at once.