OKLCH 브라우저 호환성 검사기

브라우저의 OKLCH 색 공간 및 최신 CSS 색상 기능 지원을 확인하세요. color-mix(), 상대 색상, Display-P3, LAB, LCH 등을 포함한 CSS Color Level 4 호환성을 테스트합니다.

使用指南

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

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

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

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

호환성 확인 중...

OKLCH 브라우저 지원 정보

OKLCH는 CSS Color Level 4 사양의 일부로, 웹 디자인을 위한 지각적 균일 색 공간을 제공합니다. 이 도구는 브라우저의 OKLCH 및 관련 최신 색상 기능 지원을 확인합니다.

브라우저 지원 개요

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

구현 모범 사례

프로덕션에서 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);
  }
}