OKLCH Color Converter

OKLCH Color Converter

OKLCH is the most editable color format in modern CSS.¹

In OKLCH, adjusting the L channel makes a color lighter or darker without shifting its hue. Rotating H changes the hue family without changing perceived brightness. Reducing C moves any color toward grey without touching its lightness. These properties are impossible to achieve directly in HEX or RGB, where every adjustment changes multiple perceptual attributes simultaneously. Converting between OKLCH and legacy formats is the bridge between the perceptual control of modern CSS and the compatibility constraints of older tools.

Understanding OKLCH coordinates

OKLCH stands for the OKLab polar representation developed by Björn Ottosson in 2020 as a perceptually uniform alternative to HSL and CIELAB.¹ L is perceptual lightness from 0 (black) to 1 (white). C is chroma, the distance from achromatic grey, starting at 0 with no fixed maximum though most sRGB colors fall below 0.4. H is the hue angle in degrees on a 0 to 360 circle. These three dimensions are independent in perception, so changing L does not shift the perceived hue or colorfulness and the format becomes uniquely useful for generating accessible color scales where each shade step looks equidistant from the adjacent ones.

Converting OKLCH to and from other formats

Converting OKLCH to HEX or RGB routes through OKLab, XYZ-D65, and linear sRGB before gamma correction and integer rounding.² The reverse path, from HEX or RGB to OKLCH, follows the same pipeline inverted: linearize the sRGB channels, transform to XYZ, transform to OKLab, and extract polar coordinates. The conversion is mathematically exact for sRGB-gamut colors with rounding error only at the final integer step. Colors outside sRGB (high-chroma P3 or Rec2020 values) cannot be fully represented in HEX and require gamut mapping before conversion. Each stage of the pipeline is a well-defined color science transformation, which means any implementer can reproduce the exact same results from a published specification rather than from a closed-source library.

Browser support and practical use

oklch() is a first-class CSS color function in Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+.³ CSS custom properties that use oklch() work without any build step or polyfill, so design tokens defined as oklch() drop directly into production stylesheets targeting modern browsers. Furthermore, oklch() integrates with CSS relative color syntax where expressions like color(from oklch(0.612 0.212 261.5) oklch calc(l + 0.1) c h) produce a lighter variant in pure CSS without any JavaScript. Tokens stored in this format are forward-compatible with future CSS color features, whereas tokens stored in HEX require conversion before use in color-mix() or relative color expressions.

Building a color scale by rotating hue in OKLCH

OKLCH hue rotation produces harmonious multi-color palettes because the perceptual lightness stays constant as you move around the hue wheel, and you can derive a lighter shade from an OKLCH base by stepping L while H stays fixed.⁴ Starting from oklch(0.65 0.20 260) as your primary blue, a complementary accent at oklch(0.65 0.20 80) gives you a yellow-green at the same perceived brightness. A triadic palette adds oklch(0.65 0.20 140) and oklch(0.65 0.20 380, which wraps to 20). Each of these colors looks equally vivid and equally bright, which is impossible to achieve by rotating hue in HSL.

Adjusting chroma for visual hierarchy

Not every color in a palette needs the same chroma. Reserve high chroma (C above 0.15) for interactive elements and primary actions that need to draw attention. Use lower chroma (C between 0.05 and 0.10) for secondary text, borders, and background tints. Keeping L constant while varying C creates a natural visual hierarchy: high-chroma elements stand out against low-chroma surroundings without any change in perceived brightness. This approach works especially well for data visualization, where you need distinguishable categories that do not imply a brightness ordering.

The same principle applies to disabled states, where dropping C toward zero while holding L reproduces the muted look browsers apply to inactive controls. Because the lightness stays put, the disabled element reads as the same color merely dimmed, rather than as a different hue altogether. Keeping the change in the chroma channel is what makes the hierarchy feel intentional instead of accidental, and it keeps the relationship to the active color explicit at a glance.

OKLCH and CSS color-mix() for dynamic tints and shades

CSS color-mix() blends two colors in a specified color space, and OKLCH produces the most perceptually uniform results. The expression color-mix(in oklch, oklch(0.612 0.212 261.5) 70%, white) creates a 70/30 blend of your blue and white in perceptual space, producing a lighter tint that preserves the original hue without the pinkish shift you get from blending in sRGB. Similarly, color-mix(in oklch, oklch(0.612 0.212 261.5) 80%, black) produces a darker shade that stays in the same hue family.

Why blending in OKLCH beats blending in sRGB

Blending a saturated blue with white in sRGB shifts the result toward pink because the gamma curve distorts the midpoint between the two colors. OKLCH avoids this by performing the blend in a linear perceptual space where the midpoint between blue and white is a desaturated blue, not a purple-pink.⁵ For any workflow that generates tints and shades programmatically (design token pipelines, theme generators, component libraries), specifying in oklch as the color-mix() color space produces output that matches human expectations.

OKLCH for accessible color system design

Accessibility starts with lightness discipline. In OKLCH, the L channel directly controls perceived brightness, which means you can guarantee WCAG contrast ratios by controlling the L difference between foreground and background colors. A text color at L=0.25 on a background at L=0.95 produces a contrast ratio above 10:1, well exceeding AAA.⁶ The same L difference in HSL does not guarantee the same perceived contrast because HSL lightness is not perceptually uniform.

Defining minimum L-difference tokens

Define your design tokens with explicit L-difference rules: interactive text must sit at least 0.4 L units away from its background, and large text must sit at least 0.25 L units away. These rules are easy to verify in OKLCH because the L channel is a single number. In HSL or RGB, the same check requires computing relative luminance from all three channels. Building your color system in OKLCH from the start makes accessibility a structural property of the token set rather than an afterthought checked by an external tool.

When to use this

Use this when working with CSS Color Level 4 oklch() values and you need to convert to or from HEX, RGB, or HSL, particularly when you are building a design token system that targets perceptual uniformity across every shade in the palette.

Examples

#c8ff00

oklch(0.960 0.241 128.2)

oklch(0.612 0.212 261.5)

#3b82f6