sRGB の相対輝度から色を計算する

![sRGB の相対輝度と HSL/HLS の輝度](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232067/b92be138-fe43-05cb-9c5e-5425d5f4520f.png)

ここでは 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](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance)」

# 0. まとめ

## 0.1. 一般

以下の変換を行います:

1. $(R_{sRGB}, G_{sRGB}, B_{sRGB})$ から $(H, S, L)$ へ変換
1. $(H, S, L)$ から sRGB の相対輝度が $RL$ となる $(H, S, L')$ へ変換
1. $(H, S, L')$ から $(R_{sRGB}', G_{sRGB}', B_{sRGB}')$ へ変換

つまり

```math
(R_{sRGB}', G_{sRGB}', B_{sRGB}') = f\big((R_{sRGB}, G_{sRGB}, B_{sRGB}), RL\big)
```

のような計算を行います。

## 0.2. 無彩色のとき

```math
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}
```

```math
(R_{sRGB}', G_{sRGB}', B_{sRGB}') = (L', L', L')
```

## 0.3. 特定の色のとき

```math
\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}
```

```math
(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 へ変換する

```math
\begin{alignat}{2}
M &= & \; \max&(R_{sRGB}, G_{sRGB}, B_{sRGB}) \\
m &= & \; \min&(R_{sRGB}, G_{sRGB}, B_{sRGB})
\end{alignat}
```

```math
\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. 一般

```math
\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$ とすると

```math
\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$ とすると

```math
\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$ とすると

```math
\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$ の値は

```math
\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}
```

```math
RL = 0.2126 \times R_{linear} + 0.7152 \times G_{linear} + 0.0722 \times B_{linear}
```

です。

# 4. sRGB の相対輝度から HSL の輝度へ変換する

## 4.1. 一般

```math
\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$ とすると

```math
\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$ とすると

```math
\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}$ とすると

```math
\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$ とすると

```math
\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$ のとき

```math
\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$ のとき

```math
\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}$ のような式を計算する必要がある