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.
How to use
Run automatic detection
Open the page and the checker will immediately test your current browser for OKLCH support.
Inspect feature coverage
Review the detailed support list for color-mix(), relative colors, Display-P3, LAB, LCH, and other modern CSS color features.
Read fallback advice
If a feature is missing, check the recommended progressive enhancement and fallback strategies.
Compare browser readiness
Use the support overview to understand which browsers and versions are ready for OKLCH in production.
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);
}
}