Enter a HEX color below to get the exact HSL value instantly, plus every other format, right in your browser.
When you need HEX to HSL
A brand color usually arrives as HEX, but HEX is awkward to adjust: making it slightly darker means changing all three channels. Converting to HSL first lets you move a single number. Front-end developers do this to generate hover and active states for buttons, to build a ten-step scale for a design system, or to derive a dark-mode variant from one base value. Enter the HEX code, then edit the lightness or saturation in the result while keeping the hue steady.
Typical uses
- Generating hover, active and disabled variants of a brand button by changing only the lightness value.
- Defining CSS custom properties such as --h, --s and --l so a whole theme shifts with one hue number.
- Creating a scale of lighter and darker tones for a design system from a single HEX in the brand guide.
How to convert HEX to HSL
Normalize R, G and B to the 0-1 range and find max, min and Δ = max − min. Lightness is the average of the extremes: L = (max + min) / 2. Saturation is S = Δ / (1 − |2L − 1|), or 0 for grays (Δ = 0).
Hue depends on which channel is the largest: for red H = ((G − B) / Δ) mod 6, for green H = (B − R) / Δ + 2, for blue H = (R − G) / Δ + 4, each multiplied by 60 to get degrees. The reverse conversion rebuilds the channels from chroma C = (1 − |2L − 1|) × S.
HEX values go through RGB first: split the code into three base-16 pairs, then apply the formulas.
Worked example
HEX to RGB
- R: 2E₁₆ = 2 × 16 + 14 = 46
- G: CC₁₆ = 12 × 16 + 12 = 204
- B: 71₁₆ = 7 × 16 + 1 = 113
RGB to HSL
- Normalize the channels: R′ = 46 ÷ 255 = 0.18, G′ = 204 ÷ 255 = 0.8, B′ = 113 ÷ 255 = 0.443
- max = 0.8 (G′), min = 0.18 (R′), Δ = 0.62
- L = (max + min) ÷ 2 = (0.8 + 0.18) ÷ 2 = 0.49 → 49%
- S = Δ ÷ (1 − |2L − 1|) = 0.62 ÷ (1 − |2 × 0.49 − 1|) = 0.632 → 63%
- H = 60 × ((B′ − R′) ÷ Δ + 2) = 60 × ((0.443 − 0.18) ÷ 0.62 + 2) ≈ 145°
#2ECC71 = hsl(145, 63%, 49%)
Tip: Store the hue as a CSS custom property, for example --brand-h: 14, and write hsl(var(--brand-h) 80% 50%). Changing that one number then re-themes every component, which is much faster than editing a long list of HEX codes.
Common colors: HEX to HSL
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 | hsl(0, 100%, 50%) |
| Orange | #FFA500 | hsl(39, 100%, 50%) |
| Yellow | #FFFF00 | hsl(60, 100%, 50%) |
| Lime | #00FF00 | hsl(120, 100%, 50%) |
| Green | #008000 | hsl(120, 100%, 25%) |
| Cyan | #00FFFF | hsl(180, 100%, 50%) |
| Teal | #008080 | hsl(180, 100%, 25%) |
| Blue | #0000FF | hsl(240, 100%, 50%) |
| Navy | #000080 | hsl(240, 100%, 25%) |
| Purple | #800080 | hsl(300, 100%, 25%) |
| Magenta | #FF00FF | hsl(300, 100%, 50%) |
| Pink | #FFC0CB | hsl(350, 100%, 88%) |
| Brown | #A52A2A | hsl(0, 59%, 41%) |
| Gray | #808080 | hsl(0, 0%, 50%) |
| Black | #000000 | hsl(0, 0%, 0%) |
| White | #FFFFFF | hsl(0, 0%, 100%) |
Frequently asked questions
How do I build a dark-mode version of a converted color?
Keep the hue, lower the lightness and usually reduce saturation slightly so the color does not glare on a dark background. Then test contrast against the page background, because the numbers alone do not guarantee readable text.
Why is the hue 0 for my gray HEX code?
Grays such as #808080 have equal red, green and blue values, so no hue exists. The converter reports 0 by convention, and it has no visible effect while saturation is 0%. Changing the hue later will not tint the gray unless you also raise saturation.
What do hue, saturation and lightness mean?
Hue is the position on the color wheel in degrees (0° red, 120° green, 240° blue). Saturation is how vivid the color is, from 0% gray to 100% pure. Lightness runs from 0% black through 50% pure color to 100% white.
Why use HSL instead of RGB?
HSL is easier to reason about: to darken a color you lower L, to mute it you lower S, keeping the same hue. That makes it convenient for building palettes and tweaking colors in CSS, while in RGB all three channels change at once.
Is the conversion exact?
The formulas are mathematically exact, but displayed values are rounded to whole numbers, so converting back and forth can shift a channel by ±1. For pixel-perfect work keep the original value.
More color converters
Need to grab a color from an image or screenshot? Try the free Pixel Color Picker →