HEX vs RGB vs HSL vs OKLCH: Which Should You Use?
They all describe the same colors — #E63946, rgb(230, 57, 70), and hsl(355, 78%, 56%) are one pixel wearing three outfits. The formats differ in what they make easy. Pick the wrong one and you'll fight your tools; pick the right one and half your color math disappears.
HEX — the universal ID card
#RRGGBB, two hexadecimal digits per channel. HEX is compact, unambiguous, and understood by literally everything built since 1996. It's the format you paste into Slack, store in a config, and read out of a brand guide.
Use it for: storing and sharing exact colors.
Terrible at: being edited by humans. Quick — make #7B4FA2 10% lighter. Exactly.
RGB — how screens actually think
rgb(230, 57, 70) is the hardware truth: how much red, green, and blue light to emit, 0–255. It matters when you're compositing, working with canvas pixel data, or adding transparency (rgba, though modern CSS lets every format take alpha).
Use it for: programmatic pixel work, transparency, anything talking to a graphics API.
Terrible at: intuition. Nobody looks at three numbers and feels "dusty rose."
HSL — the first one made for humans
hsl(355, 78%, 56%) reads as hue, saturation, lightness — a color wheel position plus two sliders. Want it lighter? Raise L. Want it muted? Lower S. This is why design systems built their 50–900 scales on HSL for a decade, and why our Shades & Tints Generator and Harmony Generator think in hue-and-lightness terms.
Use it for: quick manual adjustments and hue rotations.
The catch: HSL lies about lightness. hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) claim the same 50% lightness — but the yellow is blindingly bright and the blue is nearly black to your eye. Build a scale across hues with HSL and the steps come out visually uneven.
OKLCH — HSL that tells the truth
oklch(63.1% 0.211 22.2) is the modern answer: lightness, chroma, hue in the OKLab perceptual space, supported in every major browser since 2023. Its superpower is that L means what your eye sees. Two colors with the same OKLCH lightness genuinely look equally bright — across any hue. That makes it the right space for design tokens, theme ramps, and "shift the hue but keep the perceived weight" operations that HSL botches.
Use it for: new design systems, dark-mode ramps, palette scales that must feel even.
The catch: chroma limits vary by hue and lightness (that's physics, not a bug), and legacy tooling may not parse it yet.
CMYK — for ink, not screens
cmyk(0%, 75%, 70%, 10%) describes ink coverage for print. Screens can only approximate it, and the same CMYK values print differently on different stock. Treat on-screen CMYK as a starting estimate for your print vendor, never as a promise.
Stop converting by hand: the Color Code Converter gives you all five formats for any color with one-click copy — including OKLCH, computed with the real OKLab math.
Rules of thumb
- Store colors as HEX — maximum compatibility, zero ambiguity.
- Manipulate colors in OKLCH if your stack allows it, HSL if it doesn't.
- Composite in RGB — it's what the canvas and the GPU speak anyway.
- Hand off to print in CMYK, and ask the printer for a proof.
- Building a 50–900 scale? Generate it in a lightness-aware way (our Shades generator re-steps lightness at fixed hue) rather than multiplying HEX values and hoping.
One workflow, all formats
Pull a palette from a photo with the Palette Extractor, copy the HEX for your tokens, convert to OKLCH in the Converter when you need to tune lightness honestly, and verify the result still reads with the Contrast Checker. Formats aren't a religion — they're screwdriver heads. Match the head to the screw.
Try it yourself
Everything above is hands-on in the free tools — no signup, nothing uploaded: Color Code Converter · Image Color Picker. More reads in the guides section.