HEX to HSL Guide

Understand how HEX color codes convert to HSL values, with the exact math and practical examples.

What Is HSL?

HSL stands for Hue, Saturation, Lightness — three independent properties that together describe any color. It is more intuitive than HEX or RGB for design work because you can adjust one property at a time without rethinking the whole color.

  • Hue: 0–360° around the color wheel (0° = red, 120° = green, 240° = blue)
  • Saturation: 0–100% (0% = gray, 100% = fully vivid)
  • Lightness: 0–100% (0% = black, 50% = pure color, 100% = white)

The Conversion Path: HEX → RGB → HSL

HSL is not computed directly from HEX. The process is two steps:

  1. Convert HEX to RGB (three channel values 0–255)
  2. Convert RGB to HSL using the standard formula

Step 1: HEX to RGB

Each pair of hex digits becomes one channel value from 0 to 255. Example:

#155EEF
  R = 15 (hex) = 21
  G = 5E (hex) = 94
  B = EF (hex) = 239

Step 2: RGB to HSL

Normalize each channel to 0–1 by dividing by 255. Then compute max, min and delta:

r = 21/255  = 0.082
g = 94/255  = 0.369
b = 239/255 = 0.937

max = 0.937, min = 0.082, delta = 0.855

L = (max + min) / 2 = 0.509 → 51%
S = delta / (1 - |2L - 1|) = 0.855 / 0.982 = 0.871 → 84%
H: max is b → H = 60 × (4 + (r - g)/delta)
   = 60 × (4 - 0.336)
   = 220° (rounded to 215° depending on precision)

Worked Examples

White: #FFFFFF

RGB = (255, 255, 255)
r = g = b = 1.0

max = min → saturation = 0
L = (1 + 1) / 2 = 1 → 100%
H = 0 (undefined, conventionally 0)

Result: hsl(0, 0%, 100%)

Black: #000000

RGB = (0, 0, 0)
r = g = b = 0

L = 0 → 0%
S = 0
H = 0

Result: hsl(0, 0%, 0%)

Red: #FF0000

RGB = (255, 0, 0)

max = 1, min = 0, delta = 1
L = 0.5 → 50%
S = 1 / (1 - 0) = 1 → 100%
H = 0

Result: hsl(0, 100%, 50%)

Coral: #FF7F50

RGB = (255, 127, 80)
r = 1.0, g = 0.498, b = 0.314

max = 1.0, min = 0.314, delta = 0.686
L = (1.0 + 0.314) / 2 = 0.657 → 66%
S = 0.686 / (1 - |2(0.657) - 1|) = 0.686 / 0.686 = 1 → 100%
H = 60 × ((g - b)/delta) = 60 × 0.268 = 16°

Result: hsl(16, 100%, 66%)

Why HSL Is Useful

Palette generation

Adjusting lightness is trivial in HSL: for a shade, decrease L; for a tint, increase L. Hue and saturation stay constant, so the palette stays on-hue.

Design tokens

Modern design systems use HSL because token values are readable and adjustable. --color-primary: hsl(215 84% 51%) is more understandable than a hex code.

Accessibility tuning

To improve contrast, decrease L while keeping H and S. This preserves brand identity better than picking a completely different HEX code.

Dynamic theming

CSS custom properties with HSL values can be adjusted at runtime using hsl(var(--h) var(--s) var(--l)). This enables dark mode, light mode and brand theming with the same base values.

HEX vs HSL — When to Use Each

  • Use HEX for: production code, brand specs, design handoff, email templates
  • Use HSL for: palette generation, design tokens, theming, interactive adjustment
  • Both represent the same color — conversion is lossless (except tiny rounding)

Common Mistakes

Thinking 50% lightness is always "medium"

50% lightness means the color is at its purest hue value — for red, 50% is bright red. For yellow, 50% looks brownish because yellow's pure form is much lighter.

Assuming hue is meaningful for grays

Any color with 0% saturation is a pure gray regardless of hue. The hue value is technically meaningless in that case.

Forgetting that S is relative to L

At very high or very low lightness, saturation has less visible effect. A fully saturated yellow at L=95% looks almost white.

Related Tools

Frequently Asked Questions

Open HEX to HSL Converter →