HEX to HSL Converter (Live Color Codes & Design Tokens)
Convert hexadecimal color codes to hsl() and hsla() formats in real time. Translate 3, 6, and 8-digit hex strings into intuitive Hue (0°–360°), Saturation (0%–100%), and Lightness (0%–100%) coordinates for modern CSS design systems.
To convert HEX to HSL, convert the hexadecimal pairs into decimal RGB values (0–255), then scale them to fractions between 0 and 1. Calculate Lightness as the average of the minimum and maximum channel values, calculate Saturation from the color chroma, and calculate the Hue angle (0°–360°) based on which color channel is dominant.
The Mathematics of HEX to HSL Conversion
Unlike RGB, which models hardware light emitters, HSL (Hue, Saturation, Lightness) models human color perception using cylindrical coordinates:
- Normalize RGB: Convert the 2-digit hex pairs to decimal values (0–255), then divide by 255 to yield fractions between 0.0 and 1.0:
r = R / 255,g = G / 255,b = B / 255 - Find Max, Min, and Chroma (Δ):
Cmax = Math.max(r, g, b),Cmin = Math.min(r, g, b),Δ = Cmax - Cmin - Calculate Lightness (L): The vertical midpoint of brightness:
L = (Cmax + Cmin) / 2 - Calculate Saturation (S): Color purity relative to lightness:
If Δ = 0, S = 0%. Otherwise:S = Δ / (1 - Math.abs(2L - 1)) - Calculate Hue Angle (H): Position on the 360° color wheel:
- If Red is max:
H = 60° × (((g - b) / Δ) % 6) - If Green is max:
H = 60° × (((b - r) / Δ) + 2) - If Blue is max:
H = 60° × (((r - g) / Δ) + 4)
- If Red is max:
Programmatic Conversion in JavaScript
To automate HEX to HSL conversions in design pipelines, use this battle-tested algorithm:
function hexToHsl(hex) {
let r = parseInt(hex.slice(1, 3), 16) / 255;
let g = parseInt(hex.slice(3, 5), 16) / 255;
let b = parseInt(hex.slice(5, 7), 16) / 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // Achromatic (gray)
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h = Math.round(h * 60);
}
return { h, s: Math.round(s * 100), l: Math.round(l * 100) };
}
console.log(hexToHsl('#2563EB')); // { h: 221, s: 83, l: 53 }
Why Design Systems Prefer HSL Over HEX
Modern UI design systems (including Tailwind CSS, Radix UI, and Shadcn) construct dynamic component palettes using HSL tokens because adjusting tints and states requires modifying only a single integer:
- Hover States: Decrease Lightness by 8–10% (e.g.,
hsl(221, 83%, 53%)→hsl(221, 83%, 43%)). - Subtle Card Backgrounds: Increase Lightness to 95–97% while reducing Saturation to create soft tinted surfaces.
- Dark Mode Inversion: Retain the exact Hue angle (H) while inverting Lightness (
100% - L), preserving consistent brand recognition across themes.
Common Brand Colors HEX to HSL Matrix
| Color Token | HEX Code | Legacy HSL | Modern CSS Level 4 | Visual Swatch |
|---|---|---|---|---|
| Tailwind Blue 600 | #2563EB | hsl(221, 83%, 53%) | hsl(221deg 83% 53%) | |
| Emerald 500 | #10B981 | hsl(160, 84%, 39%) | hsl(160deg 84% 39%) | |
| Purple 500 | #8B5CF6 | hsl(258, 90%, 66%) | hsl(258deg 90% 66%) | |
| Amber 500 | #F59E0B | hsl(38, 92%, 50%) | hsl(38deg 92% 50%) | |
| Red 500 | #EF4444 | hsl(0, 84%, 60%) | hsl(0deg 84% 60%) |
Related Color & Code Utilities:
- HEX to RGB Converter — Translate hex strings into legacy and modern CSS rgb() formats.
- RGB to HEX Converter — Convert decimal RGB integers into 6-digit and 8-digit alpha hex codes.
- Full Color Converter Hub — Simultaneous conversion between HEX, RGB, and HSL palettes.
- Modern CSS Color Spaces Guide — Deep dive into OKLCH, Display-P3, and wide-gamut formats.
Frequently Asked Questions
What is the difference between HEX and HSL?
HEX uses a base-16 string representing red, green, and blue light intensity, which is difficult for humans to adjust intuitively. HSL uses cylindrical coordinates: Hue (color angle on a 360-degree wheel), Saturation (color intensity from 0% to 100%), and Lightness (brightness from 0% to 100%).
How does 8-digit HEX convert to HSLA?
An 8-digit HEX code (#RRGGBBAA) encodes alpha transparency in its final two digits. The hex pair (00 to FF) is converted to a decimal percentage (0% to 100%), which maps to the alpha parameter in hsla(h, s, l, a) or modern hsl(h s l / a%).
Why do frontend design systems use HSL?
HSL makes creating dynamic color variations simple. Designers can generate hover states by lowering Lightness by 10%, or create light backgrounds by increasing Lightness to 95%, all while keeping the Hue angle consistent.
What is modern space-separated HSL syntax in CSS?
CSS Color Module Level 4 replaces commas with spaces: hsl(221deg 83% 53%). For transparency, a slash is used instead of a comma: hsl(221deg 83% 53% / 50%).
How are achromatic colors (black, white, gray) represented in HSL?
When Red, Green, and Blue are equal, chroma is zero, resulting in 0% Saturation. Pure Black is hsl(0, 0%, 0%), Pure White is hsl(0, 0%, 100%), and Pure Gray is hsl(0, 0%, 50%), with the Hue angle set to 0.