RGB値をsRGB規格(白色点はD65)に従って各種パラメータに変換あるいは逆変換する変換式一覧

May 3, 2022


1. RGB値を輝度的に等間隔なリニアRGB値に変換する式

元のRGB値をそれぞれ R、G、 B とし、0から255までの整数の256階調の値を取るものとする。一方、リニアRGB値を R_linear、G_linear、B_linear として、0から1までの実数の値を取るものとする。

R / 255 <= 0.04045 の時、
 R_linear = (R / 255) / 12.92
R / 255 > 0.04045 の時、
 R_linear = ((R / 255 + 0.055) / 1.055)2.4
G / 255 <= 0.04045 の時、
 G_linear = (G / 255) / 12.92
G / 255 > 0.04045 の時、
 G_linear = ((G / 255 + 0.055) / 1.055)2.4
B / 255 <= 0.04045 の時、
 B_linear = (B / 255) / 12.92
B / 255 > 0.04045 の時、
 B_linear = ((B / 255 + 0.055) / 1.055)2.4

【JavaScriptのプログラミング例】

var r1=r/255;
if (r1<=0.04045) {r2=(r1/12.92)} else {r2=Math.pow((r1+0.055)/1.055, 2.4)}
var g1=g/255;
if (g1<=0.04045) {g2=(g1/12.92)} else {g2=Math.pow((g1+0.055)/1.055, 2.4)}
var b1=b/255;
if (b1<=0.04045) {b2=(b1/12.92)} else {b2=Math.pow((b1+0.055)/1.055, 2.4)}


Ref. https://en.wikipedia.org/wiki/SRGB


2. リニアRGB値をXYZ値に変換する式

X = 0.4124 × R_linear + 0.3576 × G_linear + 0.1805 × B_linear
Y = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear
Z = 0.0193 × R_linear + 0.1192 × G_linear + 0.9505 × B_linear

Y値(0.0-1.0)は輝度を表す。右の行列内のRGBは、それぞれリニアRGB値。

【JavaScriptのプログラミング例】

var X = 0.4124*r2+0.3576*g2+0.1805*b2;
var Y = 0.2126*r2+0.7152*g2+0.0722*b2;
var Z = 0.0193*r2+0.1192*g2+0.9505*b2;


Ref. https://en.wikipedia.org/wiki/SRGB


3. XYZ値をxy値に変換する式

x = X / (X + Y + Z)
y = Y / (X + Y + Z)

CIE xy色度図

【JavaScriptのプログラミング例】

var x = X / (X + Y + Z);
var y = Y / (X + Y + Z);

Ref. https://en.wikipedia.org/wiki/CIE_1931_color_space


4. XYZ値をL*a*b*値に変換する式

Xn = 0.9505, Yn = 1.0000, Zn = 1.0890 の時、
L* = 116 f(Y/Yn) - 16
a* = 500 (f(X/Xn) - f(Y/Yn))
b* = 200 (f(Y/Yn) - f(Z/Zn))
ただし、t > (6/29)3 の時、f(t) = t1/3、それ以外の時は、f(t) = t / (3 × (6/29)2) + 4/29


L*a*b*

【JavaScriptのプログラミング例】

var Xn = 0.4124+0.3576+0.1805 = 0.9505;
var Yn = 0.2126+0.7152+0.0722 = 1.0000;
var Zn = 0.0193+0.1192+0.9505 = 1.0890;
var tx = X / Xn;
var ty = Y / Yn;
var tz = Z / Zn;
if (tx > (6/29)**3) {var fx = tx**(1/3)} else {var fx = ((29/6)**2)*tx/3+4/29}
if (ty > (6/29)**3) {var fy = ty**(1/3)} else {var fy = ((29/6)**2)*ty/3+4/29}
if (tz > (6/29)**3) {var fz = tz**(1/3)} else {var fz = ((29/6)**2)*tz/3+4/29}
var L_star = 116*fy-16;
var a_star = 500*(fx-fy);
var b_star = 200*(fy-fz);


Ref. https://en.wikipedia.org/wiki/CIELAB_color_space


5. XYZ値をLMS値に変換する式

L = 0.40024 × X + 0.70760 × Y - 0.08081 × Z;
M = -0.22630 × X + 1.16532 × Y + 0.04570 × Z;
S = 0.00000 × X + 0.00000 × Y + 0.91822 × Z;

【JavaScriptのプログラミング例】

var L = 0.40024 * X + 0.70760 * Y - 0.08081 * Z;
var M = -0.22630 * X + 1.16532 * Y + 0.04570 * Z;
var S = 0.00000 * X + 0.00000 * Y + 0.91822 * Z;


Ref. https://en.wikipedia.org/wiki/LMS_color_space


6. LMS値をDKL空間の3つのパラメータ値(ΔLum、ΔL-M、ΔSlum)に変換する式

【JavaScriptのプログラミング例】

var Lo = 0.5; Mo = 0.5; So = 0.5;
var dL = L - Lo;
var dM = M - Mo;
var dS = S - So;
var dLum = (Math.pow(3, 0.5) * dL + Math.pow(3, 0.5) * dM + 0 * dS) / (Lo + Mo);
var dLM = ((Math.pow((Math.pow(Lo, 2) + Math.pow(Mo, 2)), 0.5) / Lo) * dL - Math.pow((Math.pow(Lo, 2) + Math.pow(Mo, 2)), 0.5) / Mo * dM + 0 * dSS) / (Lo + Mo);
var dSlum = (- dL - dM + ((Lo + Mo) / So) * dS) / (Lo + Mo);


Ref. pooneilの脳科学論文コメント・DKL色空間についてまとめ http://pooneil.sakura.ne.jp/archives/permalink/001222.php


以下、逆変換式

飽きてしまって、完成させられないかもしれない。


色見本のページ