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