色域とは：sRGB、Display P3、色域外の色をわかりやすく解説
色域とは、画面や色空間が表現できる色の範囲のことです。WebはsRGBを前提に作られてきましたが、今ではほとんどのスマートフォンと多くのノートPCがDisplay P3に対応しており、赤、緑、オレンジをはっきりと鮮やかに表示できます。
1分で読めます
色域とは
画面はどれも、赤・緑・青の光を混ぜて色を作ります。その画面が出せる最も純粋な赤・緑・青が三角形の頂点になり、その三角形の内側にある色がすべて色域に含まれます。三角形の外にある色は、その画面ではそもそも表示できません。
sRGB、Display P3、Rec. 2020
sRGBはWebの標準で、2016年以前に販売されたほとんどのモニターの標準でもあります。HEX、rgb()、hsl()はいずれもsRGBの色を表します。
Display P3はsRGBより約4分の1多くの色をカバーし、増えるのは主に鮮やかな緑、赤、オレンジです。iPhone、iPad、Macのほか、多くのAndroidスマートフォンや高価格帯のノートPCが採用しています。CSSではcolor(display-p3 r g b)、またはクロマの高いOKLCHの値で書きます。
Rec. 2020はさらに広く、HDR映像に使われます。これを完全にカバーする画面はごくわずかです。
| 形式 | 値 |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
色域外の色はどうなるか
CSSの色が画面の色域を外れている場合、ブラウザは別の色で代わりに表示するしかありません。単純なクリッピングでは各チャンネルを上限で切り捨てるため、色相が変わることがあります。CSS Color 4はその代わりに、OKLCHでの色域マッピングを推奨しています。明度と色相を保ち、色域に収まるまでクロマを下げる方法です。
PickShadeはsRGBの外にある色すべてに印を付け、マッピング後のフォールバックを表示します。古い画面を使っている人に実際にどう見えるかが正確にわかります。
CSSでP3の色を安全に使う方法
先にsRGBのフォールバックを書き、その後に広色域の値を書きます。または、鮮やかな値をcolor-gamutメディアクエリで囲みます。
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}よくある質問
色がsRGBの範囲内かどうかを知るには？
PickShadeに色を貼り付けてください。sRGBの外にある色には、色域外の警告と、範囲内で最も近い色が表示されます。
P3の色はWindowsでも使えますか？
はい。モニターがP3をカバーしていて、ブラウザがディスプレイのプロファイルを認識していれば使えます。sRGBの画面ではブラウザが色をsRGBに収めて表示するので、表示が崩れることはありません。
HEXはsRGBに限られますか？
はい。HEX、rgb()、hsl()、hwb()は常にsRGBの色を表します。広色域の色にはoklch()またはcolor(display-p3 ...)を使ってください。