Color space (色空間)
色空間 (Color spaces) とは、座標ベースの色配置の基本となる色モデルにおける色の名前付きの組織を指します。色モデルは、色の構成要素(例えば、hwb()
色の h
、w
、b
チャンネル)が色空間とどのように関連するかを定義します。ほとんどの色空間は、色を表す 3 次元または 4 次元のグリッドです。各次元(または軸)は、異なるチャンネルに対応します。色は複数の色空間で表現でき、ある色空間から別の色空間に変換しても、見た目は同じままです。
色空間は、特定の色範囲を分類し定義します。それぞれの色空間は、数学モデルと関連するルールセットによって定義されます。それぞれの色空間には、表現可能な色範囲を示す定義された色域があります。これらのルールにより、異なる機器やソフトウェア間でも、一貫性のある再現可能な色表現が可能になります。
sRGB 色空間(標準の赤、緑、青)はウェブ用に作成されましたが、もはやこの色空間に限定される必要はありません。CSS Color Module Level 4 では、いくつかの定義済み色空間が指定されており、 CSS Color Module Level 5 ではさらに踏み込んで、独自の色空間を定義するための機能が指定されています。
名前付き色空間
定義済み RGB 色空間には srgb
、srgb-linear
、display-p3
、a98-rgb
、prophoto-rgb
、rec2020
があります。定義済み CIELAB 色空間には lab-d50
、lab-d65
があります。定義済み XYZ 色空間には xyz-d50
、xyz-d65
(および xyz-d65
の別名である xyz
)があります。
色空間は直交座標系または極座標系です。直交色空間には srgb
、srgb-linear
、display-p3
、a98-rgb
、prophoto-rgb
、rec2020
、lab
、oklab
、xyz-d50
、xyz-d65
(または xyz
)があります。極色空間には hsl
、hwb
、lch
、oklch
があります。
RGB 色空間
RGBは、赤、緑、青の 3 つの基本要素の混合色として色を表現する色モデルです。これらの要素が組み合わさると、さまざまな色合いが生まれます。 sRGB または「標準 RGB」は、 RGB 色の基本となる色空間です。 sRGB は、 PC や ウェブベースの画像システムの表示仕様を標準化することを目的としています。現在では、タグ付けされていない、または埋め込みカラープロファイルのないものについては、通常、この色空間が想定されています。
Adobe RGB 色空間など、 sRGB 色空間よりも広い色域を表現できる RGB 色空間がいくつかあります。 sRGB と Adobe RGB (a98-rgb
) の座標は異なります。 色の RGB 要素を表現する方法は数多くあります。 CSS では、 16 進数表記の 24 ビット整数(例えば、 #add8e6
は水色)で表すか、 rgb()
関数記法で 0 から 255 までの 3 つの別々の数値(例えば、 rgb(46 139.5 87)
)として表すことができます。
CSS の sRGB 色における <color>
の値 sRGB 色空間には、<hex-color>
、<named-color>
、rgb()
、hsl()
(色相、彩度、明度)や hwb()
(色相、白色度、黒色度)があります。また、srgb
、srgb-linear
、a98-rgb
、prophoto-rgb
色空間が color()
関数のためにあります。
HSV (色相、彩度、明度)の色空間および同義語である HSB (色相、彩度、輝度)は、 CSS では hwb()
として表されます。名前付きの色は、特定の 16 進数値にマッピングされた単なるキーワードです。これらのさまざまな色表記を sRGB に変換するのは、数学的には簡単です。なお、 currentcolor
は任意の色を使用でき、 sRGB に限定されるものではありません。
rgb()
色関数は、sRGB色空間を表現できる唯一の色関数ではありません。 HSL
(色相-彩度-明度)や HWB
(色相-白色度-黒度)のような円筒座標系も、ウェブ上で sRGB 色を表現するために使用されています。.
srgb
色空間-
sRGB カラー空間、または「標準 RGB」は標準 RGB(赤、緑、青)色空間です。 モニター、プリンター、ウェブで使用するために作成されました。 最も広く使用されている色空間であり、ほとんどのオペレーティングシステム、ソフトウェアプログラム、モニター、プリンターが対応しています。 sRGB は
r
、g
、b
をベースにしており、色域内の値は0
から1
の範囲です。 白色点は D65 です。 srgb-linear
色空間-
定義済みの線形光の sRGB 色空間である
srgb-linear
は、ガンマエンコード方式ではなく、線形光の伝達関数を使用している点を除いては、srgb
と同じです。srgb-linear
色空間では、 3 つのr
、g
、b
値が数値パラメーターとして受け入れられ、色域内の色は0
から1
の範囲となります。白色点は D65 です。 display-p3
色空間-
Apple が定義した Display P3 色空間は、 DCI-P3 色域、 D65 ホワイトポイント、 sRGB ガンマ曲線を結合したものです。これは、現在の広色域モニターに典型的な広色域空間であり、sRGB色域よりも鮮やかな緑や赤を実現します。
display-p3
は、r
、g
、b
を基にしており、色域内の値の範囲は0
から1
です。ホワイトポイントは D65 です。 a98-rgb
色空間-
a98-rgb
は、 CMYK のすべての色をRGBで表すように設計された Adobe® 1998 RGB 色空間です。 CIELab 色空間で指定された可視色の約 50% を再現でき、他にも複数の RGB 色空間よりもシアン・グリーン系の色相を網羅しています。色域内のr
、g
、b
値の範囲は0
から1
です。伝達曲線はガンマ関数であり、 1/2.2 に非常に近い値です。 白色点は D65 です。 prophoto-rgb
-
コダックが開発した
prophoto-rgb
色空間は、自然界に存在する可能性のあるすべての色と、 CIELab 色の約 90% を表すことができます。色域内のr
、g
、b
値の範囲は0
から1
です。伝達曲線はガンマ関数で、値は 1/1.8、黒に近い部分は直線です。 白色点は D50 で、CIELab と同じ値です。 rec2020
-
rec2020
は、超高解像度 4K および 8K テレビの放送業界標準です。超広色域空間は、ほとんどすべての目に見える現実世界の色を表すことができ、ほとんどの現在のディスプレイの能力を上回ります。 ディスプレイの性能向上に伴い、カバー範囲は時間経過に伴い拡大すると予想されます。色域内のr
、g
、b
値の範囲は0
から1
です。白色点は D65 です。
メモ: CSS 仕様には含まれない追加の円筒形 RGB 空間には、HSI
(色相、彩度、明度)、Okhsv
、Okhsl
、HSLuv
、HPLuv
、Cubehelix
などがあります。
CIELAB 色空間
CIELAB(または CIELab)色空間は、 L*a*b* (または短く Lab*)とも呼ばれ、人間が知覚できる色の全範囲を表します。この色空間は国際照明委員会 (CIE) によって定義されました。色を 3 つの値で表現します。 L* は知覚的な明るさを表し、 a* と b* は人間の視覚における 4 つの固有の色(赤、緑、青、黄)を表します。
Lab は直交座標系であり、中心に明度 L
軸があります。 a
軸に沿った正の値は紫がかった赤で、負の値は補色である緑です。 b
軸に沿った正の値は黄色で、負の値は青/紫です。彩度の低い色は a
と b
の値が小さく、絶対値が大きいほど彩度が高いことを示します。
CIELab 色空間関数には、 lab()
(明度、 a 軸、 b 軸)および lch()
(明度、彩度、色相)のほか、 oklab()
および oklch()
があります。 明度値は同じですが、lch()
および oklch
は極座標、円筒座標システムであり、軸ではなく極座標 C
(彩度)および H
(色相)を使用します。
Note:
lch()
とoklch
における色相と明度は、hsl()
やその他の sRGB 色空間における同名の値とは異なります。
CIELab 色空間(Lab、Lch、Oklab、Oklch など)は、端末に依存しない色空間です。
XYZ 色空間
赤、緑、青の組み合わせは画面に色を表示するのに適していますが、 sRGB は人間の色の知覚方法とは直接対応していません。 国際照明委員会 (CIE) が 1931 年に作成した CIE 1931 XYZ(または XYZ)色空間は、電磁可視スペクトルにおける波長分布と人間の視覚における色の知覚との間の最初の定量的なリンクを定義したものです。
正常な視力を持つ人は、光を感知する 3 種類の錐体細胞を持っており、それぞれ異なる波長に分光感度のピークを持っています。CIE の X、Y、Z の各引数は、 3 種類の錐体細胞の刺激レベルに対応しており、原理的には、あらゆる可視色を説明しています。 Y チャンネルは色の輝度を表します。 Z チャンネルは色の青の量を反映しますが、 RGB の B とは異なります。X 軸は XYZ 色 3D 座標システムの Y 軸および Z 軸と直交しています。
関連情報
@media
のcolor-gamut
特性- CSS データ型:
<color>
- sRGB 色空間
- CIELAB 色空間 (Wikipedia)
- CIE 1931 色空間 (Wikipedia)
- Oklab 色空間