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.
RGB to HEX Examples
Here are some common RGB colors and their corresponding HEX values.
| Colour name | RGB value | Hex code | |
|---|---|---|---|
| Black | rgb(0, 0, 0) | #000000 | |
| White | rgb(255, 255, 255) | #FFFFFF | |
| Red | rgb(255, 0, 0) | #FF0000 | |
| Green | rgb(0, 128, 0) | #008000 | |
| Navy | rgb(0, 0, 128) | #000080 | |
| Yellow | rgb(255, 255, 0) | #FFFF00 | |
| Purple | rgb(128, 0, 128) | #800080 | |
| Blue | rgb(37, 99, 235) | #2563EB |
Related Color Tools
Color Palettes
Looking for more color tools? Browse all Color Tools for color codes, converters, shade references, and other color resources.
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.