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.

使用指南

1. 自动检测：打开页面后自动检测您当前浏览器的 OKLCH 支持情况。

2. 功能检查：查看详细的功能支持列表，包括 color-mix()、相对颜色、Display-P3 等。

3. 获取建议：如果不支持某些功能，查看渐进增强建议和回退方案。

4. 了解浏览器支持：查看各浏览器版本对 OKLCH 的支持情况，了解何时可以使用这些功能。

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);
  }
}