How does HEX to HSL conversion work?
HSL stands for Hue, Saturation, and Lightness. Converting from HEX first extracts the RGB values, then derives H, S, and L mathematically. Hue is the position on the color wheel (0–360°), saturation is how vivid the color is (0–100%), and lightness controls brightness (0–100%).
For #2563EB: the RGB is 37, 99, 235. After normalization and channel math, this gives hsl(221, 83%, 53%).
Why use HSL instead of HEX or RGB?
HSL is the most human-readable color format. To make a color lighter, increase L. For a less vivid version, decrease S. With HEX or RGB you'd have to recalculate all three channels — making HSL ideal for design systems and CSS custom properties.
Common color reference
Common web colours with their HEX and HSL equivalents.
| Colour name | Hex code | RGB value | HSL value | |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Orange | #FF8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) | |
| Amber | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
Frequently asked questions
Why do hue 0° and 360° both mean red?
The hue axis wraps around like a color wheel — 0 and 360 are the same point. The scale runs red → yellow → green → cyan → blue → magenta → back to red.
What does saturation 0% mean?
At S = 0%, the color is fully desaturated — it becomes a shade of gray regardless of hue, determined entirely by lightness.
Is HSL the same as HSV or HSB?
No. In HSL, L = 50% with full saturation gives a pure hue. In HSV/HSB, V = 100% at full saturation gives the same. They model the same RGB cube differently.