RGB to HSL Converter

Convert RGB values to HSL (hue, saturation, lightness) instantly. HSL is more intuitive for building color systems — this conversion shows how your RGB channels map to hue-and-lightness reasoning.

Format: red, green, blue (each 0–255). Example: 21, 94, 239

Converted Values

HEX#155EEF
RGBrgb(21, 94, 239)
HSLhsl(215, 84%, 51%)
HSVhsv(215, 84%, 94%)
CMYKcmyk(91%, 61%, 0%, 6%)

What Is RGB to HSL Conversion?

RGB to HSL conversion translates three integer channel values into the hue-saturation-lightness model. Both describe the same sRGB color, but HSL exposes hue, saturation and lightness independently — making it much easier to reason about color adjustment, palette generation and theming.

Why Convert RGB to HSL?

  • Design systems: Tokens are easier to author and reason about in HSL. A brand color becomes "H=215, S=84%" and shades are just "L from 10% to 90%".
  • Theme switching: Light and dark mode can be handled by swapping L values while keeping H and S fixed.
  • Accessibility tuning: Contrast can be increased by lowering L without touching H or S.
  • Color generation: Analogous, complementary and triadic harmonies are trivial to compute in HSL.

How RGB to HSL Works

rgb(21, 94, 239)
Normalized: R=0.082, G=0.369, B=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% (rounded)
H: B is max → H = 60 × (4 + (R-G)/Delta) = 60 × (4 - 0.336) = 215°

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

Example Conversions

  • rgb(255, 255, 255) → hsl(0, 0%, 100%) — white
  • rgb(0, 0, 0) → hsl(0, 0%, 0%) — black
  • rgb(255, 0, 0) → hsl(0, 100%, 50%) — red
  • rgb(21, 94, 239) → hsl(215, 84%, 51%) — OmniColor blue

Frequently Asked Questions