HEX, RGB, HSL, OKLCH — which color format to use and how to convert

#3b82f6, rgb(59 130 246), hsl(217 91% 60%), and oklch(0.62 0.19 259) are all the exact same blue. Four ways of writing one colour. They're not interchangeable in usefulness, though — each makes some tasks easy and others awkward, and knowing which to reach for saves a lot of fiddling.

HEX — compact, universal, hard to reason about

#3b82f6 is the format you'll paste most often. It's everywhere, it's short, and design tools spit it out by default. The downside: it's basically unreadable to a human. Those six characters are three pairs of hex (red, green, blue), and "make this 10% lighter" means doing hexadecimal arithmetic in your head. Great for copying a colour, useless for adjusting one.

RGB — the same idea, in decimal

rgb(59 130 246) is HEX's friendlier twin: the same red/green/blue channels, written as numbers from 0–255 you can actually read. Easier to tweak by hand, and the rgb(... / 0.5) form adds transparency. Still, "lighter" or "more muted" doesn't map cleanly onto three colour channels.

HSL — built for adjusting colours

hsl(217 91% 60%) is the one to think in. It's Hue (which colour, 0–360° around the wheel), Saturation (how vivid), and Lightness (how bright). Now the edits you actually want become single, obvious moves:

• Drop the lightness to darken.
• Drop the saturation to mute.
• Spin the hue to shift the colour entirely.

Building a palette or a hover state? HSL is where it's pleasant.

OKLCH — the one that's actually correct

oklch(0.62 0.19 259) is the newcomer and worth learning. HSL has a hidden flaw: equal lightness numbers don't look equally bright — yellow at 50% lightness blinds you while blue at 50% looks dim. OKLCH is built on how human eyes actually perceive brightness, so "lightness 0.6" looks the same across every hue.

That makes it the right tool for accessible, consistent palettes: when you lighten a colour, it lightens by the amount your eye expects, not by some channel math that varies per hue. Every current browser supports it, so there's no reason not to use it in new CSS.

Quick guide: HEX to copy a colour. HSL to hand-tune one. OKLCH to build a consistent, accessible palette. RGB when a tool or API specifically wants channels.

Converting between them

You'll constantly need to move between these — a design tool gives you HEX, your CSS wants OKLCH, a teammate sent an RGB value. Primova's Color Converter shows a colour in all four formats at once with a live picker, so you can grab whichever your code needs and copy it CSS-ready. Nudge the picker and watch every format update together, which is also a fast way to build intuition for how they relate.

It runs entirely in the browser — pick a colour, get every format, copy, done: Color Converter.