Hex to OKLCH Converter

What Is a Hex to OKLCH Converter?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Key Features

Hex to OKLCH Converter Alternatives

Hex to OKLCH Examples

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Common Hex → OKLCH Conversions (Tailwind v4)

Reference table of 10 popular Tailwind v4 default-palette mid-shades with their HEX and OKLCH equivalents. Values match Tailwind v4's published palette precision (three decimals on L and C, integer or one-decimal on H).

How to Use the Hex to OKLCH Converter

1. 1

   Paste a hex code into the HEX field

   Drop any hex value into the HEX input — with or without the leading `#`, in 3-digit shorthand (`#F73`), 6-digit full form (`#3b82f6`), 4-digit alpha shorthand (`#F738`), or 8-digit alpha full form (`#FF573380`). The parser normalizes all five input shapes into the same internal color before deriving OKLCH. Capitalization doesn't matter (`#3b82f6` and `#3B82F6` parse identically). Invalid characters or wrong digit counts produce a quiet inline error; valid hex updates every other format field in real time, including OKLCH.

2. 2

   Read the OKLCH triple from the OKLCH field

   The OKLCH field surfaces the value in CSS Color 4's modern form: `oklch(0.629 0.193 263.4)` for an opaque color, `oklch(0.629 0.193 263.4 / 0.5)` for an alpha-bearing one. L is rounded to three decimals (matches Tailwind v4's published precision), C to three decimals, H to one decimal degree. The tool's internal OKLCH source-of-truth means the underlying float precision is preserved across every other field — round-trips back to hex stay bit-stable, unlike legacy HSL-pivot converters that drift by a degree or two per round-trip.

3. 3

   Click Copy to grab the OKLCH string

   Each format card has a Copy button on the right. One click and the value lands on your clipboard — the button label briefly flashes "Copied!" so you know. The copied string is the canonical CSS Color 4 syntax (`oklch(0.629 0.193 263.4)`), ready to drop into a Tailwind v4 `@theme` block or a shadcn/ui CSS-variable definition. For platform-specific output (CSS custom property, Tailwind v4 token, SwiftUI, Compose, Flutter), use the Copy as code section below the picker — those snippets emit the format each platform expects natively.

4. 4

   Check the Display P3 / Rec.2020 gamut badges

   Three gamut badges (sRGB, Display P3, Rec.2020) show whether the current color falls inside each space's reproducible range. If the sRGB badge turns red but P3 is green, the color is a wide-gamut OKLCH that will render saturated on Apple hardware (iPhone, iPad, MacBook from 2017+) but desaturate on a legacy 24-bit monitor. The **Snap to sRGB** button uses binary chroma reduction (CSS Color 4 §13 informative algorithm) to shrink the color into sRGB while preserving L and H, producing a hex fallback you can ship via `@supports not (color: oklch(0 0 0))`.

5. 5

   Also visible: RGB, HSL, OKLAB, HSV, HWB, CMYK, named color

   The same hex you paste lights up the other eight format fields too — RGB for canvas calls and hardware, HSL for legacy CSS variables, OKLAB for palette math and color-blindness matrices, HSV and HWB for designer color-picker workflows, CMYK for print estimates, and the closest CSS named color for documentation prose. You're never locked into hex → OKLCH only. The picker (SL square + hue slider + alpha slider) drives all nine simultaneously, and on Chromium browsers the EyeDropper button samples any pixel on screen, including outside the browser.

Common Hex / OKLCH Mistakes

Set OKLCH C = 0.3 expecting "30% saturation":
oklch(0.7 0.3 250) → may exceed sRGB gamut for blues
Wide-gamut color renders desaturated on legacy displays.

Treat C as absolute chroma, check gamut badges:
oklch(0.7 0.15 250) → comfortably in sRGB for this L+H pair
Use the badges to find the max C that fits the target gamut.

Copy HSL L percentages into OKLCH directly:
hsl(220 50% 30%) ported as oklch(0.30 0.10 220)
The two colors look noticeably different in brightness.

Re-derive OKLCH from the original hex, don't port HSL:
hex source → OKLCH conversion → oklch(0.34 0.08 254)
The perceptual L stays correct; the palette feels even.

Ship oklch(0.7 0.4 30) without checking sRGB gamut:
P3 displays render saturated red; sRGB displays render desaturated
Brand color looks inconsistent across user hardware.

Check sRGB gamut badge, Snap to sRGB if needed, layer with @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3 hardware gets the wide-gamut value; sRGB hardware gets the snapped fallback.

Define brand color in OKLCH only:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 and old iOS Safari render no color at all.

Layer with @supports for graceful fallback:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Modern browsers get OKLCH; legacy browsers get the hex fallback.

Substitute lch() for oklch() expecting same result:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — different colors entirely
Copy-pasted across spaces, the value is silently wrong.

Pick one space and stay in it:
oklch(0.629 0.193 263.4) for modern design systems
or lch(60% 50 240) — but don't swap function names without re-converting

Who Uses Hex to OKLCH

Frontend Devs Migrating to Tailwind v4 OKLCH Tokens

Tailwind v4 standardized on OKLCH for its default palette in January 2025. Migrating a v3 codebase with hex-based brand colors means converting each hex to OKLCH and dropping the result into the new `@theme` block. Paste each hex here, copy the `oklch()` value, define `--color-primary: oklch(0.629 0.193 263.4)` and friends. The live gamut badges flag any colors that exceed sRGB so you can decide whether to keep the wide-gamut value for Display P3 users or snap to sRGB.

shadcn/ui Theme Authors Building Custom Palettes

shadcn/ui's CSS-variable theme uses OKLCH for every token (`--background`, `--foreground`, `--primary`, etc.). Custom themes derive from a base brand hex by converting to OKLCH and then sweeping L for the light/dark variants. Paste the brand hex, read the OKLCH triple, build out the rest of the theme by stepping L while holding C and H fixed. Matches the canonical shadcn workflow exactly.

Design-System Authors Generating Perceptually-Even Ramps

Generate a 50/100/200/.../900 ramp by stepping the L channel in equal OKLCH increments while holding C and H fixed. The visual gap between adjacent stops looks identical across every hue — what a brand-color palette actually needs. Tailwind v4 uses exactly this construction for its default palette, and shadcn/ui mirrors it. Paste each brand hex, read the OKLCH, generate the ramp algorithmically or via the Tints/Shades/Tones panel below the picker.

Accessibility Engineers Verifying Contrast in OKLCH Space

WCAG 2.1 and APCA contrast both report against the resolved sRGB color, not the OKLCH triple — but knowing the OKLCH L of a brand color makes contrast tuning predictable: bump L by 0.1 to clear AA against white, drop L by 0.1 to clear AA against black. The simultaneous OKLCH + WCAG + APCA view makes the relationship visible. Paste the brand hex, watch the contrast badges, adjust L in OKLCH (more predictable than HSL) until the pair passes both metrics.

Web Devs Building Wide-Gamut Color Tokens for Modern Displays

Most Apple devices since 2017 (and many modern Android devices) render Display P3 natively. Defining brand accent colors in OKLCH lets you address P3-only saturated reds and greens that no hex code can encode. Paste an existing hex to read its OKLCH, then push the C channel above the sRGB ceiling to claim the extra P3 saturation. The gamut badges confirm the new value fits P3 (and falls back gracefully on sRGB-only screens via browser chroma compression).

Educators Teaching Perceptual-vs-Geometric Lightness

The simultaneous OKLCH + HSL view makes the difference between perceptual and geometric lightness obvious. Paste a saturated green and a saturated blue at the same HSL L=50%; the OKLCH L values differ noticeably because OKLCH measures actual perceived brightness. Drag the HSL hue slider and watch OKLCH L wobble while you hold HSL L constant — the curve is the gamma quirk visualized. A classroom-ready demonstration of why design systems migrated to OKLCH.

Open-Source Maintainers Modernizing Token Documentation

Older design-system docs typically list brand colors as hex codes only. Modernizing to OKLCH means showing the same color in both spaces — the hex for code-block compatibility, the OKLCH for the spec table and the modern token definition. Paste each hex, copy the OKLCH output, update the docs. The shareable URL hash also lets contributors link to the exact color under discussion in a GitHub issue without ambiguity.

Hex to OKLCH Math & Pipeline

HEX → OKLCH Is a 7-Step Pipeline

The conversion routes through five intermediate representations: hex → integer sRGB → normalized sRGB (0-1) → linear-sRGB (gamma-decoded) → CIE XYZ D65 → OKLAB → OKLCH. Each step is a well-defined matrix or piecewise function from a primary source. The tool runs the full pipeline on every keystroke; the math is fast enough (microseconds) that no debouncing is needed. Surfacing the intermediate RGB tuple alongside OKLCH means you can debug an unexpected OKLCH value by inspecting the RGB channels.

CSS Color 4 §11.2 Gamma Function

The sRGB → linear-sRGB conversion uses the CSS Color 4 §11.2 piecewise function: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. The piecewise form (with a small linear segment near zero) avoids the numerical instability of the pure-exponent form at very dark colors. This is the same function ICC profiles use to encode sRGB and the same function browsers use internally when rendering hex codes. The inverse for OKLCH → hex applies the same function in reverse: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

CSS Color 4 §15.1 Matrix: linear-sRGB ↔ XYZ D65

The matrix from CSS Color 4 §15.1 converts linear-sRGB to CIE XYZ under the D65 white point: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. The Y row gives the sRGB luminance formula. The matrix is the same one used in every color-management library, including ICC, Adobe Color Engine, and the LCMS open-source pipeline. Inverse matrix for OKLCH → hex applies the §15.1 inverse.

Ottosson 2020 OKLAB Matrices and Cube-Root Step

The XYZ D65 → OKLAB conversion uses two matrices and a cube-root step published in Björn Ottosson's 2020 OKLAB paper. First matrix transforms XYZ to an LMS cone-response space (loosely modeled on human L/M/S cone sensitivities). Cube-root each channel to compress the dynamic range non-linearly (the perceptual-uniformity-correcting step). Second matrix transforms cube-rooted LMS to OKLAB's L/a/b coordinates. All three operations use the exact values published in the paper's reference implementation; no re-derivations or rounding. The inverse for OKLCH → hex applies these matrices in reverse.

OKLAB ↔ OKLCH Is Cartesian-to-Polar

OKLAB's `a` and `b` axes form a chroma plane perpendicular to the L axis. OKLCH polar-encodes that plane: `C = sqrt(a² + b²)` (Euclidean distance from gray), `H = atan2(b, a) * 180 / π` (angle in degrees, wrapped to 0-360°). The inverse: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. The polar form is preferred over OKLAB for design-token storage because Hue is a stable axis — rotating Hue doesn't accidentally cross-fade through gray the way rotating `a` or `b` can in OKLAB.

Gamut Detection via Channel-Range Check

A color is considered in-gamut for a target space (sRGB, Display P3, Rec.2020) if every channel falls inside `[-ε, 1 + ε]` after conversion to that space's primaries, where `ε = 1e-7` to absorb float-precision noise around boundaries. The gamut badge for each space turns red when any channel exceeds the range. OKLCH is gamut-unbounded — `oklch(0.7 0.4 30)` is a valid coordinate but may exceed sRGB's 256-per-channel byte space. The check runs on every keystroke; combined with Snap to sRGB, this catches the most common adoption pitfall (wide-gamut OKLCH not displaying correctly on legacy screens).

Snap-to-sRGB Binary Chroma Reduction

Snap to sRGB matches the informative gamut-mapping algorithm in CSS Color 4 §13: hold L and H fixed at the current values, binary-search C ∈ [0, currentC] for the largest C whose sRGB conversion stays in-gamut. The search runs at most 30 iterations (precision ~10⁻⁹), which is more than enough for visual accuracy. Preserving L and H means the snapped color reads as the same hue family at the same brightness — it just loses saturation. We don't clip RGB channels directly because that distorts hue noticeably (especially in blues, which clip toward purple).

Best Practices for Hex / OKLCH Workflows

Use OKLCH as the Canonical Token Format in New Code

For any design system shipping in 2025 or later, define brand colors and palette ramps in OKLCH. The L axis gives perceptually-even ramps automatically; the Chroma axis can address wide-gamut colors that hex can't encode. Keep a hex fallback for older browsers via `@supports not (color: oklch(0 0 0))` or build-time PostCSS, but make OKLCH the source-of-truth in your token store. Tailwind v4 and shadcn/ui both ship this way; new projects can follow their lead with no friction.

Generate Ramps by Stepping L, Holding C and H Constant

The canonical OKLCH ramp construction: lock C and H, sweep L in equal increments. A 9-step ramp `oklch(L 0.15 263)` for L = 0.1, 0.2, …, 0.9 produces visually-even spacing across every step. This is exactly what Tailwind v4 does internally. Don't sweep C alongside L unless you want the ramp's chromatic intensity to vary deliberately (rare). Don't drift H across steps — even a 5° drift makes the ramp feel jumbled.

Match Tailwind v4's Precision: 3 Decimals L+C, 1 Decimal H

Tailwind v4's default palette publishes OKLCH values with three decimal places on L and C, and one decimal place on H — `oklch(0.629 0.193 263.4)` for blue-500. Matching this precision in your own tokens means paste-into-config workflows produce identical values to those Tailwind ships, and diff tools won't flag spurious differences. The tool's default rounding follows this convention; copy-paste into a `@theme` block is bit-exact.

Run Wide-Gamut OKLCH Through the Display P3 Gamut Check

If you're targeting modern Apple hardware (iPhone, iPad, MacBook from 2017+) or shipping HDR-aware content, the gamut badges let you push C above the sRGB ceiling to claim the extra P3 saturation. Browser-applied chroma compression keeps the color from clipping on sRGB-only screens. Don't pre-snap to sRGB by default unless you know your entire audience is on legacy displays — that loses 30%+ of the saturation P3 hardware can render.

Provide a Hex Fallback via @supports for Pre-2023 Browsers

Although evergreen browser support for `oklch()` is now 94%+, the long tail (IE 11, old Android Chrome, embedded webviews) still needs a fallback. Wrap tokens in `@supports (color: oklch(0 0 0))` and provide a hex variant in the alternate branch. The Snap to sRGB output is exactly that fallback — generated automatically from the current OKLCH triple with L and H preserved. Build-time PostCSS plugins like `postcss-oklab-function` can also inline the sRGB approximation at compile time.

Document Both the OKLCH and the Source Hex in Your Tokens

When you ship a CSS variable like `--color-primary: oklch(0.629 0.193 263.4)`, include a comment with the source hex: `/* source: #3b82f6 (Tailwind blue-500) */`. Six months later, when someone needs to derive a related shade or check the value against a brand-guidelines PDF, the source hex preserves the full provenance trail. OKLCH alone is meaningful but harder to recognize on sight; the source hex is the identifier most teammates will look for first.

Use the URL Hash to Share Live Color Decisions

Every color change updates the URL hash as `#hex=3b82f6` or `#oklch=...` automatically. Copy the URL into a Slack thread or GitHub issue and anyone who opens it lands on the same color with the same OKLCH triple. This is more reliable than pasting an OKLCH string in chat — recipients sometimes typo the decimals or wrap the wrong precision — and lets a design-review thread reference an exact color rather than "the brand blue we discussed Tuesday." The hash is never transmitted to the server.

Frequently Asked Questions