Picking a color in HSL is comfortable, but stylesheets, design handoffs and brand documents still run on HEX. This converter closes that gap and gives you the six-digit code for any hue, saturation and lightness combination.
How HSL to HEX conversion works
- Turn saturation and lightness into fractions: 60% becomes 0.6.
- Compute the chroma C = (1 − |2L − 1|) × S. That is how far the color sits from grey.
- Use the hue to place that chroma on the red, green and blue channels, then shift all three by L − C/2.
- Multiply each channel by 255, round it, and write it as two hexadecimal digits.
Worked example
Rounding happens once, in the last step, when each channel is snapped to a whole 0–255 value. The result is the closest HEX code to your HSL input and normally identical to what a design tool shows.
HSL and HEX explained
What is HSL?
HSL splits a color into hue (0–360° on the color wheel), saturation (how colorful, 0–100%) and lightness (how bright, 0–100%). Because each part matches the way people describe color, HSL is the easiest format for building tints, shades and consistent palettes, by hand or in code.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Best for:
- palettes, tints and shades, theming
What is HEX?
A HEX code is a six-digit hexadecimal number that stores the red, green and blue channel of a color behind a leading #. Each pair of digits covers one channel, from 00 (none) to FF (full), which gives the same 16.7 million colors as RGB in a much shorter notation. HEX is the default in CSS, design tools and brand guidelines.
- Syntax:
- #RRGGBB
- Range:
- 00–FF per channel
- Best for:
- CSS, design handoff, brand guidelines
HSL to HEX reference table
The most common CSS colors, converted from HSL to HEX.
| Color | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |