Color Converter

HEX, RGB and HSL explained

All three describe the same colors in different ways. HEX (like #2563EB) and RGB (like rgb(37, 99, 235)) both specify how much red, green and blue to mix. HSL (hsl(220, 82%, 53%)) uses hue, saturation and lightness, which is often more intuitive to tweak by eye — slide the lightness up for a tint, down for a shade. Use whichever your CSS or design tool prefers; this converter keeps them in sync.

The three notations

HEX, RGB and HSL describe the same sRGB colours in different coordinates. HEX and RGB are the same numbers in different bases; HSL is a rotation of that cube into something humans can reason about.

• HEX — compact and unambiguous; the default in design handoffs. Supports #RGB shorthand and #RRGGBBAA for alpha.
• RGB — three 0–255 channels; the easiest form to compute with.
• HSL — hue in degrees around the wheel, plus saturation and lightness as percentages. Best for building palettes, because a tint or shade is one number away.

Building a palette in HSL

Hold hue and saturation, vary lightness, and you get a coherent scale of tints and shades. Rotate the hue instead and you get harmonies: 30° apart is analogous, 180° is complementary, 120° apart is a triad. This is why design systems store colours in HSL and generate the rest.

One caveat: HSL lightness is not perceived brightness. hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) despite both claiming 50%. If you need perceptually even steps, use OKLCH, now supported across modern browsers.

Contrast is a ratio, not a colour

WCAG measures the relative luminance of two colours and expresses the difference as a ratio from 1:1 to 21:1.

Luminance is weighted for human vision — green contributes about 71% of it, red 21% and blue 7% — which is why yellow text on white fails badly while the same lightness in blue may pass.

Colour spaces beyond sRGB

sRGB has covered the web for two decades, but modern displays exceed it. Display P3 offers roughly 25% more gamut, reachable in CSS with color(display-p3 …). For programmatic manipulation, OKLCH is the better tool: change lightness and the hue stays put, which plain HSL cannot promise.