High Definition CSS Color Guide

• CSS Color 4 は、Web に幅広い色のツールと機能を提供し、HD CSS のサポートを開始
• ディスプレイ機器はますます高性能になっている一方で、CSS はこれまでそれに対応できていなかった
• CSS では 25 年間 sRGB 色域のみが使われてきたが、これは人間の目で見える色の 30% しか表現できない
• Chrome 111 から CSS Color Level 4 をサポート
  • RGB 98、Display P3、Rec2020、ProPhoto などの色域に対応する 12 個の新しい色空間を選択可能
  • すでに 2016 年から display-p3 をサポートしていた Safari と、これで同等に（Apple が作った色域）
• CSS がついに HD ディスプレイをサポートし、対応ブラウザでは 50% 多くの色を表現可能

記事の目次

• 概要
  • 色域（Color Gamut）とは？
  • 人間の視覚領域
  • 色空間（Color Space）とは？
  • 色域と色空間のまとめ
• より多くの色、空間、デバッグ結果にアクセスする方法
  • 従来の色空間の見直し
  • 新しい Web カラー空間を知る
  • 色補間（Interpolation）
  • 領域のクランプ
  • 色空間を選ぶ
• HD CSS カラーへ移行する
  • 色域および色空間のサポート確認
  • Chrome デベロッパーツールでの色デバッグ
• 結論