OKLCH Converter
Six converters around one color space: move any web color into CSS oklch() notation, or move oklch() back out into HEX, RGB, or HSL. Pick your direction below.
Choose Your Conversion Direction
#3b82f6 from CSS, design tools, or color pickers
oklch(62.3% 0.188 259.8) when a tool only accepts HEX
rgb(59 130 246) from legacy CSS or JavaScript
for canvas, WebGL, or any API taking 0-255 channels
hsl(217 91% 60%) from older stylesheets
for systems that still read hue-saturation-lightness
The Same Colors in HEX, RGB, HSL and OKLCH
Build-Time GeneratedEvery row is one color written four ways. If you already know one notation, find your value in its column and read across to the oklch() equivalent — no single-purpose tool visit required.
| Color | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Pure White | #ffffff | rgb(255, 255, 255) | hsl(300, 50%, 100%) | oklch(100.0% 0.000 0.0) | |
| Pure Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | oklch(0.0% 0.000 0.0) | |
| Tailwind Blue 500 | #3b82f6 | rgb(59, 130, 246) | hsl(217.21, 91.22%, 59.8%) | oklch(62.3% 0.188 259.8) | |
| Tailwind Indigo 600 | #4f46e5 | rgb(79, 70, 229) | hsl(243.41, 75.38%, 58.63%) | oklch(51.1% 0.230 277.0) | |
| Emerald 500 | #10b981 | rgb(16, 185, 129) | hsl(160.13, 84.18%, 39.39%) | oklch(69.6% 0.149 162.5) | |
| Red 500 (Danger) | #ef4444 | rgb(239, 68, 68) | hsl(0, 84.21%, 60.19%) | oklch(63.7% 0.208 25.3) | |
| Amber 500 (Warning) | #f59e0b | rgb(245, 158, 11) | hsl(37.71, 92.15%, 50.15%) | oklch(76.9% 0.165 70.1) | |
| Cyan 500 (Info) | #06b6d4 | rgb(6, 182, 212) | hsl(188.75, 94.26%, 42.79%) | oklch(71.5% 0.126 215.2) |
How OKLCH Conversion Works
All six converters run the same core pipeline, just entered or exited at different points. Incoming colors are decoded into sRGB channel values, gamma-decoded to linear light, transformed through the Oklab cone-response matrices, and expressed as lightness (L), chroma (C), and hue (H) for oklch(). Conversions in the other direction reverse those exact steps. Because the transformations are deterministic math rather than a lookup table, converting a color to OKLCH and straight back returns the original value for any color inside the sRGB gamut.
Which Direction Do You Need?
- Writing new CSS or a Tailwind v4 theme? Convert into OKLCH. Once your values are
oklch(), you can shift L or C independently to build scales and hover states without disturbing hue. - Handing a color to a tool that only reads HEX? Convert out of OKLCH with the OKLCH to HEX converter. The result is the exact sRGB hex the color came from.
- Feeding canvas, WebGL, or a charting library? Use OKLCH to RGB — those APIs want 0-255 channel numbers, not a CSS string.
- Maintaining an older stylesheet built on HSL? Convert HSL to OKLCH to modernize values, or OKLCH to HSL when a legacy system has to keep parsing hue-saturation-lightness.
Gamut Notes Across All Six Converters
- Into OKLCH is always safe. HEX, RGB, and HSL inputs are sRGB colors by definition, so their OKLCH results never need gamut clipping.
- Out of OKLCH may clamp. OKLCH can describe colors wider than sRGB. When you convert an out-of-gamut
oklch()value to HEX, RGB, or HSL, chroma is reduced to the nearest in-gamut color — the hue and lightness are preserved. - Alpha travels with the color. Transparency converts across every direction and lands in the standard CSS slash syntax, e.g.
oklch(62.3% 0.188 259.8 / 0.5).
Frequently Asked Questions
What is an OKLCH converter?
An OKLCH converter translates a color between CSS oklch() notation and another notation such as HEX, RGB, or HSL. It is useful whenever one end of your pipeline speaks perceptual OKLCH and the other end still speaks channel-based or legacy color formats.
Is converting to OKLCH and back lossless?
Yes, for every sRGB color. The conversion pipeline is deterministic math with no rounding table behind it, so a HEX value round-trips to the identical 6-digit code. The one exception is converting an out-of-gamut oklch() value down to sRGB, where chroma must be clamped — by definition an approximation.
Do browsers support oklch() without conversion?
Yes. oklch() is a Baseline feature available in all major browsers since May 2023, so modern stylesheets can use it directly. Conversion is for the boundaries of your toolchain — exports, legacy systems, and APIs — not for the browser itself. See the MDN compatibility table for details.
Does Tailwind CSS v4 need OKLCH conversion?
Tailwind v4 ships its default palette as OKLCH values, so custom colors defined in @theme can be written directly as oklch() with no conversion step. Use a converter only when your source values are still HEX, RGB, or HSL.
What do the three OKLCH numbers mean?
Lightness (L) runs from 0% to 100% and behaves like perceptual brightness; Chroma (C) is saturation, starting at 0 for gray; Hue (H) is the angle in degrees around the color wheel. Keeping them in separate channels is what lets you adjust brightness without shifting the color.