OKLCH Converter

What is OKLCH?

OKLCH is a perceptually-uniform color space expressed as three values: Lightness (0–100%), Chroma (color intensity, roughly 0–0.4 in sRGB), and Hue (0–360°). Perceptually uniform means equal steps in a value produce equal-looking steps in the color — unlike HSL, where the same lightness number looks brighter on yellow than on blue. It is part of the CSS Color 4 spec and works in every modern browser.

Because OKLCH isn't limited to the older sRGB gamut, it can also describe colors visible on wide-gamut (P3) displays that hex, rgb(), and hsl() simply cannot represent.

How to convert hex to OKLCH (and back)

Paste your color into the input above in any of the four supported formats — the tool auto-detects which one it is. All three other formats update instantly, each with its own copy button. To go the other direction, paste an oklch() value and the hex, RGB, and HSL fields recompute immediately.

Why OKLCH instead of HSL or RGB?

RGB describes a color as its red/green/blue light components — accurate for displays, but not intuitive for humans to reason about ("what's 20% lighter than this blue?"). HSL tries to fix that with hue/saturation/lightness, but its lightness axis isn't perceptually accurate: a 50%-lightness yellow looks much brighter than a 50%-lightness blue. OKLCH fixes this — lightness means the same thing across every hue, which is why design systems increasingly use it to build color scales that actually look evenly spaced.

Understanding gamut clamping

Because OKLCH can express more colors than sRGB can display, a very high-chroma OKLCH value might have no exact hex/RGB/HSL equivalent — the closest a normal screen can show is a slightly less saturated version. This tool detects that automatically (via culori's gamut check) and clamps the chroma down to the nearest displayable color for the hex/RGB/HSL outputs, while still showing your typed OKLCH value exactly as entered.

"Clamping" here means one specific thing: only the chroma is reduced, in small steps, until the color fits inside sRGB. Lightness and hue are left as you typed them. So the hex you copy is the most saturated version of your color that an ordinary screen can actually render — close, but deliberately not an exact match. When that happens an amber notice appears above the outputs, so you always know the hex/RGB/HSL values are an approximation rather than a lossless conversion. Converting in the other direction (hex, rgb(), or hsl() into OKLCH) is always exact, because every sRGB color has an OKLCH equivalent.

Using OKLCH in CSS

Any modern browser accepts oklch() directly as a CSS color value — no build step or preprocessing needed:

.button {
  background-color: oklch(62% 0.19 260);
  color: oklch(98% 0.01 260);
}

To convert colors programmatically instead of by hand, the culori npm package (what powers this tool) makes it a one-liner:

import { converter, formatCss } from 'culori';

const toOklch = converter('oklch');
const oklchColor = toOklch('#3b82f6');
console.log(formatCss(oklchColor)); // oklch(62.3% 0.192 259.8)

Related tools

• Tailwind Colors — every Tailwind shade in hex, RGB, HSL and OKLCH
• Color Contrast Checker — test a converted color against WCAG AA/AAA
• Color Shades Generator — build a light-to-dark scale from one color
• Shadcn Theme Generator — generate a full OKLCH theme from a seed color
• CSS Gradient Generator — combine converted colors into a multi-stop gradient