OKLCH ブラウザ互換性チェッカー

ブラウザのOKLCH色空間と最新のCSS色機能のサポートを確認。color-mix()、相対色、Display-P3、LAB、LCHなどのCSS Color Level 4互換性をテスト。

互換性を確認中...

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