hex#6467F2
rgbrgb(100, 103, 242)
hslhsl(239, 85%, 67%)
hsvhsv(239, 59%, 95%)
cmykcmyk(59%, 57%, 0%, 5%)
oklchoklch(58.85% 0.2 277.19deg)
How to use
01
Write the HSL value
Fill the Input (HSL) field using the pattern hsl(h, s%, l%). The percent signs on saturation and lightness matter for parsing. The field is preloaded with hsl(239, 84%, 67%) to show the shape.
02
Watch the swatch update
Each keystroke re-renders the preview swatch once the string parses. If the warning about an unparseable format appears, check that both percentages carry their percent sign.
03
Take the hex from the top row
The results grid highlights HEX as the primary format for this tool. Hit its copy button for an uppercase code you can paste into a tokens file, a brand doc, or an email template.
Why HSL to HEX
- Convert HSL to HEX and every other format.
- Useful for translating designer values into developer-friendly HEX.
Common questions
What hex code does hsl(152, 60%, 40%) produce?
It converts to #29A36A, a medium green. Behind the scenes the hue and saturation are resolved into red, green, and blue channels of 41, 163, and 106, and each channel is then written as a two-digit hex pair.
Why doesn't my HSL round-trip back to the exact original hex?
Whole-number HSL is coarser than 8-bit RGB. Take #6366F1: it converts to hsl(239, 84%, 67%), but feeding that back in yields #6467F2, one digit off per channel. Keep the hex as your source of truth when exact codes matter.
How should I format the input for the HSL to HEX tool?
Stick to hsl(h, s%, l%), for example hsl(152, 60%, 40%). Hue is a plain number of degrees with no unit, while saturation and lightness both need percent signs. Leaving off a percent sign is the most common parse failure.
Can hue values above 360 still convert to a hex code?
Hue is circular, so 512 degrees describes the same angle as 152 degrees. Most parsers wrap large values around the wheel, but writing hues in the 0 to 360 range keeps your inputs readable and predictable.
Does lightness 0% or 100% always give #000000 or #FFFFFF?
Yes, regardless of the hue and saturation you supply. Lightness is the dominant axis: at the extremes every hue collapses to pure black or pure white, which is why usable palette steps usually live between roughly 10 and 95 percent.
Is there a way to darken a color before grabbing the hex?
Just lower the lightness number in the input. Dropping hsl(152, 60%, 40%) to hsl(152, 60%, 32%) yields #218355, a convincing pressed-button shade of the same green. Adjusting the L channel beats eyeballing a darker hex every time.
Is this hsl to hex color converter aimed at CSS values?
That's the main use. Type an hsl() string from your stylesheet and the css hsl to hex online result appears in the highlighted HEX row, ready for a tokens file or an older tool that only takes codes.
Why describe it as a color code translator between hsl and hex?
Because it maps one notation onto another without shifting the color. As a color code translator hsl hex, it resolves your hue, saturation, and lightness into red, green, and blue, then writes each channel as a two-digit pair.