OKLCH color converter.

Type a color as HEX, rgb(), hsl() or oklch() and get it in all four formats, ready to copy. If an OKLCH color is outside what sRGB screens can show, the page says so. It runs in your browser, so nothing you type is uploaded.

Any CSS color

Inside the sRGB gamut.

HEX: #3A81F6
RGB: rgb(58 129 246)
HSL: hsl(217 91% 60%)
OKLCH: oklch(0.62 0.19 260)

Runs in your browser. Nothing you add here is uploaded or stored.

How to convert a color to OKLCH

Type a color in any of these forms: HEX (#3B82F6, #38f, or without the #), rgb(59 130 246) or rgb(59, 130, 246), hsl(217 91% 60%), or oklch(0.62 0.19 260). Commas are optional, and percentages work where CSS allows them. You can also use the color picker beside the field, which fills it with the color as an oklch() value. The page starts with oklch(0.62 0.19 260).
Read the four formats: HEX, RGB, HSL and OKLCH, with a swatch of the color beside them. If the field can’t be read, it turns red and the page says which forms it takes.
Check the gamut message under the field. It either says the color is inside the sRGB gamut or warns that it’s outside (more on that below).
Copy the format you need with its Copy button.

The formats are written the way current CSS and the frameworks write them: rgb(59 130 246) with spaces, hsl(217 91% 60%) in whole numbers, and oklch(0.623 0.188 259.815) with three decimals, as shadcn/ui and Tailwind v4 write theirs. A gray has no chroma or hue, so it comes out as oklch(0.6 0 0).

It reads only HEX, rgb(), hsl() and oklch(). CSS color names such as red and other functions such as color(display-p3 …) aren’t supported, and a transparency value, as in rgb(59 130 246 / 50%), is ignored.

Colors outside sRGB

OKLCH can describe colors that sRGB, the color space behind HEX, rgb() and hsl(), can’t show. Try oklch(0.7 0.4 150), a very vivid green: the page warns that it’s outside the sRGB gamut, and the other formats show the nearest color sRGB can display, here #00BE58. That color is found by keeping the lightness and hue and lowering the chroma until it fits. The OKLCH row and the swatch still use the OKLCH value you typed, so a wide-gamut screen may show more of it than the HEX does.

A color you type as HEX, rgb() or hsl() is always inside sRGB, so it never triggers the warning.

Use it with Codex

Codex copies the color format it sees. In a Tailwind v4 or shadcn/ui project that’s OKLCH, so give it the oklch() value from this page rather than a HEX code, and ask it to stay in that format. A bonus of OKLCH is that Codex can change one thing at a time: lowering only the lightness makes a darker shade of the same color.

Keep colors in OKLCH

Our brand color is [oklch(0.62 0.19 260)]. In globals.css, set --primary to it. For the hover and active states, make darker versions by lowering only the lightness, by 0.05 and 0.1, and keep the chroma and hue. Write every color in oklch() like the rest of the file, and don't add HEX or hsl() values.

Frequently asked questions

Is it free?

Yes. It’s free, with no sign-up and no limit on how many colors you convert.

Is what I type uploaded?

No. The conversion happens in your browser, and nothing you type is sent or stored. The site only counts that the tool was used, never the colors.

How does it convert?

It converts through linear sRGB with the OKLab formulas published by Björn Ottosson, then turns OKLab into OKLCH, with chroma and hue. HEX, rgb() and hsl() are shown as whole numbers, and OKLCH to three decimals, so converting a color to HEX and back can change the last decimals of its OKLCH value.

Why do shadcn/ui and Tailwind v4 use OKLCH?

Tailwind v4’s default palette is written in OKLCH, and shadcn/ui moved its theme variables from HSL to OKLCH when it moved to Tailwind v4. There are three reasons. Lightness in OKLCH is close to how light a color looks, so two colors with the same lightness look equally light, which isn’t true of HSL: a yellow and a blue at 50% HSL lightness look very different. The hue also looks steadier as you change lightness or chroma, so a row of shades from light to dark still reads as one color. And OKLCH can describe colors beyond sRGB, for screens that can show them, which HEX, rgb() and hsl() can’t.