Convert hsl() colors to hex codes. Enter hue in degrees with saturation and lightness percentages — hsl(210, 100%, 56%) — and get the six-digit hex your stylesheets, design tools and emails expect, with the intermediate RGB values shown along the way.
Settings
Generated locally in your browser — your settings and results never leave this page.
From wheel-and-sliders to a shippable code
HSL is where colors get designed; hex is where they get deployed. You sketch a warm gold, quite saturated, medium light as hsl(42.9, 74.4%, 49%) — then need the hex for the stylesheet, the brand doc, the SVG. This converter is that hand-off, showing the intermediate RGB so the process stays inspectable.
How the algorithm rebuilds channels
Three derived quantities do the work: chroma C = (1 − |2L−1|) × S sets intensity; the hue’s 60° sector decides which channels receive C and its ramp companion X; the match m = L − C/2 lifts everything to the right lightness. For hue 42.9° (first sector, red→yellow), red takes C, green takes X, blue takes zero:
C = (1 − |2×0.49 − 1|) × 0.74 = 0.73 X = C × (1 − |(H/60 mod 2) − 1|) m = L − C/2 (R, G, B) = ((C+m), (X+m), (0+m)) × 255 = rgb(218, 165, 32) = #daa520
Angles beyond 0–360
Hue is genuinely an angle: -140°, 220° and 580° name the same direction, and CSS accepts deg, rad, grad and turn units. The converter normalizes all of them, so formulas that emit accumulated rotations (animation code, generative palettes) can paste their raw output.
When the result surprises you
Three usual suspects: saturation and lightness swapped (hsl order is H, S, L); a saturation of 0 flattening every hue to the same gray; or expecting perceptual behavior from L — hsl(60, 100%, 50%) and hsl(240, 100%, 50%) share a lightness number and nothing else visually. The preview swatch settles disputes instantly.
Reference values, computed live
A pocket reference for the round trip. Seven hsl() specifications and their exact hex spellings:
| Color | HSL | HEX |
|---|---|---|
| orchid | hsl(302.3, 58.9%, 64.7%) | #da70d6 |
| tomato | hsl(9.1, 100%, 63.9%) | #ff6347 |
| mediumseagreen | hsl(146.7, 49.8%, 46.9%) | #3cb371 |
| mediumpurple | hsl(259.6, 59.8%, 64.9%) | #9370db |
| goldenrod | hsl(42.9, 74.4%, 49%) | #daa520 |
| crimson | hsl(348, 83.3%, 47.1%) | #dc143c |
| olivedrab | hsl(79.6, 60.5%, 34.7%) | #6b8e23 |
Rows like these are the fastest audit for any HSL implementation you meet in the wild — a spreadsheet formula, a legacy utility, a snippet from a forum. Feed it these inputs; disagreements with this table’s output localize the bug (usually a degrees-versus-normalized-hue mix-up) in seconds.
How to use the HSL to HEX Converter
- Type the HSL color – hsl(210, 100%, 56%) or bare values like 210, 100%, 56%.
- The result updates live as you type – no convert button needed.
- Copy the hex code, or open the all-formats output for every other notation.
- Share the exact result: the page URL updates with your input, so the link reproduces it.
Frequently asked questions
How does HSL convert back to a hex code?
The standard algorithm computes chroma from saturation and lightness, splits the hue into one of six 60° sectors to distribute chroma across channels, adds a lightness match term, then scales to 0-255 and formats base-16. The tool prints the sector and values it used.
Why do hsl(210, 100%, 56%) and #1e90ff differ slightly?
Because 56% is a rounded lightness. Dodger blue is exactly hsl(209.6, 100%, 55.9%); feeding the rounded 56% lands one step away. One-decimal HSL is usually close enough, but pixel-exact work should round-trip through the tool to check.
Can I use hue angles above 360 or negative?
Yes – hue is an angle, so 570° and 210° and −150° are the same direction. The converter normalizes any angle into 0-360 before computing, and also accepts deg, turn, rad and grad units like CSS does.
What does 100% saturation with 50% lightness produce?
The purest possible version of the hue – maximum chroma, no white or black mixed in. Moving lightness either way from 50% at full saturation begins washing toward white or crushing toward black.
Why did my HSL color come out gray?
Check the saturation: at 0% every hue renders the identical gray for a given lightness. A common cause is entering saturation and lightness in the wrong order – hsl() is hue, then saturation, then lightness.
Does this handle hsla() with alpha?
Yes – a fourth value or slash-alpha parses fine, and the output switches to 8-digit hex so the opacity survives the conversion. hsla(210, 100%, 56%, 0.5) and hsl(210 100% 56% / 50%) both work and mean the same color.
Which is better to store in a design system, HSL or HEX?
Store what your tools consume. Hex is universal and compact; HSL is self-documenting and hand-editable. Increasingly the strongest answer is OKLCH, which keeps the editability while fixing HSL's lightness lies – this site converts to all three.
