兼容性检查器

OKLCH 浏览器兼容性检查器

检查您的浏览器对 OKLCH 色彩空间和现代 CSS 颜色特性的支持情况。测试 CSS Color Level 4 兼容性，包括 color-mix()、相对颜色、Display-P3、LAB、LCH 等功能。

自动检测浏览器特性支持

内置回退建议

快速了解 CSS Color 4 就绪情况

使用指南

自动检测

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

功能检查

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

获取建议

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

了解浏览器支持

查看浏览器支持概览，了解哪些浏览器和版本适合在生产环境中使用 OKLCH。

检查兼容性中...

关于 OKLCH 浏览器支持

OKLCH 是 CSS Color Level 4 规范的一部分，为网页设计提供感知均匀的色彩空间。此工具检查您的浏览器对 OKLCH 及相关现代颜色功能的支持情况。

浏览器支持概览

Chrome/Edge 111+: 完整支持 OKLCH，包括 color-mix() 和相对颜色语法
Safari 15.4+: 支持 OKLCH，并在较新版本中持续增强相关能力
Firefox 113+: 完整支持 CSS Color Level 4，包括 OKLCH

实现最佳实践

在生产环境中使用 OKLCH 时，请始终为不支持的浏览器提供后备颜色。使用 @supports 进行 CSS 特性检测，以渐进增强您的颜色体验。

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