RGB to HSL

RGB to HSL converts Red, Green and Blue channel values — the colour model used by screens and CSS — into Hue, Saturation and Lightness, the model that most closely reflects how humans naturally perceive and describe colour. Paste a hex code, type an rgb() value or use the colour picker, and the HSL values update instantly in your browser.

What is HSL?

HSL stands for Hue, Saturation and Lightness. It represents colour in a cylindrical coordinate system designed to be far more intuitive than raw RGB channel numbers.

• Hue is the pure colour expressed as an angle on a colour wheel from 0° to 360°. Red sits at 0°, green at 120° and blue at 240°. The scale wraps back to red at 360°.
• Saturation describes how vivid or grey the colour is, from 0% (completely grey) to 100% (fully saturated).
• Lightness describes perceived brightness from 0% (black) to 100% (white), with 50% giving the purest form of the hue.

How the conversion works

Given RGB values such as R=59, G=130, B=246:

1. Normalise each channel to 0–1: R′=0.231, G′=0.510, B′=0.965
2. Find Cmax (0.965, Blue) and Cmin (0.231, Red); Δ = 0.733
3. Lightness: L = (Cmax + Cmin) / 2 = 0.598 → 60%
4. Saturation: S = Δ / (1 − |2L − 1|) = 0.733 / 0.803 ≈ 0.913 → 91%
5. Hue: Blue is Cmax, so H = 60 × ((R′ − G′) / Δ + 4) ≈ 217°

When would you use HSL?

HSL is widely used in CSS because it is easy to reason about. Adjusting Lightness produces tints and shades of a colour without changing its identity. Adjusting Saturation desaturates a colour towards grey. CSS custom properties, design tokens and theme systems all benefit from expressing brand colours in HSL. Use this tool to translate any existing HEX or RGB colour into HSL for use in a stylesheet or design tool.

Supported input formats

The text field accepts #rgb, #rrggbb, rgb(r, g, b) and rgba(r, g, b, a). The colour picker syncs with the text field in both directions as you type or drag.