Understanding colour
Four ways to write the same colour.
Hex for habit, RGB for hardware, HSL for editing, OKLCH for the eye.
RGB and the hex shorthand.
A computer screen mixes red, green, and blue light to make every other colour. RGB writes that mixture as three numbers from 0 to 255 — one per channel. Hex is the same triple in base 16, two characters per channel, prefixed with a hash. So rgb(59, 130, 246) and #3b82f6 are the same blue. The browser sees them identically; the difference is how easily a human reads them.
#3b82f6 ≡ rgb(59, 130, 246)
HSL — the editor's view.
HSL describes the same colour in three more intuitive dimensions: hue (which colour, 0–360°), saturation (how vivid, 0–100%), and lightness (how bright, 0–100%). It's the format to reach for when you want to tweak a colour: drop the saturation by ten, push the hue ten degrees toward red, raise the lightness. RGB lets you describe a colour; HSL lets you edit it.
Hue, in degrees
- 0° red · 60° yellow · 120° green
- 180° cyan · 240° blue · 300° magenta
- 360° wraps back to red — the colour wheel
OKLCH — the perceptual view.
HSL has a problem: equal numeric steps don't mean equal perceived steps. Going from 50% to 60% lightness on a yellow looks like a different change than the same step on a blue. OKLCH was added to CSS in 2023 to fix this. It's also a three-number format — lightness, chroma, hue — but the colour space is designed so that equal numeric distances correspond to equal perceptual distances. For palette generation, accent shades, and colour-mixing on the web, OKLCH is the right tool.
Practical comparison
- #3b82f6 → rgb(59, 130, 246)
- → hsl(217, 91%, 60%)
- → oklch(0.628 0.219 251.0)
Why hex won't go away.
Hex is the lingua franca of design tools, brand guidelines, and the back of every paint can. It's compact, copyable, and works everywhere. RGB, HSL, and OKLCH each have things they're better at, but every modern colour input still accepts hex — and probably always will. Use hex for hand-off; the others for working.
Alpha and transparency.
Add a fourth value (or two extra hex digits) to specify how opaque the colour is. rgba(59, 130, 246, 0.5), hsla(217, 91%, 60%, 0.5), and #3b82f680 (the 80 being half of ff) are the same half-transparent blue. Modern CSS collapses this back to a single comma-less syntax — rgb(59 130 246 / 50%) — but the older forms keep working forever.
A note on contrast.
Two colours that look distinct on your monitor can read as one to a colour-blind reader, or to anyone in bright sunlight. The WCAG contrast ratio is the rule of thumb — at least 4.5:1 for body text, 3:1 for large display copy and UI elements. Reach for the contrast checker any time you're picking foreground and background; the eye is a worse judge than the number.
Read next