Color converter

Paste a color in any notation and read it back in all of them, including OKLCH, Lab and Display P3, each one a click from your clipboard.

HEX
RGB
HSL
OKLCH
LAB
LCH
Display P3

Questions

Which notations can I paste in?+

Hex with three, six or eight digits, and rgb(), hsl(), oklch() or lab() with or without commas. Whatever goes in, every other notation comes out beside it.

Why does Lab use a different white point?+

Because CSS defines lab() and lch() against D50, the white point print work uses, while sRGB and P3 are D65. The conversion here does the Bradford adaptation between them, which is why the numbers match what a browser reports.

What is the Display P3 row for?+

It is the same color expressed in the wider gamut most current screens can show. Values inside 0 to 1 are reachable there; a component outside that range means the color cannot be displayed in P3 either.

Related tools

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version