Developer
Encoders, converters & dev utilities
HSL to HEX Color Converter
Convert an HSL color like hsl(32, 100%, 50%) into a CSS HEX code. HSL first reconstructs RGB via the inverse CSS Color 3 math — chroma C = (1 − |2L − 1|) × S, an intermediate X = C × (1 − |(H/60 mod 2) − 1|), and a lightness offset m added to each channel — then each 0–255 channel is written as two zero-padded hex digits. Worked example: hsl(32, 100%, 50%) → rgb(255, 136, 0) → #FF8800. This is the natural direction when you have designed a color in HSL (say by nudging hue or lightness) and need the HEX to drop into CSS or a design token. Runs 100% in your browser with a live swatch. Free, no login.
HSL → HEX = reconstruct RGB (chroma C=(1−|2L−1|)·S, X, +m — CSS Color 3 inverse), then write each channel as two zero-padded hex digits
- Byte-exact worked example: hsl(32, 100%, 50%) → rgb(255, 136, 0) → #FF8800
- Channels below 16 stay two digits (zero-padded), so the output is always a valid #RRGGBB
- HSL ≠ HSV: feed real HSL numbers (L=(max+min)/2), not HSV/HSB values, or the HEX will be wrong
- 100% client-side with a live swatch + copy-ready CSS — nothing is uploaded
Frequently asked questions
How do I convert HSL to HEX?
Go through RGB. Use the inverse CSS Color 3 formula to rebuild the channels: compute chroma C = (1 − |2L − 1|) × S, an intermediate X from the hue sector, and a match value m = L − C/2 added to each channel, giving 0–255 RGB. Then write each channel as two zero-padded hex digits. For hsl(32, 100%, 50%) that is rgb(255, 136, 0), which is #FF8800. The tool does all of this live with a swatch.
Do I need to go through RGB to reach HEX?
Effectively yes — HEX is just RGB written in base-16, so the conversion reconstructs the RGB channels from hue, saturation and lightness first, then formats them as two hex digits each. There is no direct HSL-to-hex shortcut that skips the RGB reconstruction; the hue-sector math is what turns the angle back into red/green/blue amounts.
My HSL to HEX result looks wrong — what happened?
The most common cause is feeding HSV/HSB numbers into an HSL converter. HSL lightness is (max + min) / 2, while HSV value is the max channel, so a color that reads as "100, 100" in a design tool's HSV picker is a different color in HSL. Make sure the input really is HSL (as used by CSS hsl()), and check that saturation and lightness are percentages, not 0–1 fractions.