Is CSS oklch supported in modern browsers?

Yes. CSS Color Module Level 4 `oklch()` is supported by 100% of modern web browsers including Safari 15.4+, Chrome 111+, Firefox 113+, and Edge 111+.

Updated: August 2026 • Verified v1.2

Perceptually Uniform Oklab & Oklch Color Palette Generator

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

Oklch Polar Color Space: oklch(L C H) ➔ Perceptually Uniform Harmonies (H +- 30 deg, H +- 180 deg)

Was this calculation helpful?

Understanding Your Results

Controls perceptual Lightness ($L$), Chroma ($C$), and Hue ($H$) independently, generating complementary, analogous, triadic, and monochromatic harmonies and production CSS custom properties.

Practical Guidance & Next Steps

Unlike HSL, altering the hue angle in Oklch maintains constant perceived human brightness, ensuring accessible contrast ratios remain intact across theme switches.

What is this?

A design system color utility that creates perceptually uniform color palettes using the modern CSS Color 4 Oklch standard.

How does it work?

1. Pick a harmony mode (Complementary, Analogous, Triadic, Monochromatic). 2. Adjust Lightness, Chroma, and Hue sliders. 3. Copy the production CSS custom properties in 1 click.

Why use it?

Eliminates unpredictable contrast shifts found in legacy HSL and hex color systems.

Technical Scope & Calculation Limitations

Generates standard CSS Color Module Level 4 `oklch(...)` syntax.

Frequently Asked Questions

HSL is mathematically uniform but perceptually flawed: pure yellow (`hsl(60, 100%, 50%)`) appears blindingly bright, while pure blue (`hsl(240, 100%, 50%)`) appears extremely dark. Oklch fixes this by ensuring equal lightness values actually look equally bright to human eyes.

Windows Desktop & Widget Options