color() function
color() 関数記法により、他のほとんどの色関数が暗黙に処理する sRGB 色空間ではなく、特定の指定した色空間で色を指定することができます。
特定の色空間に対応しているかどうかは、CSS メディア特性の color-gamut で検出することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 111 | 111 | 113 | 15 | 111 | 15 | |
| CSS タイプ | ||||||
color.mixed type parameters パラメータに `<percentage>` と `<number>` を混在させます | 111 | 111 | 113 | 15 | 111 | 15 |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (15)
実装メモ
- 事前定義されたカラー プロファイル「display-p3」および「srgb」のみをサポートします。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (15)
実装メモ
- 事前定義されたカラー プロファイル「display-p3」および「srgb」のみをサポートします。
基本構文
CSS
/* Display P3 color space */
.vivid {
background-color: color(display-p3 1 0 0);
}
/* Explicit sRGB */
.srgb {
color: color(srgb 0.5 0.2 0.8);
}
/* With transparency */
.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 のガイドラインに準拠した検証を行うこと。