CIE1931xyz色度図

icon 項目のみ表示/展開表示の切り替え

概要

モニターの色域を表現するときによく用いられるCIE1931xy色度図について記述しました。
色度図上でカーソルを動かすとxy座標値とsRGB値を表示するようにしました。
sRGBで着色していますのでsRGBを超える色領域については不正確となります。
SVGをベースに着色はSVGでは非常に時間が係るためcanvasを使用しています。 塗りつぶしはピクセル単位で描画していますが拡大しても意外と粗さは目立ちません。
またブラウザによっては座標の読み取りができない場合があります。
色温度とxyの表はセルごとに背景を着色しています。印刷時には着色が無効となります。
スペクトル軌跡の表示は5nmステップのデーターを使用しています。直線で結ぶと特に左上部がカクカクになります。
前後の点から各点の接線を算出し接線同士の交点を2次ベージェ曲線の制御点としています。
ユーザーが入力した値に応じで計算過程を示すようにしてみました。
なお、ここで表示して色は各種条件で色が異なって見えますのでご了承ください。

動作確認

2017/04/02 Firefox 52.0.2(32bit)ではxy色度図上でマウスカーソルの座標を読み取る機能が動作しませんでした。
event.clientX及びevent.clientYをサポートしていないため。
2017/04/02 Google Chrome 57.0.2987.133(64bit/32bit)では正常動作しました。
2017/04/02 IE11(64bit/32bit)では正常動作しました。

実行中の環境

CIE1931XYZ表色系 色度図

CIE1931rgb色度図をもとにX軸とY軸を新規に設定したものがXYZ色度図です。
表示例を以下に示します。
モニター等の色域（しきいき）を表現するときに用いられます。
ここではx,yを可変させて該当する色を表示してみました。
x,y,zはx+y+z=1となるようにX,Y,Zを正規化したものである。

XYZ-xyz変換

S=X+Y+X
x=X/S
y=Y/S
z=Z/S \qquad =1-x-y

xyz→XYZ変換

Yを与えれば
X=x*Y/y
Z=z*Y/y

XYZ→sRGB変換(線形)

変換は想定する色温度によって変化する。
色温度を6500kとした場合は以下の行列によって計算できる。
XYZ→sRGB(D65)
\left[ \begin{array}{rrr} R \\ G \\ B \end{array} \right] =\left[ \begin{array}{rrr}3.2410 & -1.5374 & -0.4986 \\ -0.9692 & 1.8760 & 0.0416 \\ 0.0556 & -0.2040 & 1.0570 \end{array} \right] \left[ \begin{array}{rrr} X \\ Y \\ Z \end{array} \right]
行列の積の計算方法は以下のとおりである。
\left[ \begin{array}{rrr}a1 & b1 & c1 \\ a2 & b2 & c2 \\ a3 & b3 & c3 \end{array} \right] \left[ \begin{array}{rrr} X \\ Y \\ Z \end{array} \right] =\left[ \begin{array}{rrr} a1 \times X+b1 \times Y + c1 \times Z \\ a2 \times X+b2 \times Y+c2 \times Z \\ a3 \times X+b3 \times Y+c3 \times Z \end{array} \right]
よって、XYZ→sRGB(D65)は以下の式で計算できる。
R=3.2410X-1.5374Y-0.4986Z
G=-0.9692X+1.8760Y+0.0416Z
B=0.0556X-0.2040Y+1.0570Z
sRGB(D65)→XYZ行列を逆行列にすればよい。
M=\left[ \begin{array}{rrr}a1 & b1 & c1 \\ a2 & b2 & c2 \\ a3 & b3 & c3 \end{array} \right]
上式の逆行列は以下のように計算できる。
\displaystyle M^{-1}=\frac{1}{a1*b2*c3+b1*c2*a3+c1*a2*b3-c1*b2*a1-b1*a2*c3-a1*c2*b3} \times \left[ \begin{array}{rrr}b2*c3-c2*b3 & c1*b3-b1*c3 & b1*c2-c1*b2 \\ c2*a3-a2*c3 & a1*c3-c1*a3 & c1*a2-a1*c3 \\ a2*b3-b2*a3 & b1*a3-a1*b3 & a1*b2-b1*a2 \end{array} \right]

sRGB変換(γ補正)

モニター等は色の値と明るさがリニアでないためγ補正を行う。ここではRの例を示す。G,Bも同様に計算する。
R,G,Bそれぞれの値が0.0031308以下の場合
R'=12.92R
R,G,Bそれぞれの値が0.0031308を超える場合
\displaystyle R'=1.055*R^{\frac{1}{2.4}}-0.055
R,G,Bの値が1を超えた場合は1に設定する。

0～255に変換する

一般にR,G,Bはそれぞれ8bitで表されれるので255を乗じる。

Adobe RGB(D65)

Adobe RGB(1998) Color Image Encoding

波長から色を取得する。

等色関数の引数に求めたい波長を設定すればx,y,zが算出できる。
xyzからXYZが得られるので色が計算できる。

スペクトル軌跡

単純に等色関数をx,yが軌跡の各点の座標となる。

色温度から色を取得する。

プランク(Planck)の公式より波長（λ）からエルギー量が計算できる。波長を変化させて各々のエネルギー量を計算すればスペクトルが計算できる。一般的には可視光である380nm～780nmについて実施する。各波長のエネルギー量に等色関数を乗じて加算するとX,Y,Zそれぞれが算出できる。
プランク(Planck)の公式
絶対温度T(K)の黒体の分光放射強度{単位面積から法線方向単位立体角に放射されるパワー(W)}=
\displaystyle L(\lambda,T)=\frac{2 h c^2}{\lambda ^5 e^{ \left(\frac{hc}{k T \lambda }\right) -1}}
プランク定数 h=6.6260755 \times 10^{-34} \qquad (Js)
ボルツマン定数k=1.380658 \times 10^{-23} \qquad (J / K)
光速c=2.99792458 \times 10^8 \qquad (m /s)
上記のグラフは余りにもエネルギーの範囲が広いので550nmの値を基準に比率で表した図が以下のグラフです。
xyの二次元座標に色度を表したものが以下の図です。
三角形の領域はRGBで表現できる領域を示します。着色部の外線の馬蹄部分はスペクトル軌跡です。
以下が各色の座標値です。
色域白色点RGB
xyxyxy
sRGBD650.6400.3300.3000.6000.1500.06
Adobe RGBD650.6400.3300.2100.7100.1500.06
NTSCC0.6700.3300.2100.7100.1400.08
横の数字は波長を示しています。
三角形の内側を通る曲線は色温度を示しています。
CIE1931XYZ色度図 0 1 1 sRGB(D65) Adobe RGB NTSC
(x,y,Y)=(,,)
sRGB(,,)
波長 色温度 sRGB(D65) Adobe RGB NTSC RGB(SDTV)

R=1.00 G=1.00 B=1.00
0 16 32 48 64 80 96 112 128 144 160 176 192 208 224 240 Red 255 Green 255 Blue 255
色温度とCIE1931 xy値
色温度(k)xyRGB
参考文献
色彩工学入門　北出版株式会社

XYZ→xyY変換の計算過程

(X,Y,Z)=(,,)


xyY→XYZ変換の計算過程

(x,y,Y)=(,,)


XYZ→RGB変換の計算過程

(X,Y,Z)=(,,)
k= 輝度又は完全拡散反射面に対する比率を三刺激値に変換する係数(例えばsRGBの場合Y=1の時、80cd/m^2が標準なので1/80=0.0125を入力する。初期値はすでに係数が乗じてあるので1としている。)

XYZ→RGB変換行列




RGB→XYZ変換の計算過程

RGB(,,)
RGB→XYZ変換行列