Hex to HSL Converter
Convert any hex color code to HSL (hue, saturation, lightness) values. HSL is often more intuitive for adjusting colors — you can easily make a color lighter, darker, or more saturated by changing individual values.
Convert HEX to HSL
hsl(48 97% 48%)
Also available in
| Code | Value | HTML/CSS | |
|---|---|---|---|
| RGB | 239, 191, 4 | rgb(239 191 4) | |
| HSV | 48, 98, 94 | — | |
| CMYK | 0, 20, 98, 6 | — | |
| OKLCH | 0.82, 0.17, 90 | oklch(0.82 0.17 90) |
CMYK values are approximate. For production printing, use ICC profile-based conversion in your design software.
Use this color in Moda
Apply exact brand colors to slides, social posts, and other designs — all on a real canvas you control.
Try Moda free →How to convert hex to HSL
The conversion happens in two steps: hex → RGB → HSL. First, decode the hex code to RGB as described above. Then, normalize R, G, B to the 0–1 range and find the min and max. Lightness = (max+min)/2. If max=min, saturation=0 and hue=0 (achromatic). Otherwise, saturation depends on lightness, and hue is calculated from which channel is dominant: if red is max, hue = (G−B)/(max−min); if green, hue = 2+(B−R)/(max−min); if blue, hue = 4+(R−G)/(max−min). The result is scaled to 0–360° for hue and 0–100% for S and L.
When to use hex vs HSL
HSL is the best format for programmatic color manipulation. If you need to create a lighter version of a brand color for a background, just increase the L value. Need a muted variant? Reduce S. Hex is more common in handoff documents and brand guidelines. Use hex for static specifications; reach for HSL when building design systems, theming, or generating color scales in code.
Worked example
Convert #E74C3C to HSL: First, RGB = (231, 76, 60). Normalize: R=0.906, G=0.298, B=0.235. Max=0.906 (R), min=0.235 (B). L = (0.906+0.235)/2 = 0.571 → 57%. S = (0.906−0.235)/(1−|2×0.571−1|) = 0.671/0.858 = 0.782 → 78%. Hue = (0.298−0.235)/(0.906−0.235) × 60 = 5.6°. Result: HSL(6, 78%, 57%) — a vivid tomato red.
HSL in CSS
Modern CSS supports HSL natively via the hsl() function: hsl(6 78% 57%). This makes it easy to define color palettes directly in stylesheets. Many CSS-in-JS libraries and design token systems also prefer HSL because adjusting lightness and saturation is more predictable than tweaking individual RGB channels.
Frequently asked questions
What is HSL?
HSL stands for Hue (0–360°, the color wheel position), Saturation (0–100%, how vivid the color is), and Lightness (0–100%, how light or dark). It is designed to be more intuitive for humans than RGB.
When should I use HSL instead of hex?
HSL is useful when you need to create color variations — making a color lighter, darker, or less saturated is as simple as adjusting one number. It is also used in CSS with the hsl() function.
How do I convert hex to HSL?
The hex code is first converted to RGB, then RGB is converted to HSL using a mathematical formula that calculates hue from the dominant color channel, saturation from the range of channels, and lightness from their average.