OKLCH Browser-Kompatibilitätsprüfer
Überprüfen Sie die Unterstützung Ihres Browsers für den OKLCH-Farbraum und moderne CSS-Farbfunktionen. Testen Sie die CSS Color Level 4-Kompatibilität einschließlich color-mix(), relativer Farben, Display-P3, LAB, LCH und mehr.
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.
Über OKLCH Browser-Unterstützung
OKLCH ist Teil der CSS Color Level 4-Spezifikation und bietet einen wahrnehmungseinheitlichen Farbraum für Webdesign. Dieses Tool überprüft die Unterstützung Ihres Browsers für OKLCH und verwandte moderne Farbfunktionen.
Browser-Unterstützungsübersicht
- 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
Best Practices für die Implementierung
Bei der Verwendung von OKLCH in der Produktion sollten Sie immer Fallback-Farben für Browser bereitstellen, die es nicht unterstützen. Verwenden Sie CSS-Feature-Detection mit @supports, um Ihr Farberlebnis progressiv zu verbessern.
/* 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);
}
}