ここでは sRGB および円筒モデルの HSL/HLS 色空間を用います。
各値の区間は以下の通りです:
- $R_{sRGB} \in [0, 1]$, $G_{sRGB} \in [0, 1]$, $B_{sRGB} \in [0, 1]$
- $RL \in [0, 1]$
- $H \in [0^\circ, 360^\circ)$, $S \in [0, 1]$, $L \in [0, 1]$
※計算を簡単にするため、ここでは $S = 1$ として計算します。
※計算を簡単にするため、ここでは $H \in \{0^\circ, 60^\circ, 120^\circ, 180^\circ, 240^\circ, 300^\circ\}$ として計算します。
※ HSL/HLS 色空間の輝度 $L$ と sRGB の相対輝度 $RL$ は別物です。
※ HSV/HSB 色空間では白に近づくにつれて彩度 $S$ の値が変化するため、ここでは使用しません。
※双円錐モデルの HSL/HLS 色空間では輝度 $L$ の値によって彩度 $S$ の最大値が変化するため、ここでは使用しません。
※ここでは XYZ 色空間および Lab 色空間は扱いません。
参考「relative luminance - Web Content Accessibility Guidelines (WCAG) 2.1」
0. まとめ
0.1. 一般
以下の変換を行います:
- $(R_{sRGB}, G_{sRGB}, B_{sRGB})$ から $(H, S, L)$ へ変換
- $(H, S, L)$ から sRGB の相対輝度が $RL$ となる $(H, S, L')$ へ変換
- $(H, S, L')$ から $(R_{sRGB}', G_{sRGB}', B_{sRGB}')$ へ変換
つまり
(R_{sRGB}', G_{sRGB}', B_{sRGB}') = f\big((R_{sRGB}, G_{sRGB}, B_{sRGB}), RL\big)
のような計算を行います。
0.2. 無彩色のとき
L' =
\begin{cases}
12.92 \times RL, & \text{if $RL \leqq 0.003131$} \\
1.055 \times RL ^{\frac1{2.4}} - 0.055, & \text{otherwise}
\end{cases}
(R_{sRGB}', G_{sRGB}', B_{sRGB}') = (L', L', L')
0.3. 特定の色のとき
\begin{align}
H &\in \{0^\circ, 60^\circ, 120^\circ, 180^\circ, 240^\circ, 300^\circ\} \\
H' &= \frac{H}{60^\circ} \\
S &= 1 \\
x &=
\begin{cases}
0.2126, & \text{if $0 = H'$} \\
0.2126 + 0.7152, & \text{if $1 = H'$} \\
0.7152, & \text{if $2 = H'$} \\
0.7152 + 0.0722, & \text{if $3 = H'$} \\
0.0722, & \text{if $4 = H'$} \\
0.2126 + 0.0722, & \text{if $5 = H'$}
\end{cases}
\\
L' &=
\begin{cases}
\dfrac{12.92}2 \times \dfrac{RL}x, & \text{if $0 \leqq RL \leqq 0.003131 \times x$} \\
\dfrac{1.055}2 \times \left(\dfrac{RL}x\right) ^{\frac1{2.4}} - \dfrac{0.055}2, & \text{if $0.003131 \times x < RL \leqq x$} \\
\dfrac{12.92}2 \times \dfrac{RL - x}{1 - x} + \dfrac12, & \text{if $x < RL \leqq x + 0.003131 \times (1 - x)$} \\
\dfrac{1.055}2 \times \left(\dfrac{RL - x}{1 - x}\right) ^{\frac1{2.4}} + \dfrac{1 - 0.055}2, & \text{if $x + 0.003131 \times (1 - x) < RL \leqq 1$}
\end{cases}
\\
(M, m) &=
\begin{cases}
(2 \times L', 0) & \text{if $RL \leqq x$} \\
(1, 2 \times L' - 1) & \text{otherwise}
\end{cases}
\end{align}
(R_{sRGB}', G_{sRGB}', B_{sRGB}') =
\begin{cases}
(M, m, m) & \text{if $0 = H'$} \\
(M, M, m) & \text{if $1 = H'$} \\
(m, M, m) & \text{if $2 = H'$} \\
(m, M, M) & \text{if $3 = H'$} \\
(m, m, M) & \text{if $4 = H'$} \\
(M, m, M) & \text{if $5 = H'$}
\end{cases}
1. sRGB から HSL へ変換する
\begin{alignat}{2}
M &= & \; \max&(R_{sRGB}, G_{sRGB}, B_{sRGB}) \\
m &= & \; \min&(R_{sRGB}, G_{sRGB}, B_{sRGB})
\end{alignat}
\begin{align}
H' &=
\begin{cases}
\mathrm{undefined}, & \text{if $m = M$} \\
\dfrac{G - R}{M - m} + 1, & \text{if $m = B$} \\
\dfrac{B - G}{M - m} + 3, & \text{if $m = R$} \\
\dfrac{R - B}{M - m} + 5, & \text{if $m = G$} \\
\end{cases}
\\
H &= 60^\circ \times H' \\
S &= \frac{M - m}{1 - |M + m - 1|} \\
&=
\begin{cases}
\dfrac{M - m}{M + m}, & \text{if $0 \leqq M + m \leqq 1$} \\
\dfrac{M - m}{2 - (M + m)}, & \text{if $1 < M + m \leqq 2$}
\end{cases}
\\
L &= \frac{M + m}2
\end{align}
2. HSL から sRGB へ変換する
2.1. 一般
\begin{align}
H' &= \frac{H}{60^\circ} \\
H'' &= 1 - |H' \bmod 2 - 1| \\
&=
\begin{cases}
H', & \text{if $0 \leqq H' < 1$} \\
2 - H', & \text{if $1 \leqq H' < 2$} \\
H' - 2, & \text{if $2 \leqq H' < 3$} \\
4 - H', & \text{if $3 \leqq H' < 4$} \\
H' - 4, & \text{if $4 \leqq H' < 5$} \\
6 - H', & \text{if $5 \leqq H' < 6$}
\end{cases}
\\
C &= S \times (1 - |2 \times L - 1|) \\
&=
\begin{cases}
2 \times S \times L, & \text{if $0 \leqq L \leqq \dfrac12$} \\
2 \times S \times (1 - L), & \text{if $\dfrac12 < L \leqq 1$}
\end{cases}
\\
M &= L + \frac C2 \\
m &= L - \frac C2 \\
X &= m + H'' \times C \\
&= L + \left(H'' - \frac12\right) \times C \\
(R_{sRGB}, G_{sRGB}, B_{sRGB}) &=
\begin{cases}
(L, L, L) & \text{if $H'$ is undefined} \\
(M, X, m) & \text{if $0 \leqq H' < 1$} \\
(X, M, m) & \text{if $1 \leqq H' < 2$} \\
(m, M, X) & \text{if $2 \leqq H' < 3$} \\
(m, X, M) & \text{if $3 \leqq H' < 4$} \\
(X, m, M) & \text{if $4 \leqq H' < 5$} \\
(M, m, X) & \text{if $5 \leqq H' < 6$}
\end{cases}
\end{align}
2.2. 彩度が最大のとき
2.2.1. 暗いとき
$S = 1, 0 \leqq L \leqq \dfrac12$ とすると
\begin{align}
C &= 2 \times L \\
M &= 2 \times L \\
m &= 0 \\
X &= 2 \times H'' \times L
\end{align}
になります。
2.2.2. 明るいとき
$S = 1, \dfrac12 < L \leqq 1$ とすると
\begin{align}
C &= 2 - 2 \times L \\
M &= 1 \\
m &= 2 \times L - 1 \\
X &= (2 \times L - 1) + H'' \times (2 - 2 \times L)
\end{align}
になります。
2.2.3. 一般化
本記事では利用しませんが、$S = 1$ とすると
\begin{align}
C &= 1 - |2 \times L - 1| \\
M &= \min(2 \times L, 1) \\
&= \min(2 \times L - 1, 0) + 1 \\
m &= \max(2 \times L - 1, 0) \\
X &= L + \left(H'' - \frac12\right) \times (1 - |2 \times L - 1|)
\end{align}
と表現できます。
3. sRGB の相対輝度
sRGB の色 $(R_{sRGB}, G_{sRGB}, B_{sRGB})$ の相対輝度 $RL$ の値は
\begin{align}
R_{linear} &=
\begin{cases}
\dfrac{R_{sRGB}}{12.92}, & \text{if $R_{sRGB} \leqq 0.04045$} \\
\left(\dfrac{R_{sRGB} + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
G_{linear} &=
\begin{cases}
\dfrac{G_{sRGB}}{12.92}, & \text{if $G_{sRGB} \leqq 0.04045$} \\
\left(\dfrac{G_{sRGB} + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
B_{linear} &=
\begin{cases}
\dfrac{B_{sRGB}}{12.92}, & \text{if $B_{sRGB} \leqq 0.04045$} \\
\left(\dfrac{B_{sRGB} + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\end{align}
RL = 0.2126 \times R_{linear} + 0.7152 \times G_{linear} + 0.0722 \times B_{linear}
です。
4. sRGB の相対輝度から HSL の輝度へ変換する
4.1. 一般
\begin{align}
L_{linear} &=
\begin{cases}
\dfrac{L}{12.92}, & \text{if $L \leqq 0.04045$} \\
\left(\dfrac{L + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
M_{linear} &=
\begin{cases}
\dfrac{M}{12.92}, & \text{if $M \leqq 0.04045$} \\
\left(\dfrac{M + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
m_{linear} &=
\begin{cases}
\dfrac{m}{12.92}, & \text{if $m \leqq 0.04045$} \\
\left(\dfrac{m + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
X_{linear} &=
\begin{cases}
\dfrac{X}{12.92}, & \text{if $X \leqq 0.04045$} \\
\left(\dfrac{X + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\end{align}
4.2. 彩度が最大のとき
4.2.1. 暗いとき
$S = 1, 0 \leqq L \leqq \dfrac12$ とすると
\begin{align}
L_{linear} &=
\begin{cases}
\dfrac{L}{12.92}, & \text{if $L \leqq 0.04045$} \\
\left(\dfrac{L + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
M_{linear} &=
\begin{cases}
\dfrac{2 \times L}{12.92}, & \text{if $2 \times L \leqq 0.04045$} \\
\left(\dfrac{2 \times L + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
m_{linear} &= 0 \\
X_{linear} &=
\begin{cases}
\dfrac{2 \times H'' \times L}{12.92}, & \text{if $2 \times H'' \times L \leqq 0.04045$} \\
\left(\dfrac{2 \times H'' \times L + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\end{align}
になります。
4.2.2. 明るいとき
$S = 1, \dfrac12 < L \leqq 1$ とすると
\begin{align}
L_{linear} &= \left(\dfrac{L + 0.055}{1.055}\right) ^{2.4} \\
M_{linear} &= 1 \\
m_{linear} &=
\begin{cases}
\dfrac{2 \times L - 1}{12.92}, & \text{if $2 \times L - 1 \leqq 0.04045$} \\
\left(\dfrac{2 \times L - 1 + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
X_{linear} &=
\begin{cases}
\dfrac{(2 \times L - 1) + H'' \times (2 - 2 \times L)}{12.92}, & \text{if $(2 \times L - 1) + H'' \times (2 - 2 \times L) \leqq 0.04045$} \\
\left(\dfrac{(2 \times L - 1) + H'' \times (2 - 2 \times L) + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\end{align}
になります。
4.3. 無彩色のとき
$H' \text{ is undefined}$ とすると
\begin{align}
RL &= L_{linear} \\
&=
\begin{cases}
\dfrac{L}{12.92}, & \text{if $L \leqq 0.04045$} \\
\left(\dfrac{L + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
L &=
\begin{cases}
12.92 \times RL, & \text{if $RL \leqq 0.003131$} \\
1.055 \times RL ^{\frac1{2.4}} - 0.055, & \text{otherwise}
\end{cases}
\end{align}
になります。
4.4. 特定の色相のとき
4.4.1. 一般
$H' \bmod 1 = 0$ とすると
\begin{align}
H'' &=
\begin{cases}
0, & \text{if $H' \bmod 2 = 0$} \\
1, & \text{if $H' \bmod 2 = 1$}
\end{cases}
\\
X &=
\begin{cases}
m, & \text{if $H' \bmod 2 = 0$} \\
M, & \text{if $H' \bmod 2 = 1$}
\end{cases}
\\
(R_{sRGB}, G_{sRGB}, B_{sRGB}) &=
\begin{cases}
(M, m, m) & \text{if $0 = H'$} \\
(M, M, m) & \text{if $1 = H'$} \\
(m, M, m) & \text{if $2 = H'$} \\
(m, M, M) & \text{if $3 = H'$} \\
(m, m, M) & \text{if $4 = H'$} \\
(M, m, M) & \text{if $5 = H'$}
\end{cases}
\\
x &=
\begin{cases}
0.2126, & \text{if $0 = H'$} \\
0.2126 + 0.7152, & \text{if $1 = H'$} \\
0.7152, & \text{if $2 = H'$} \\
0.7152 + 0.0722, & \text{if $3 = H'$} \\
0.0722, & \text{if $4 = H'$} \\
0.2126 + 0.0722, & \text{if $5 = H'$}
\end{cases}
\\
RL &= x \times M_{linear} + (1 - x) \times m_{linear}
\end{align}
になります。
4.4.2. 彩度が最大のとき
$S = 1, 0 \leqq L \leqq \dfrac12$ のとき
\begin{align}
M_{linear} &=
\begin{cases}
\dfrac{2 \times L}{12.92}, & \text{if $2 \times L \leqq 0.04045$} \\
\left(\dfrac{2 \times L + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
m_{linear} &= 0 \\
RL &= x \times M_{linear} \\
L &=
\begin{cases}
\dfrac{12.92}2 \times \dfrac{RL}x, & \text{if $0 \leqq RL \leqq 0.003131 \times x$} \\
\dfrac{1.055}2 \times \left(\dfrac{RL}x\right) ^{\frac1{2.4}} - \dfrac{0.055}2, & \text{if $0.003131 \times x < RL \leqq x$}
\end{cases}
\end{align}
になります。
$S = 1, \dfrac12 < L \leqq 1$ のとき
\begin{align}
M_{linear} &= 1 \\
m_{linear} &=
\begin{cases}
\dfrac{2 \times L - 1}{12.92}, & \text{if $2 \times L - 1 \leqq 0.04045$} \\
\left(\dfrac{2 \times L - 1 + 0.055}{1.055}\right) ^{2.4}, & \text{otherwise}
\end{cases}
\\
RL &= x + (1 - x) \times m_{linear} \\
L &=
\begin{cases}
\dfrac{12.92}2 \times \dfrac{RL - x}{1 - x} + \dfrac12, & \text{if $x < RL \leqq x + 0.003131 \times (1 - x)$} \\
\dfrac{1.055}2 \times \left(\dfrac{RL - x}{1 - x}\right) ^{\frac1{2.4}} + \dfrac{1 - 0.055}2, & \text{if $x + 0.003131 \times (1 - x) < RL \leqq 1$}
\end{cases}
\end{align}
になります。
5. 今後の課題
- 任意の色相 $H$ への拡張
- $RL = (a_1 \times L + a_2) ^{2.4} + (a_3 \times L + a_4) ^{2.4}$ のような式を計算する必要がある
- 任意の彩度 $S$ への拡張
- $RL = (a_1 \times L + a_2) ^{2.4} + (a_3 \times L + a_4) ^{2.4} + (a_5 \times L + a_6) ^{2.4}$ のような式を計算する必要がある