OKLCH: The Future of Color on the Web
Why designers and developers are switching to OKLCH for more predictable, accessible colors.
What is OKLCH?
OKLCH is a perceptually uniform color space with three components:
- L (Lightness): 0 (black) to 1 (white)
- C (Chroma): 0 (gray) to ~0.4 (vivid)
- H (Hue): 0° to 360° (color wheel)
The Problem with HSL
In HSL, colors with the same "lightness" don't look equally bright. Yellow at 50% lightness appears much brighter than blue at 50% lightness. This makes creating consistent palettes difficult.
Both have 50% lightness in HSL, but yellow appears much brighter.
Why OKLCH is Better
OKLCH is "perceptually uniform" — colors with equal L values look equally bright to human eyes. This makes it ideal for:
- Creating accessible color palettes
- Ensuring consistent contrast across different hues
- Building predictable color systems
- Generating smooth gradients
Browser Support
OKLCH is supported in all modern browsers (Chrome, Firefox, Safari, Edge). You can use it directly in CSS:
background: oklch(0.3 0.1 200 / 50%);
Gamut Warnings
Some OKLCH colors can't be displayed on standard monitors (sRGB gamut). When this happens, browsers clip the color to the nearest displayable value. Our converter warns you when colors are out of gamut.
When to Use OKLCH
- Creating color systems and design tokens
- Generating accessible palettes programmatically
- When consistent perceived lightness matters
- Building dark mode variants
Try OKLCH
Use our OKLCH Converter to experiment with perceptually uniform colors and see gamut warnings in real-time.