HEX to HSL Converter
Convert HEX color codes to HSL values instantly with live color preview.
HSL
hsl(62, 99%, 46%)
Hue
62°
Saturation
99%
Lightness
46%
Formula
HEX → RGB → HSL (normalize RGB to 0-1, compute hue from max channel, saturation from delta, lightness from average)
Understanding the HSL Color Model
HSL represents colors the way humans naturally think about them. Instead of mixing amounts of red, green, and blue light (which is what HEX and RGB do), HSL lets you pick a color from a wheel, choose how vivid it should be, and decide how bright or dark you want it.
The hue is a position on the color wheel measured in degrees. Starting at 0 degrees (red), you move through orange (30), yellow (60), green (120), cyan (180), blue (240), purple (270), magenta (300), and back to red at 360. Saturation at 100% gives you the purest color, while 0% gives you gray. Lightness at 50% gives you the truest version of the color, 0% is always black, and 100% is always white.
Generating Color Palettes with HSL
One of the most practical reasons to convert HEX to HSL is to build a full color system from a single brand color. Once you have the HSL values, you can generate an entire palette by adjusting lightness:
:root {
--brand-h: 220;
--brand-s: 80%;
--brand-50: hsl(var(--brand-h), var(--brand-s), 95%);
--brand-100: hsl(var(--brand-h), var(--brand-s), 90%);
--brand-200: hsl(var(--brand-h), var(--brand-s), 80%);
--brand-300: hsl(var(--brand-h), var(--brand-s), 70%);
--brand-400: hsl(var(--brand-h), var(--brand-s), 60%);
--brand-500: hsl(var(--brand-h), var(--brand-s), 50%); /* base */
--brand-600: hsl(var(--brand-h), var(--brand-s), 40%);
--brand-700: hsl(var(--brand-h), var(--brand-s), 30%);
--brand-800: hsl(var(--brand-h), var(--brand-s), 20%);
--brand-900: hsl(var(--brand-h), var(--brand-s), 10%);
}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);
const 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);
if (max === r) h = ((g-b)/d + (g<b ? 6 : 0)) / 6;
if (max === g) h = ((b-r)/d + 2) / 6;
if (max === b) h = ((r-g)/d + 4) / 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}HSL vs HEX vs RGB: Quick Comparison
HEX is best for...
Compact color values in stylesheets, copying from design tools, and defining solid colors. It is the most common format you will encounter in existing codebases.
RGB is best for...
Programmatic color manipulation, canvas/WebGL work, and when you need alpha transparency. It maps directly to how screens display color.
HSL is best for...
Building design systems, generating color palettes, creating accessible contrast pairs, and any situation where you need to reason about color relationships intuitively.
Frequently Asked Questions
How do I convert HEX to HSL?
First convert the HEX code to RGB values, then apply the standard RGB-to-HSL algorithm. The result gives you Hue (0-360 degrees on the color wheel), Saturation (0-100% color intensity), and Lightness (0-100% brightness).
What is HSL?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on a 360-degree wheel (0 is red, 120 is green, 240 is blue). Saturation controls how vivid the color is. Lightness controls how bright or dark it appears.
Why use HSL instead of HEX?
HSL is more intuitive for creating color variations. To make a color lighter, increase lightness. To make it muted, decrease saturation. To shift the color, change the hue. With HEX, these operations require complex calculations.
How does HSL work in CSS?
CSS supports hsl() notation: hsl(120, 100%, 50%) for pure green. Modern CSS also allows the space-separated syntax: hsl(120 100% 50%). For transparency, add a fourth value: hsl(120 100% 50% / 0.5).
What is the hue value for common colors?
Red is 0 (or 360), orange is around 30, yellow is 60, green is 120, cyan is 180, blue is 240, purple is 270, and magenta is 300. These are evenly spaced on the color wheel.
How do I create a darker shade of a color with HSL?
Keep the hue and saturation the same and reduce the lightness value. For example, hsl(220, 80%, 50%) is a medium blue. hsl(220, 80%, 30%) is a dark blue. hsl(220, 80%, 15%) is a very dark blue.
How do I create a lighter tint with HSL?
Increase the lightness value while keeping hue and saturation. hsl(220, 80%, 70%) is a light blue. hsl(220, 80%, 90%) is a very light, pastel blue. At 100% lightness, every color becomes white.
What is the difference between HSL and HSB/HSV?
HSL and HSB (also called HSV) use different lightness models. In HSL, 50% lightness is the pure color. In HSB, 100% brightness is the pure color. Design tools like Figma and Photoshop typically use HSB, while CSS uses HSL.
Can I use HSL for CSS custom properties?
Yes, and it is a powerful pattern. Store hue, saturation, and lightness as separate custom properties: --brand-h: 220; --brand-s: 80%; --brand-l: 50%. Then compose them: hsl(var(--brand-h), var(--brand-s), var(--brand-l)).
How do I generate an accessible color palette with HSL?
Start with your brand hue. Create shades by varying lightness from 10% (darkest) to 95% (lightest) in steps. Check contrast ratios between light and dark shades. WCAG requires at least 4.5:1 for body text.
Is HSL supported in all browsers?
Yes. HSL has been supported in all major browsers since 2010, including Chrome, Firefox, Safari, Edge, and mobile browsers. The modern space-separated syntax is supported in all browsers from 2021 onward.
What happens at 0% and 100% saturation?
At 0% saturation, the color becomes a shade of gray regardless of hue. The lightness alone determines how dark or light the gray is. At 100% saturation, you get the most vivid version of that hue.
Disclaimer: This tool provides approximate conversions for reference purposes. Color rendering may vary slightly across different displays and browsers.