Enter a HSL color below to get the exact HEX value instantly, plus every other format, right in your browser.
When you need HSL to HEX
You worked in HSL because it is easy to adjust: pick a hue, then nudge the lightness until the contrast looks right. Eventually the value has to leave that workspace. Design handoff documents, Figma fill fields, HTML email, manifest settings and many token pipelines still expect a HEX string. Converting from HSL to HEX freezes your tuned color into a compact code that any colleague can paste anywhere without thinking about angle units or percentages.
Typical uses
- Publishing a color tuned in CSS as a HEX code in a style guide or a Figma styles list.
- Preparing colors for HTML email templates, where HEX is the most dependable notation across mail clients.
- Writing the final value into a manifest theme_color or a Tailwind config after experimenting in HSL.
How to convert HSL to HEX
Normalize R, G and B to the 0-1 range and find max, min and Δ = max − min. Lightness is the average of the extremes: L = (max + min) / 2. Saturation is S = Δ / (1 − |2L − 1|), or 0 for grays (Δ = 0).
Hue depends on which channel is the largest: for red H = ((G − B) / Δ) mod 6, for green H = (B − R) / Δ + 2, for blue H = (R − G) / Δ + 4, each multiplied by 60 to get degrees. The reverse conversion rebuilds the channels from chroma C = (1 − |2L − 1|) × S.
HEX values go through RGB first: split the code into three base-16 pairs, then apply the formulas.
Worked example
HSL to RGB
- C = (1 − |2L − 1|) × S = (1 − |2 × 0.4 − 1|) × 0.4 = 0.32
- X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.32 × (1 − |(235 ÷ 60) mod 2 − 1|) = 0.027
- m = L − C ÷ 2 = 0.4 − 0.32 ÷ 2 = 0.24
- 180° ≤ H < 240°: (R′, G′, B′) = (0, X, C) = (0, 0.027, 0.32)
- R = (R′ + m) × 255 = (0 + 0.24) × 255 = 61
- G = (G′ + m) × 255 = (0.027 + 0.24) × 255 = 68
- B = (B′ + m) × 255 = (0.32 + 0.24) × 255 = 143
RGB to HEX
- R: 61 ÷ 16 = 3, remainder 13 → 3D
- G: 68 ÷ 16 = 4, remainder 4 → 44
- B: 143 ÷ 16 = 8, remainder 15 → 8F
hsl(235, 40%, 40%) = #3D448F
Tip: Keep the HSL value in your source stylesheet and export HEX only where you must: emails, documentation, external services. That way the theme stays easy to tune, and duplicate copies of the same color do not drift apart over time.
Common colors: HSL to HEX
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) | #FF0000 |
| Orange | hsl(39, 100%, 50%) | #FFA500 |
| Yellow | hsl(60, 100%, 50%) | #FFFF00 |
| Lime | hsl(120, 100%, 50%) | #00FF00 |
| Green | hsl(120, 100%, 25%) | #008000 |
| Cyan | hsl(180, 100%, 50%) | #00FFFF |
| Teal | hsl(180, 100%, 25%) | #008080 |
| Blue | hsl(240, 100%, 50%) | #0000FF |
| Navy | hsl(240, 100%, 25%) | #000080 |
| Purple | hsl(300, 100%, 25%) | #800080 |
| Magenta | hsl(300, 100%, 50%) | #FF00FF |
| Pink | hsl(350, 100%, 88%) | #FFC0CB |
| Brown | hsl(0, 59%, 41%) | #A52A2A |
| Gray | hsl(0, 0%, 50%) | #808080 |
| Black | hsl(0, 0%, 0%) | #000000 |
| White | hsl(0, 0%, 100%) | #FFFFFF |
Frequently asked questions
Does hue 360 give the same HEX as hue 0?
Yes. Hue is a position on a circle, so 360 degrees returns to the starting point, which is red at hue 0. Both hsl(360 100% 50%) and hsl(0 100% 50%) give #ff0000.
Which hsl() syntax is correct in CSS?
The modern form uses spaces: hsl(210 60% 40%). The older comma form, hsl(210, 60%, 40%), still works. The angle can also carry a unit, such as 0.5turn instead of 180deg. If your tooling is old, shipping a plain HEX is the safest choice.
What do hue, saturation and lightness mean?
Hue is the position on the color wheel in degrees (0° red, 120° green, 240° blue). Saturation is how vivid the color is, from 0% gray to 100% pure. Lightness runs from 0% black through 50% pure color to 100% white.
Why use HSL instead of RGB?
HSL is easier to reason about: to darken a color you lower L, to mute it you lower S, keeping the same hue. That makes it convenient for building palettes and tweaking colors in CSS, while in RGB all three channels change at once.
Is the conversion exact?
The formulas are mathematically exact, but displayed values are rounded to whole numbers, so converting back and forth can shift a channel by ±1. For pixel-perfect work keep the original value.
More color converters
Need to grab a color from an image or screenshot? Try the free Pixel Color Picker →