/01 Converting a colour between notations
Enter a colour in any supported notation — hex, RGB, HSL, OKLCH, LAB, LCH or OKLAB — and read it back in all the others. Handy when a brand guide gives you one format, your design tool wants another, and your CSS uses a third.
Modern CSS accepts the perceptual spaces directly, so oklch() and lab() values can go straight into a stylesheet in current browsers.
/02 Why the perceptual spaces are worth knowing
HSL is convenient but lies about lightness: hsl(60 100% 50%) yellow and hsl(240 100% 50%) blue claim identical lightness while looking nothing alike. OKLCH and LAB are built so that equal numeric steps look like equal visual steps.
That makes them far better for generating tints and shades, building accessible palettes, and interpolating gradients without the muddy grey band you get halfway through an RGB blend.
/03 How hex to RGB conversion works
A hex colour code is just RGB written in base 16. The six digits split into three pairs for red, green and blue, and each pair runs from 00 to FF, which is 0 to 255 in decimal. Take #3B58E2: 3B is 3 × 16 + 11 = 59, 58 is 5 × 16 + 8 = 88, and E2 is 14 × 16 + 2 = 226, so the colour is rgb(59, 88, 226).
Two variations catch people out. Three-digit shorthand doubles each digit, so #F60 means #FF6600. Eight-digit hex adds a fourth pair for opacity: FF is solid, 80 is roughly 50 percent and 00 is invisible, so #3B58E280 is the same blue at half opacity. In modern CSS you can write that as rgb(59 88 226 / 50%).
Paste any of these forms in and the converter shows the colour in hex, RGB, HSL, OKLCH, LAB, LCH and OKLAB together, ready to copy.