OKLCH Color Converter

How to use

1. 1Paste any color value into the Color value input. HEX (with or without #), rgb()/rgba(), hsl()/hsla(), hwb(), oklch(), oklab(), and named CSS colors are all auto-detected.
2. 2Read the Preview swatch and the L, C, H readout to see the perceptual coordinates, plus the nearest CSS named color when one is close.
3. 3Drag the Lightness, Chroma, or Hue sliders to nudge the color in OKLCH space. The preview, every output row, and the CSS variable update in real time. Use Reset adjustments to return to the parsed value.
4. 4Browse the All formats panel and click Copy on any row to grab that exact representation, or click Copy all to copy a multi-line block of every format at once.
5. 5Use the CSS custom property panel to drop the color straight into a :root rule, or copy the Tailwind arbitrary-value class for use as bg-[oklch(...)] / text-[oklch(...)] / border-[oklch(...)].

About this tool

OKLCH Color Converter takes any CSS color you paste and gives you the equivalent OKLCH and OKLab values plus every classic format (HEX, rgb(), hsl(), hwb()) at the same time, with a live swatch and adjustable Lightness, Chroma, and Hue sliders that update the entire output in real time. OKLCH (Lightness, Chroma, Hue) is the perceptually uniform polar form of OKLab introduced in CSS Color Module Level 4 and adopted by Tailwind v4 as the default color space, because the same numeric step in lightness or chroma feels like the same visual step regardless of the hue (unlike HSL, where blues at 50% lightness look much darker than yellows at the same value). The parser auto-detects the input format: 3, 4, 6, or 8 digit HEX with or without a leading hash, modern Color 4 rgb()/hsl()/hwb() with space-separated values and / for alpha, the legacy comma-separated rgba()/hsla() forms, hwb(), oklch(), oklab(), and named CSS colors like tomato or rebeccapurple. Conversion math follows the published Color Module Level 4 reference matrices for linear sRGB to OKLab plus the standard sRGB transfer function, so values round-trip cleanly to within rounding error and match what the browser renders natively. When an OKLCH input falls outside the sRGB gamut (which is common for vivid greens and deep blues at high chroma) the tool clearly marks the preview as a clamped sRGB approximation while keeping the original OKLCH coordinates in the output, so you can copy the wide-gamut spec value into a stylesheet and let CSS handle the gamut mapping at render time. Output rows include OKLCH with unitless lightness, OKLCH with percentage lightness, OKLab in Cartesian form, the closest sRGB HEX (with optional 8-digit alpha when the input has transparency), modern Color 4 rgb(), legacy comma-separated rgba(), hsl() with degree-based hue, and hwb(). A precision control sets the number of decimals from 1 to 6 (3 is the design-token default), the nearest CSS named color is shown when one is close, and a side panel emits a ready-made CSS custom-property declaration plus a Tailwind arbitrary-value class so you can drop the color straight into a stylesheet, a design tokens file, or a JSX className. Useful for converting brand colors into modern CSS Color 4 syntax for design systems, building Tailwind v4 themes, generating perceptually uniform light-and-dark palettes from an OKLCH base, comparing how the same color reads across spaces, prepping wide-gamut tokens for displays that support P3, and exploring the OKLCH cube without leaving the browser. Everything runs locally on your device. Pasted brand colors, design tokens, and unreleased palettes never leave your tab.

Free to use. Works in your browser. No signup, no login.