OKLCH Browser Compatibility Checker
Check your browser's support for OKLCH color space and modern CSS color features. Test CSS Color Level 4 compatibility including color-mix(), relative colors, Display-P3, LAB, LCH and more.
Checking compatibility...
About OKLCH Browser Support
OKLCH is part of the CSS Color Level 4 specification, providing a perceptually uniform color space for web design. This tool checks your browser's support for OKLCH and related modern color features.
Browser Support Overview
- Chrome/Edge 111+: Full OKLCH support including color-mix() and relative colors
- Safari 15.4+: OKLCH support with progressive enhancements in newer versions
- Firefox 113+: Complete CSS Color Level 4 support including OKLCH
Implementation Best Practices
When using OKLCH in production, always provide fallback colors for browsers that don't support it. Use CSS feature detection with @supports to progressively enhance your color experience.
/* Provide fallback for older browsers */
.element {
background: #00bca2; /* Fallback */
background: oklch(70% 0.150 180);
}
/* Feature detection with @supports */
@supports (color: oklch(0% 0 0)) {
.element {
background: oklch(70% 0.150 180);
}
}