HSL describes a color the way people talk about it: which hue, how colorful, how bright. Converting a HEX code to HSL is the quickest way to get a color into a form you can actually tweak: lighten it, mute it, or build a whole scale from it.
How HEX to HSL conversion works
- Convert the HEX code to RGB and divide each channel by 255, so all three sit between 0 and 1.
- Find the largest and the smallest of the three values. Their average is the lightness L.
- The spread between them drives the saturation S: divide it by (2 − max − min) for light colors, or by (max + min) for dark ones.
- The channel holding the maximum decides the hue H (red at 0°, green at 120°, blue at 240°), and the other two channels position the hue inside that segment.
Worked example
The math is exact, but HSL values are normally rounded to whole degrees and percentages. Converting back can therefore land one or two RGB steps away from the original, invisible in practice, but worth knowing if you round-trip colors repeatedly.
HEX and HSL explained
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
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
HEX to HSL reference table
The most common CSS colors, converted from HEX to HSL.
| Color | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |