OKLCH Converter

Convert hex, rgb(), hsl(), and oklch() instantly — paste any format, get them all back.

A free online color converter: paste a hex, rgb(), hsl(), or oklch() value and get all four formats back instantly, with gamut-safe clamping if your OKLCH color falls outside what sRGB can display. Runs entirely in your browser — no signup, nothing uploaded.

Examples:

This OKLCH color is outside the sRGB gamut — the hex, RGB, and HSL values below are clamped to the closest color your screen can actually display.

Accepted input formats

#3b82f6
Hex (3, 6, or 8 digits)
rgb(59 130 246)
RGB
hsl(217 91% 60%)
HSL
oklch(62% 0.19 260)
OKLCH (L C H)

What is OKLCH?

OKLCH is a perceptually-uniform color space built on the Oklab model, expressed as three values: Lightness (0–100%), Chroma (color intensity, roughly 0–0.4 for most sRGB colors), and Hue (0–360°). "Perceptually uniform" means equal steps in any of these values produce equal-looking steps in the actual color — unlike HSL, where the same lightness number can look dramatically brighter or darker depending on the hue. It's part of the CSS Color 4 spec and supported 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.

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)

Working with color elsewhere on the site? See the Tailwind Colors reference for the full palette in every format, the CSS Gradient Generator for multi-stop gradients, or the Shadcn Theme Generator to build a full accessible OKLCH theme from one seed color.

Frequently asked questions

Yes. Converting between hex, rgb(), hsl(), and oklch() is completely free with no signup. The conversion runs entirely in your browser — your colors are never uploaded anywhere.
Paste any hex color (like #3b82f6) into the input above. The tool auto-detects the format and instantly shows the equivalent rgb(), hsl(), and oklch() values, each with its own copy button.
OKLCH is a perceptually-uniform color space — equal changes in its lightness (L), chroma (C), and hue (H) values produce visually equal changes in the color, unlike HSL where the same lightness value can look very different across hues. It's part of the CSS Color 4 spec, supported in all modern browsers, and can express colors outside the traditional sRGB gamut on wide-gamut (P3) displays.
OKLCH can represent a wider range of colors than hex, rgb(), or hsl() can display — those formats are limited to the sRGB gamut. If you type or generate an OKLCH value with very high chroma, it may fall outside what sRGB can show. This tool detects that and clamps the chroma down to the closest displayable sRGB color for the hex/rgb/hsl outputs, while still showing your original OKLCH value as typed.
Yes. Input colors with an alpha channel — 8-digit hex, rgba(), hsla(), or oklch(... / a%) — are parsed correctly and the alpha value carries through to every output format.
Both describe a color as lightness, a color intensity value, and a hue, but HSL's lightness is not perceptually accurate — a 50% lightness blue and a 50% lightness yellow can look very different in actual brightness. OKLCH's lightness is calibrated to human perception, so palettes built in OKLCH look more visually consistent, which is why it's increasingly used for design-system color scales.
Yes — paste an oklch(...) value into the input and the hex, rgb(), and hsl() fields update immediately. If the OKLCH value is outside the sRGB gamut, the hex/rgb/hsl outputs show the nearest displayable color and a badge indicates clamping occurred.
No. All parsing and conversion happens locally in your browser using JavaScript — nothing is sent to a server, logged, or stored.
DesignRevision