HEX to HSL Converter

Convert any HEX color code to HSL (hue, saturation, lightness) instantly. HSL is the most intuitive color model for building palettes, design tokens and accessible contrast scales.

Accepts 3-digit (e.g. #0AF) or 6-digit (e.g. #155EEF) HEX codes.

Converted Values

HEX #155EEF
RGB rgb(21, 94, 239)
HSL hsl(215, 84%, 51%)
HSV hsv(215, 84%, 94%)
CMYK cmyk(91%, 61%, 0%, 6%)

What Is HEX to HSL Conversion?

HEX to HSL conversion translates a hexadecimal color code into hue, saturation and lightness values. Both formats describe the same visible color in the sRGB color space, but HSL is far more intuitive when you need to reason about how a color behaves: shifting hue, desaturating or lightening.

HSL was designed to align with how humans actually perceive color. Instead of three RGB channels that all mix together, HSL exposes three independent properties:

  • Hue (H): The angle on the color wheel, from 0° to 360°. Red = 0°, green = 120°, blue = 240°.
  • Saturation (S): How vivid or muted the color is, from 0% (gray) to 100% (fully saturated).
  • Lightness (L): How light or dark the color is, from 0% (black) through 50% (pure color) to 100% (white).

How HEX to HSL Works (The Math)

Converting HEX to HSL is a two-step process: first split the HEX code into three RGB values, then convert RGB to HSL using the standard formula. For example:

#155EEF
  15  → R = 21
  5E  → G = 94
  EF  → B = 239

RGB normalized: R=0.082, G=0.369, B=0.937
Max = 0.937, Min = 0.082, Delta = 0.855

Lightness = (Max + Min) / 2       = 0.509 → 51%
Saturation = Delta / (1 - |2L-1|) = 0.855 / (1 - 0.018) = 0.871 → 84% (rounded)
Hue = based on which channel is max
    → 215°

Result: hsl(215, 84%, 51%)

Example HEX to HSL Conversions

  • #FFFFFF → hsl(0, 0%, 100%) — white (no hue, no saturation)
  • #000000 → hsl(0, 0%, 0%) — black
  • #FF0000 → hsl(0, 100%, 50%) — pure red
  • #155EEF → hsl(215, 84%, 51%) — OmniColor blue
  • #87CEEB → hsl(197, 71%, 73%) — SkyBlue

Why Convert HEX to HSL?

  • Palette generation: Generating a scale of shades is trivial — just lower the L value.
  • Design systems: HSL tokens are easier to reason about than HEX tokens.
  • Accessibility: Contrast can be tuned by adjusting L while keeping H and S stable.
  • CSS: Modern CSS supports hsl() and hsl(var(--h) var(--s) var(--l)) for dynamic theming.
  • Color math: Blending, tinting and shading are simpler in HSL than in RGB.

Accuracy

OmniColor uses exact floating-point conversion math that matches the CSS Color Module Level 4 specification. The resulting HSL values, when converted back to HEX, produce exactly the same color — no information is lost.

Frequently Asked Questions