移行中の知識
色域
Color Gamut
定義
色域（color gamut）とは、あるcolor spaceやdisplay、printerなどが表現・再現できる色の範囲です。たとえばDisplay P3はsRGBより広い範囲の色を表現できますが、指定した色が出力先のgamut外にある場合は、そのまま再現できずgamut mappingやclippingなどの変換が必要になります。広いgamutを使うこと自体が、常により良いデザインを意味するわけではありません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
wide-gamut display向けのWebサイト
P3のbrand accentをsRGBでも確認する
見るポイント
Display P3で高chromaなaccentを作った後、sRGB環境でどの程度色が変わるかを見る。gamut外の色がmappingされても階層・識別・ブランド差が維持されるか確認する。
design tokenのcolor scale
OKLCH paletteの上限を色相ごとに見る
見るポイント
同じlightness・chromaを複数hueへ機械的に適用すると、色相によってsRGBやP3のgamut外になる場合がある。数値の統一より、target gamut内で再現可能かを先に確認する。
注意
誤解しやすい点
- CSSで指定できる数値範囲と、実際の出力deviceが再現できるgamutを同じものと考える。
- wide gamutなら自動的に鮮やかで高品質になると考え、mapping後の階層やcontrastを確認しない。
- out-of-gamut colorは単純にRGB componentをclipすれば元の見えを保てると考える。
関連
関連する概念
出典