Widely available 安全に使用可能。広色域ディスプレイで鮮やかな色を使いたい場合に。sRGB フォールバックを併記すること。
カラー Widely available

color() function

color() 関数は第一引数で色空間を指定し、その後に各チャンネルの値を指定する。display-p3 色空間を使えば sRGB では表現できない鮮やかな色をP3 対応ディスプレイで表示できる。prophoto-rgb や rec2020 など将来の広色域ディスプレイにも対応。

カラー色空間

概要

color() 関数は第一引数で色空間を指定し、その後に各チャンネルの値を指定する。display-p3 色空間を使えば sRGB では表現できない鮮やかな色をP3 対応ディスプレイで表示できる。prophoto-rgb や rec2020 など将来の広色域ディスプレイにも対応。

対応ブラウザ

デスクトップ

Chrome 111+
Edge 111+
Safari 15+
Firefox 113+

モバイル

Chrome Android 111+
Safari iOS 15+
Firefox Android 113+

基本構文

CSS 
/* Display P3 色空間 */
.vivid {
  background-color: color(display-p3 1 0 0);
}

/* sRGB を明示 */
.srgb {
  color: color(srgb 0.5 0.2 0.8);
}

/* 透明度付き */
.p3-alpha {
  color: color(display-p3 0.2 0.8 0.4 / 0.9);
}

実務での使いどころ

  • P3 ディスプレイ対応

    iPhone や MacBook の広色域ディスプレイで、sRGB では表現できない鮮やかなブランドカラーを表示する。

  • 写真・画像との色の一致

    P3 で撮影・編集された写真の色と、UI のアクセントカラーを同じ色空間で統一する。

注意点

  • 広色域に対応していないディスプレイでは色がクランプされる。必ず sRGB のフォールバックを先に記述すること。
  • デザインツールとの色空間の不一致に注意。Figma は sRGB、一部のツールは P3 をデフォルトにしている場合がある。

フォールバック戦略

CSS 
/* sRGB フォールバック */
.vivid-red {
  background-color: #ff0000;
  background-color: color(display-p3 1 0 0);
}

アクセシビリティ

  • 広色域の色でもコントラスト比の要件は変わらない。WCAG のガイドラインに準拠した検証を行うこと。

参考リンク