カラー・コンピューティング

色空間

RGB から HSL へ変換

色 \(\mathcal{C}\) の色相 \(h \:(0 \le h \lt 360)\)、円柱モデルの彩度 \(s\)、円錐モデルの彩度 \(s'\)、輝度 \(l \:(0 \le s,s',l \le 1)\)、赤緑青とその最小値・最大値 \(r,g,b,L,U \:(0 \le r,g,b,L,U \le 1)\) とすると、 \[L = \min\left\{r, g, b\right\},\quad U = \max\left\{r, g, b\right\},\] \[s = \dfrac{U - L}{1 - |U + L - 1|},\quad s' = U - L,\] \[l = \dfrac{U + L}{2}.\]

ちなみに、\(s\) と \(s'\) つまり円柱モデルと円錐モデルの関係はここで得られる。 \[s = \dfrac{s'}{1 - |U + L - 1|}.\]

さらに、以下のように場合分けをする。 \[j = \begin{cases} 1 &\text{ if \(L = r\) or \(L = r = g\) or \(L = r = b\)},\\ 2 &\text{ if \(L = g\) or \(L = g = b\) or \(L = g = r\)},\\ 0 &\text{ if \(L = b\) or \(L = b = r\) or \(L = b = g\)},\\ \text{undefined} &\text{ otherwise}. \end{cases}\] すると、以下のように HSL 色空間モデルの値を求めることができる。 \[h = \begin{cases} 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(j = 0\)},\\ 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(j = 1\)},\\ 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(j = 2\)},\\ 360 &\text{ otherwise}. \end{cases}\] \(h = 360\) は定義域外、つまり、\(L = U\) のときゼロ除算となる未定義の意味をなしている。

この式の意味は、 \(j = 0\) のときは \(60\degree\) を中心に \(r \gt g\) なら \(0\degree\) 方向に、\(r \lt g\) なら \(120\degree\) 方向に、 \(j = 1\) のときは \(180\degree\) を中心に \(g \gt b\) なら \(120\degree\) 方向に、\(g \lt b\) なら \(240\degree\) 方向に、 \(j = 2\) のときは \(300\degree\) を中心に \(b \gt r\) なら \(240\degree\) 方向に、\(b \lt r\) なら \(360\degree\) 方向に、差からの割合で色相をずらすことを表している。

補色

補色 \(\bar{\mathcal{C}}\) の HSL を \(\mathcal{C}\) の HSL で以下のように定義することができる。 \[ \bar{h} = h + 180 \mod 360, \quad \bar{s} = s, \quad \bar{s'} = s', \quad \bar{l} = l. \]

補色 \(\bar{\mathcal{C}}\) の RGB 値 \(\bar{r}, \bar{g}, \bar{b}\) は色相を求めなくても以下のように得ることができる。 \[\left(\;\begin{align*} \bar{r} = U + L - r,\\ \bar{g} = U + L - g,\\ \bar{b} = U + L - b. \end{align*}\right.\]

確かに、色 \(\bar{\mathcal{C}}\) として \(\bar{r}, \bar{g}, \bar{b}\) を代入すると、以下が成り立っていることがわかる。 \[\bar{L} = \min\left\{\bar{r}, \bar{g}, \bar{b}\right\} = \min\left\{U + L - r, U + L - g, U + L - b\right\} = U + L - U = L,\] \[\bar{U} = \max\left\{\bar{r}, \bar{g}, \bar{b}\right\} = \max\left\{U + L - r, U + L - g, U + L - b\right\} = U + L - L = U,\] \[\begin{align*}\bar{h} &= \begin{cases} 60\left(\dfrac{\bar{g} - \bar{r}}{\bar{U} - \bar{L}} + 1\right) = 60\left(\dfrac{U + L - g - (U + L) + r}{U - L} + 1\right) = 60\left(\dfrac{r - g}{U - L} + 1\right) = 60\left(\dfrac{g - r}{U - L} + 1\right) + 180 \mod 360 &\text{ if \(\bar{j} = 0\)},\\ 60\left(\dfrac{\bar{b} - \bar{g}}{\bar{U} - \bar{L}} + 3\right) = 60\left(\dfrac{U + L - b - (U + L) + g}{U - L} + 3\right) = 60\left(\dfrac{g - b}{U - L} + 3\right) = 60\left(\dfrac{b - g}{U - L} + 3\right) + 180 \mod 360 &\text{ if \(\bar{j} = 1\)},\\ 60\left(\dfrac{\bar{r} - \bar{b}}{\bar{U} - \bar{L}} + 5\right) = 60\left(\dfrac{U + L - r - (U + L) + b}{U - L} + 5\right) = 60\left(\dfrac{b - r}{U - L} + 5\right) = 60\left(\dfrac{r - b}{U - L} + 5\right) + 180 \mod 360 &\text{ if \(\bar{j} = 2\)}, \end{cases}\\ &= h + 180 \mod 360.\end{align*}\]

上式で \(+180\) されて前項の符号が反転するのを説明するには少々面倒で、まず、先の場合分けを細分化する必要がある。 \[h(r,g,b,k) = \begin{cases} 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = r\), \(L = b\) or \(L = b = g\) and \(k = 0\)},\\ 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = g\), \(L = b\) or \(L = b = r\) and \(k = 1\)},\\ 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = g\), \(L = r\) or \(L = r = b\) and \(k = 2\)},\\ 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = b\), \(L = r\) or \(L = r = g\) and \(k = 3\)},\\ 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = b\), \(L = g\) or \(L = g = r\) and \(k = 4\)},\\ 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = r\), \(L = g\) or \(L = g = b\) and \(k = 5\)}. \end{cases}\] 補色 \(\bar{\mathcal{C}}\) の RGB 値 \(\bar{r}, \bar{g}, \bar{b}\) をこの細分化した場合分けの式に代入すると、 \[\begin{align*}\bar{h}(\bar{r},\bar{g},\bar{b},\bar{k}) &= \begin{cases} 60\left(\dfrac{\bar{b} - \bar{g}}{\bar{U} - \bar{L}} + 3\right) &\text{ if \(\bar{U} = \bar{b}\) or \(\bar{U} = \bar{b} = \bar{g}\), \(\bar{L} = \bar{r}\) and \(\bar{k} = 3\)},\\ 60\left(\dfrac{\bar{r} - \bar{b}}{\bar{U} - \bar{L}} + 5\right) &\text{ if \(\bar{U} = \bar{b}\) or \(\bar{U} = \bar{b} = \bar{r}\), \(\bar{L} = \bar{g}\) and \(\bar{k} = 4\)},\\ 60\left(\dfrac{\bar{r} - \bar{b}}{\bar{U} - \bar{L}} + 5\right) &\text{ if \(\bar{U} = \bar{r}\) or \(\bar{U} = \bar{r} = \bar{b}\), \(\bar{L} = \bar{g}\) and \(\bar{k} = 5\)},\\ 60\left(\dfrac{\bar{g} - \bar{r}}{\bar{U} - \bar{L}} + 1\right) &\text{ if \(\bar{U} = \bar{r}\) or \(\bar{U} = \bar{r} = \bar{g}\), \(\bar{L} = \bar{b}\) and \(\bar{k} = 0\)},\\ 60\left(\dfrac{\bar{g} - \bar{r}}{\bar{U} - \bar{L}} + 1\right) &\text{ if \(\bar{U} = \bar{g}\) or \(\bar{U} = \bar{g} = \bar{r}\), \(\bar{L} = \bar{b}\) and \(\bar{k} = 1\)},\\ 60\left(\dfrac{\bar{b} - \bar{g}}{\bar{U} - \bar{L}} + 3\right) &\text{ if \(\bar{U} = \bar{g}\) or \(\bar{U} = \bar{g} = \bar{b}\), \(\bar{L} = \bar{r}\) and \(\bar{k} = 2\)}, \end{cases}\\ &= \begin{cases} 60\left(\dfrac{g - b}{U - L} + 3\right) &\text{ if \(U = U + L - b\;(L = b)\) or \(U = U + L - b = U + L - g\;(L = b = g)\), \(L = U + L - r\;(U = r)\) and \(\bar{k} = 3\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) &\text{ if \(U = U + L - b\;(L = b)\) or \(U = U + L - b = U + L - r\;(L = b = r)\), \(L = U + L - g\;(U = g)\) and \(\bar{k} = 4\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) &\text{ if \(U = U + L - r\;(L = r)\) or \(U = U + L - r = U + L - b\;(L = r = b)\), \(L = U + L - g\;(U = g)\) and \(\bar{k} = 5\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) &\text{ if \(U = U + L - r\;(L = r)\) or \(U = U + L - r = U + L - g\;(L = r = g)\), \(L = U + L - b\;(U = b)\) and \(\bar{k} = 0\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) &\text{ if \(U = U + L - g\;(L = g)\) or \(U = U + L - g = U + L - r\;(L = g = r)\), \(L = U + L - b\;(U = b)\) and \(\bar{k} = 1\)},\\ 60\left(\dfrac{g - b}{U - L} + 3\right) &\text{ if \(U = U + L - g\;(L = g)\) or \(U = U + L - g = U + L - b\;(L = g = b)\), \(L = U + L - r\;(U = r)\) and \(\bar{k} = 2\)}. \end{cases}\end{align*}\] ちなみに、条件文を \(U, L\) の同値関係が逆転することを見越して多少調整していることに注意。 ここで、条件が一致する場合分けで両者の差をみれば、 \[\begin{align*}\bar{h}(\bar{r},\bar{g},\bar{b},\bar{k}) - h(r,g,b,k) &= \begin{cases} 60\left(\dfrac{g - b}{U - L} + 3\right) - 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = r\), \(L = b\) or \(L = b = g\) and \(\bar{k} = 3, k = 0\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) - 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = g\), \(L = b\) or \(L = b = r\) and \(\bar{k} = 4, k = 1\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) - 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = g\), \(L = r\) or \(L = r = b\) and \(\bar{k} = 5, k = 2\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) - 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = b\), \(L = r\) or \(L = r = g\) and \(\bar{k} = 0, k = 3\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) - 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = b\), \(L = g\) or \(L = g = r\) and \(\bar{k} = 1, k = 4\)},\\ 60\left(\dfrac{g - b}{U - L} + 3\right) - 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = r\), \(L = g\) or \(L = g = b\) and \(\bar{k} = 2, k = 5\)}, \end{cases}\\ &= \begin{cases} 60\left(\dfrac{g - b}{r - b} - \dfrac{g - r}{r - b} + 3 - 1\right) = 60\left( 1 + 3 - 1\right) = 180,\\ 60\left(\dfrac{b - r}{g - b} - \dfrac{g - r}{g - b} + 5 - 1\right) = 60\left(-1 + 5 - 1\right) = 180,\\ 60\left(\dfrac{b - r}{g - r} - \dfrac{b - g}{g - r} + 5 - 3\right) = 60\left( 1 + 5 - 3\right) = 180,\\ 60\left(\dfrac{r - g}{b - r} - \dfrac{b - g}{b - r} + 1 - 3\right) = 60\left(-1 + 1 - 3\right) = 180 \mod 360,\\ 60\left(\dfrac{r - g}{b - g} - \dfrac{r - b}{b - g} + 1 - 5\right) = 60\left( 1 + 1 - 5\right) = 180 \mod 360,\\ 60\left(\dfrac{g - b}{r - g} - \dfrac{r - b}{r - g} + 3 - 5\right) = 60\left(-1 + 3 - 5\right) = 180 \mod 360. \end{cases}\end{align*}\] ゆえに、以下が確かに成立している。 \[\bar{h}(\bar{r},\bar{g},\bar{b},\bar{k}) = h(r,g,b,k) + 180 \mod 360.\] \(k\), \(\bar{k}\) のすべての場合において成り立っており、\(j = \lfloor\frac{k}2\rfloor\) であるので、先の \(j\) においても成立する。

反転色

反転色 \(\tilde{\mathcal{C}}\) の HSL を \(\mathcal{C}\) の HSL で以下のように定義することができる。 \[\tilde{h} = h + 180 \mod 360, \quad \tilde{s} = s, \quad \tilde{s'} = s', \quad \tilde{l} = 1 - l.\]

反転色 \(\tilde{\mathcal{C}}\) の RGB 値 \(\tilde{r}, \tilde{g}, \tilde{b}\) は HSL を求めなくても以下のように得ることができる。 \[\left(\;\begin{align*} \tilde{r} = 1 - r,\\ \tilde{g} = 1 - g,\\ \tilde{b} = 1 - b. \end{align*}\right.\]

確かに、色 \(\tilde{\mathcal{C}}\) の式として \(\tilde{r}, \tilde{g}, \tilde{b}\) を代入すると、以下が成り立っていることがわかる。 \[\tilde{L} = \min\left\{\tilde{r}, \tilde{g}, \tilde{b}\right\} = \min\left\{1 - r, 1 - g, 1 - b\right\} = 1 - U, \quad \tilde{U} = \max\left\{\tilde{r}, \tilde{g}, \tilde{b}\right\} = \max\left\{1 - r, 1 - g, 1 - b\right\} = 1 - L,\] \[\tilde{s} = \dfrac{\tilde{U} - \tilde{L}}{1 - |\tilde{U} + \tilde{L} - 1|} = \dfrac{1 - L - 1 + U}{1 - |1 - L + 1 - U - 1|} = \dfrac{U - L}{1 - |U + L - 1|} = s,\quad \tilde{s'} = \tilde{U} - \tilde{L} = 1 - L - 1 + U = U - L = s',\] \[\tilde{l} = \dfrac{\tilde{U} + \tilde{L}}{2} = \dfrac{1 - L + 1 - U}{2} = 1 - \dfrac{L + U}{2} = 1 - l.\] 先の補色と同様に導出すれば、 \[\tilde{h} = h + 180 \mod 360.\]

いや「同様」と言っても途中は微妙に異なるので、やはり念の為、以上を確認しておく。

まず、先の場合分けを細分化した式を再録しておく。 \[h(r,g,b,k) = \begin{cases} 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = r\), \(L = b\) or \(L = b = g\) and \(k = 0\)},\\ 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = g\), \(L = b\) or \(L = b = r\) and \(k = 1\)},\\ 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = g\), \(L = r\) or \(L = r = b\) and \(k = 2\)},\\ 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = b\), \(L = r\) or \(L = r = g\) and \(k = 3\)},\\ 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = b\), \(L = g\) or \(L = g = r\) and \(k = 4\)},\\ 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = r\), \(L = g\) or \(L = g = b\) and \(k = 5\)}. \end{cases}\] 反転色 \(\tilde{\mathcal{C}}\) の RGB 値 \(\tilde{r}, \tilde{g}, \tilde{b}\) をこの細分化した場合分けの式に代入すると、 \[\begin{align*}\tilde{h}(\tilde{r},\tilde{g},\tilde{b},\tilde{k}) &= \begin{cases} 60\left(\dfrac{\tilde{b} - \tilde{g}}{\tilde{U} - \tilde{L}} + 3\right) &\text{ if \(\tilde{U} = \tilde{b}\) or \(\tilde{U} = \tilde{b} = \tilde{g}\), \(\tilde{L} = \tilde{r}\) and \(\tilde{k} = 3\)},\\ 60\left(\dfrac{\tilde{r} - \tilde{b}}{\tilde{U} - \tilde{L}} + 5\right) &\text{ if \(\tilde{U} = \tilde{b}\) or \(\tilde{U} = \tilde{b} = \tilde{r}\), \(\tilde{L} = \tilde{g}\) and \(\tilde{k} = 4\)},\\ 60\left(\dfrac{\tilde{r} - \tilde{b}}{\tilde{U} - \tilde{L}} + 5\right) &\text{ if \(\tilde{U} = \tilde{r}\) or \(\tilde{U} = \tilde{r} = \tilde{b}\), \(\tilde{L} = \tilde{g}\) and \(\tilde{k} = 5\)},\\ 60\left(\dfrac{\tilde{g} - \tilde{r}}{\tilde{U} - \tilde{L}} + 1\right) &\text{ if \(\tilde{U} = \tilde{r}\) or \(\tilde{U} = \tilde{r} = \tilde{g}\), \(\tilde{L} = \tilde{b}\) and \(\tilde{k} = 0\)},\\ 60\left(\dfrac{\tilde{g} - \tilde{r}}{\tilde{U} - \tilde{L}} + 1\right) &\text{ if \(\tilde{U} = \tilde{g}\) or \(\tilde{U} = \tilde{g} = \tilde{r}\), \(\tilde{L} = \tilde{b}\) and \(\tilde{k} = 1\)},\\ 60\left(\dfrac{\tilde{b} - \tilde{g}}{\tilde{U} - \tilde{L}} + 3\right) &\text{ if \(\tilde{U} = \tilde{g}\) or \(\tilde{U} = \tilde{g} = \tilde{b}\), \(\tilde{L} = \tilde{r}\) and \(\tilde{k} = 2\)}, \end{cases}\\ &= \begin{cases} 60\left(\dfrac{g - b}{U - L} + 3\right) &\text{ if \(U = r\), \(L = b\) or \(L = b = g\) and \(\tilde{k} = 3\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) &\text{ if \(U = g\), \(L = b\) or \(L = b = r\) and \(\tilde{k} = 4\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) &\text{ if \(U = g\), \(L = r\) or \(L = r = b\) and \(\tilde{k} = 5\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) &\text{ if \(U = b\), \(L = r\) or \(L = r = g\) and \(\tilde{k} = 0\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) &\text{ if \(U = b\), \(L = g\) or \(L = g = r\) and \(\tilde{k} = 1\)},\\ 60\left(\dfrac{g - b}{U - L} + 3\right) &\text{ if \(U = r\), \(L = g\) or \(L = g = b\) and \(\tilde{k} = 2\)}. \end{cases}\end{align*}\] ちなみに、条件文を \(U, L\) の同値関係が逆転することを見越して多少調整していることに注意。 ここで、条件が一致する場合分けで両者の差をみれば、 \[\begin{align*}\tilde{h}(\tilde{r},\tilde{g},\tilde{b},\tilde{k}) - h(r,g,b,k) &= \begin{cases} 60\left(\dfrac{g - b}{U - L} + 3\right) - 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = r\), \(L = b\) or \(L = b = g\) and \(\tilde{k} = 3, k = 0\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) - 60\left(\dfrac{g - r}{U - L} + 1\right) &\text{ if \(U = g\), \(L = b\) or \(L = b = r\) and \(\tilde{k} = 4, k = 1\)},\\ 60\left(\dfrac{b - r}{U - L} + 5\right) - 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = g\), \(L = r\) or \(L = r = b\) and \(\tilde{k} = 5, k = 2\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) - 60\left(\dfrac{b - g}{U - L} + 3\right) &\text{ if \(U = b\), \(L = r\) or \(L = r = g\) and \(\tilde{k} = 0, k = 3\)},\\ 60\left(\dfrac{r - g}{U - L} + 1\right) - 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = b\), \(L = g\) or \(L = g = r\) and \(\tilde{k} = 1, k = 4\)},\\ 60\left(\dfrac{g - b}{U - L} + 3\right) - 60\left(\dfrac{r - b}{U - L} + 5\right) &\text{ if \(U = r\), \(L = g\) or \(L = g = b\) and \(\tilde{k} = 2, k = 5\)}. \end{cases}\\ &= \begin{cases} 60\left(\dfrac{g - b}{r - b} - \dfrac{g - r}{r - b} + 3 - 1\right) = 60\left( 1 + 3 - 1\right) = 180,\\ 60\left(\dfrac{b - r}{g - b} - \dfrac{g - r}{g - b} + 5 - 1\right) = 60\left(-1 + 5 - 1\right) = 180,\\ 60\left(\dfrac{b - r}{g - r} - \dfrac{b - g}{g - r} + 5 - 3\right) = 60\left( 1 + 5 - 3\right) = 180,\\ 60\left(\dfrac{r - g}{b - r} - \dfrac{b - g}{b - r} + 1 - 3\right) = 60\left(-1 + 1 - 3\right) = 180 \mod 360,\\ 60\left(\dfrac{r - g}{b - g} - \dfrac{r - b}{b - g} + 1 - 5\right) = 60\left( 1 + 1 - 5\right) = 180 \mod 360,\\ 60\left(\dfrac{g - b}{r - g} - \dfrac{r - b}{r - g} + 3 - 5\right) = 60\left(-1 + 3 - 5\right) = 180 \mod 360. \end{cases}\end{align*}\] ゆえに、以下が確かに成立している。 \[\tilde{h}(\tilde{r},\tilde{g},\tilde{b},\tilde{k}) = h(r,g,b,k) + 180 \mod 360.\] \(k\), \(\tilde{k}\) のすべての場合において成り立っており、\(j = \lfloor\frac{k}2\rfloor\) であるので、先の \(j\) においても成立する。

HSL から RGB へ変換

先の逆変換となるが、変数の定義はそのままで、 円柱モデルのときは、 \[ L = l - \dfrac12\left(1 - \left|2l - 1\right|\right)s, \quad U = l + \dfrac12\left(1 - \left|2l - 1\right|\right)s. \] 円錐モデルのときは、 \[ L = l - \dfrac12s', \quad U = l + \dfrac12s'. \] そして、以下のように求めることができる。 \[I=\dfrac{h}{60},\quad i=\lfloor I\rfloor\] \[(r, g, b) = \begin{cases} (U,& L-(U-L)(0-I),& L) &\text{ if \(i = 0\)},\\ (L+(U-L)(2-I),& U,& L) &\text{ if \(i = 1\)},\\ (L,& U,& L-(U-L)(2-I)) &\text{ if \(i = 2\)},\\ (L,& L+(U-L)(4-I),& U) &\text{ if \(i = 3\)},\\ (L-(U-L)(4-I),& L,& U) &\text{ if \(i = 4\)},\\ (U,& L,& L+(U-L)(6-I)) &\text{ if \(i = 5\)}. \end{cases}\]

この式の意味は、 \(i=5, 0\) のとき \(h = 0 \degree, r = U\) を中心に遠ざかる負の色相方向では \(b\) を、正の色相方向では \(g\) を増加、 \(i=1, 2\) のとき \(h = 120 \degree, g = U\) を中心に遠ざかる負の色相方向では \(r\) を、正の色相方向では \(b\) を増加、 \(i=3, 4\) のとき \(h = 240 \degree, b = U\) を中心に遠ざかる負の色相方向では \(g\) を、正の色相方向では \(r\) を増加する混色を表している。

補色

色 \(\mathcal{C}\) の補色 \(\bar{\mathcal{C}}\) における、 \[\bar{L} = L,\quad \bar{U} = U,\] 及び、HSL から RGB へ変換の色相の式に補色の定義 \(\bar{h} = h + 180 \mod 360\) を施して、RGB による補色の式と等しくなることを確認できる。 \[\bar{I}=\dfrac{\bar{h}}{60}=\dfrac{h + 180 \mod 360}{60}=I + 3 \mod 6,\quad \bar{i}=\lfloor \bar{I}\rfloor=\lfloor I\rfloor + 3 \mod 6=i + 3 \mod 6\] \[(\bar{r}, \bar{g}, \bar{b}) = \begin{cases} (L,& L+(U-L)(1-I),& U) &\text{ if \(\bar{i} = 3, i = 0\)},\\ (L-(U-L)(1-I),& L,& U) &\text{ if \(\bar{i} = 4, i = 1\)},\\ (U,& L,& L+(U-L)(3-I)) &\text{ if \(\bar{i} = 5, i = 2\)},\\ (U,& L-(U-L)(3-I),& L) &\text{ if \(\bar{i} = 0, i = 3\)},\\ (L+(U-L)(5-I),& U,& L) &\text{ if \(\bar{i} = 1, i = 4\)},\\ (L,& U,& L-(U-L)(5-I)) &\text{ if \(\bar{i} = 2, i = 5\)}. \end{cases}\] 以下が成り立っていることがわかる。 \[\begin{cases} b + \bar{b} = r + \bar{r} = U + L,\, &g + \bar{g} = L-(U-L)(0-I) + L+(U-L)(1-I)&= 2L+(U-L) = U + L, &\text{ if \(\bar{i} = 3, i = 0\)},\\ g + \bar{g} = b + \bar{b} = U + L,\, &r + \bar{r} = L+(U-L)(2-I) + L-(U-L)(1-I)&= 2L+(U-L) = U + L, &\text{ if \(\bar{i} = 4, i = 1\)},\\ r + \bar{r} = g + \bar{g} = U + L,\, &b + \bar{b} = L-(U-L)(2-I) + L+(U-L)(3-I)&= 2L+(U-L) = U + L, &\text{ if \(\bar{i} = 5, i = 2\)},\\ b + \bar{b} = r + \bar{r} = U + L,\, &g + \bar{g} = L+(U-L)(4-I) + L-(U-L)(3-I)&= 2L+(U-L) = U + L, &\text{ if \(\bar{i} = 0, i = 3\)},\\ g + \bar{g} = b + \bar{b} = U + L,\, &r + \bar{r} = L-(U-L)(4-I) + L+(U-L)(5-I)&= 2L+(U-L) = U + L, &\text{ if \(\bar{i} = 1, i = 4\)},\\ r + \bar{r} = g + \bar{g} = U + L,\, &b + \bar{b} = L+(U-L)(6-I) + L-(U-L)(5-I)&= 2L+(U-L) = U + L, &\text{ if \(\bar{i} = 2, i = 5\)}. \end{cases}\] よって、確かに \((\bar{r}, \bar{g}, \bar{b}) = (U + L - r, U + L - g, U + L - b)\) であった。

反転色

色 \(\mathcal{C}\) の反転色 \(\tilde{\mathcal{C}}\) における、 \[\tilde{L} = 1 - U,\quad \tilde{U} = 1 - L,\] 及び、HSL から RGB へ変換の色相の式に反転色の定義 \(\tilde{h} = h + 180 \mod 360\) を施して、RGB による反転色の式と等しくなることを確認できる。 \[\tilde{I}=\dfrac{\tilde{h}}{60}=\dfrac{h + 180 \mod 360}{60}=I + 3 \mod 6,\quad \tilde{i}=\lfloor \tilde{I}\rfloor=\lfloor I\rfloor + 3 \mod 6=i + 3 \mod 6\] \[(\tilde{r}, \tilde{g}, \tilde{b}) = \begin{cases} (1-U,& 1-U+(U-L)(1-I),& 1-L) &\text{ if \(\tilde{i} = 3, i = 0\)},\\ (1-U-(U-L)(1-I),& 1-U,& 1-L) &\text{ if \(\tilde{i} = 4, i = 1\)},\\ (1-L,& 1-U,& 1-U+(U-L)(3-I)) &\text{ if \(\tilde{i} = 5, i = 2\)},\\ (1-L,& 1-U-(U-L)(3-I),& 1-U) &\text{ if \(\tilde{i} = 0, i = 3\)},\\ (1-U+(U-L)(5-I),& 1-L,& 1-U) &\text{ if \(\tilde{i} = 1, i = 4\)},\\ (1-U,& 1-L,& 1-U-(U-L)(5-I)) &\text{ if \(\tilde{i} = 2, i = 5\)}. \end{cases}\] 以下が成り立っていることがわかる。 \[\begin{cases} b + \tilde{b} = r + \tilde{r} = 1,\, &g + \tilde{g} = L-(U-L)(0-I) + 1-U+(U-L)(1-I) = L-U+1+(U-L) = 1, &\text{ if \(\tilde{i} = 3, i = 0\)},\\ g + \tilde{g} = b + \tilde{b} = 1,\, &r + \tilde{r} = L+(U-L)(2-I) + 1-U-(U-L)(1-I) = L-U+1+(U-L) = 1, &\text{ if \(\tilde{i} = 4, i = 1\)},\\ r + \tilde{r} = g + \tilde{g} = 1,\, &b + \tilde{b} = L-(U-L)(2-I) + 1-U+(U-L)(3-I) = L-U+1+(U-L) = 1, &\text{ if \(\tilde{i} = 5, i = 2\)},\\ b + \tilde{b} = r + \tilde{r} = 1,\, &g + \tilde{g} = L+(U-L)(4-I) + 1-U-(U-L)(3-I) = L-U+1+(U-L) = 1, &\text{ if \(\tilde{i} = 0, i = 3\)},\\ g + \tilde{g} = b + \tilde{b} = 1,\, &r + \tilde{r} = L-(U-L)(4-I) + 1-U+(U-L)(5-I) = L-U+1+(U-L) = 1, &\text{ if \(\tilde{i} = 1, i = 4\)},\\ r + \tilde{r} = g + \tilde{g} = 1,\, &b + \tilde{b} = L+(U-L)(6-I) + 1-U-(U-L)(5-I) = L-U+1+(U-L) = 1, &\text{ if \(\tilde{i} = 2, i = 5\)}. \end{cases}\] よって、確かに \((\tilde{r}, \tilde{g}, \tilde{b}) = (1- r, 1 - g, 1 - b)\) であった。

RGB 色空間、HSL 色空間、補色、反転色

上記の算出式で、\(\mathcal{C}\) の HSL と RGB 相互変換、補色 \(\bar{\mathcal{C}}\), 反転色 \(\tilde{\mathcal{C}}\) を動的に求める。着色は HSL なら hsl スタイルで、RGB なら rgb スタイルで行っている。

リアルタイムで様子が見れるので、かなり便利だ。ちなみに、後に紹介される「色名」がある RGB, HSL 値なら名前が付記される。

パソコン・カラーの歴史から学ぶ

本題に入る前に、昨今のウェブにおける色の表記方法が説明に都合がよいので説明をしておく。

色は光の三原色、赤、緑、青 (R: Red, G: Green, B: Blue) の組み合わせで記述する。それぞれが 256 階調、つまり、0〜255 は 10 進法だが、16 進法で 0x00〜0xFF を「#」の後に RGB の順に並べて表すと、黒、赤、緑、白は以下のように表せる。

#000000 ブラック
#FF0000 レッド
#00FF00 グリーン
#0000FF ブルー
#FFFFFF ホワイト

R, G, B がそれぞれすべて 16 階調としても表すことができ、以下は R, G, B 値がそれぞれすべて等値なので 4 階調のグレースケールを表している。ちなみに、例えば 55₍₂₅₆₎/100₍₂₅₆₎ = 5₍₁₆₎/10₍₁₆₎ であることに留意。

#000 ブラック
#555 ダークグレー
#AAA ライトグレー
#FFF ホワイト

注意事項として、これから紹介する各アーキテクチャにおける色の表現方法とは無関係であり、昨今の表記方法を便宜的に添えているまでである。

テキスト 2 色

0123456789ABCDEF
|              |

2 色でテキストの表示を一画面に 1 行 40 文字が 25 行だとすると、1 文字当たり白黒のオンオフで 1 ビット × 40 × 25 = 1000 ビット、とはならない。何の文字を表すかも表現しなくてはならないので、1 文字当たり 256 (2⁸) 種類の文字コード（つまり、1 バイト）を表すとすると（文字コード 0 のみが黒、それ以外が白、を約束事として）、1 文字当たり 1 バイト × 40 × 25 = 1000 バイト、つまり 1k バイトのテキスト VRAM が必要となる。

レガシーパソコンの 2 色の代表例として、1978 年 12 月 SHARP MZ-80K があげられ、確かに、仕様には「テキスト VRAM 1k バイト」となっている。

グラフィックス・グレースケール

グレー 4 階調

00 #000 ブラック
01 #555 ダークグレー
10 #AAA ライトグレー
11 #FFF ホワイト

0123456789ABCDEF
|    |    |    |

グレースケールでグラフィックスの表示を一画面に縦横 320×200 ピクセルだとすると、1 ピクセル当たり 4 階調 (2²) だと 2 ビット × 320 × 200 = 128000 ビット = 32000 バイト = 32k バイトのグラフィックス RAM が必要となる。

グレイスケールの携帯ゲーム機であれば、1989 年 4 月 Nintendo GAME BOY があげられる。4 階調モノクロ 160×144 ピクセルとのことなので、1 ピクセル当たり 4 (2²) 階調で 2 ビット × 160 × 144 = 46080 ビット = 5760 バイト = 約 6k バイトのグラフィックス RAM が必要となる。仕様では VRAM 8k バイトとあるので大体オーダーは合っている。

グレー 8 階調

もう一つグレイスケールの携帯ゲーム機、1999 年 3 月 BANDAI WonderSwan もあげられる。8 階調モノクロ 224×144 ピクセルとのことなので、1 ピクセル当たり 8 (2³) 階調で 3 ビット × 224 × 144 = 96768 ビット = 12096 バイト = 約 12k バイトのグラフィックス RAM が必要となる。仕様では VRAM 16k バイトとあったので大体オーダーは合っている。

グレー 16 階調

グレースケールのコンピュータとしては、1988 年 1 月 SONY NEWS NWS-711 があげられる。正確な仕様書が見つからなかったが、解像度も階調はもっと高かったはずである。確か 16 階調モノクロ縦横 1280×1280 ピクセルだとすると、1 ピクセル当たり 16 (2⁴) 階調で 4 ビット × 1280 × 1280 = 6553600 ビット = 819200 バイト = 800Ki バイトのグラフィックス RAM が必要となる。

テキストカラー 8 色

テキストカラー 8 色の場合、例えば、文字の前景色だけでなく背景色、さらに加えて点滅等を含め、これらをまとめた「属性」を表すようにすると、前景 8 (2³)色 + 背景 8 (2³)色 + 点滅等 1〜2 ビット = 3 + 3 + 2 ビット = 8 ビット = 1 バイトが１文字当たりの色で、1 文字当たり 256 (2⁸) 種類の文字コード（つまり、1 バイト）が必要となる。

このとき、8 色ベースの属性でテキストの表示を一画面に 1 行 40 文字が 25 行だとすると、1 文字当たりの文字コードと属性で 1 + 1 バイト × 40 × 25 = 2000 バイト、つまり 2k バイトのテキスト VRAM が必要となる。

1982/11 SHARP MZ-700

レガシーパソコンの 8 色ベースのテキストの例として、1982 年 11 月 SHARP MZ-700 があげられ、仕様には「テキスト VRAM 4k バイト」となっているが「D000h～D3E7h にディスプレイコード、D800h～DBE7h にアトリビュート」とあるので、これらはちょうど 2k バイトである。

但し、背景色を 1 文字毎に指定できる機種は MZ-700 他において珍しく、アトリビュート 1 バイト内にそれ以外の、反転やその他装飾を詰め込むものが主流であった。

グラフィックス・カラー 8〜16, 256, 65536 色

先の namco 「XEVIOUS」ゲーム画面が、比較のためにちょうど都合がよいと思ったので、まず、アーケード「XEVIOUS」のそれぞれ代表的な色数のレガシーコンピュータ移植版を紹介する。

ちなみに、各機種にて色数と解像度は、筆者がおそらくこの色数と解像度のモードで移植されたのだろう、という推測で記したものである。また、各機種はさまざまな色数と解像度と面数のモードをそれぞれ有しており、アーケードゲームの移植に都合のよいモードが選ばれたのだろうと思われるが、誤りがあればご指摘いただければ幸甚である。

8 色カラー

8 色カラーでグラフィックスの表示を一画面に縦横 320×200 ピクセルだとすると、1 ピクセル当たり 8 (2³)色で 3 ビット × 320 × 200 = 192000 ビット = 24000 バイト = 24k バイトのグラフィックス RAM が必要となる。

1982/11 SHARP X1

レガシーパソコンの 8 色グラフィックスの例として、1982 年 11 月 SHARP X1 があげられ、「4000h～FFFFh が VRAM」とあり、320×200 ピクセルを 2 面もっているので、これはちょうど 24K × 2 の 48k バイトである。

16 色カラー、RGB 各 16 階調カラー、パレット

16 色カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 16 (2⁴)色で 4 ビット × 640 × 400 = 1024000 ビット = 128000 バイト = 128k バイトのグラフィックス RAM が必要となる。

上記カラーバーの例では、輝度の選択肢が増えただけで「色相」の種類は増えていない。例えば、この調子で輝度の階調を増やしていっても一定数の色相の暗い輝度の種類が増えていくだけである。

試しにこのまま推し進めて、色相は倍の 16 階調、輝度も 16 階調で 16×16 = 256 色のカラーテーブルを作成してみる。

256 色も使って同じ色相に応じた輝度の低いバリエーションがあるだけで、豊かな色彩を準備できたとは言い難い。 但し、このような色の種類にも用途はあり、注目すべきは人間が隣り合う色相が区別しやすいので、グラフなどにおいて線種を色で区別するなどの用途がある。

このテーブルのグレースケール以外のカラーについては、のちのカラーテーブルに登場する「ビビッドカラー」と同等なのだが、輝度の値域を変えることで「パステルカラー」とも同等になる（「🞂」ボタンを押すとそのカラーテーブルが表示）。

さらに、輝度の値域を変えることで「ビビッドカラー」及び「パステルカラー」双方に渡るグラデーションにもなる（「🞂」ボタンを押すとそのカラーテーブルが表示）。

これらは HSL 色空間によって簡単にアルゴリズムで自動的に算出できている。

登場したレガシーコンピュータ

上記、ゲーム画面を例として登場したレガシーコンピュータの貴重な写真を引用しておく。発売順などではなく、想定された VRAM のサイズとした。

VRAM 概算

色数に応じて必要な VRAM のバイト数のオーダー感覚を養うために、簡単だがいくつかの例を示す。

色数ベースでの VRAM 概算の例を示す。

• 8 色カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 8 (2³)色で 3 ビット × 640 × 400 = 768000 ビット = 96000 バイト = 96k バイトのグラフィックス RAM が必要となる。
• 16 色カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 16 (2⁴)色で 4 ビット × 640 × 400 = 1024000 ビット = 128000 バイト = 128k バイトのグラフィックス RAM が必要となる。
• 256 色カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 256 (2⁸)色で 8 ビット × 640 × 400 = 2048000 ビット = 256000 バイト = 256k バイトのグラフィックス RAM が必要となる。
• 65536 色カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 65536 (2¹⁶)色で 16 ビット × 640 × 400 = 4096000 ビット = 512000 バイト = 512k バイトのグラフィックス RAM が必要となる。

階調ベースでの VRAM 概算の例を示す。

• 8 色 (RGB 各 2 階調) カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 8 (2³)色で 3 ビット × 640 × 400 = 768000 ビット = 96000 バイト = 96k バイトのグラフィックス RAM が必要となる。
• 512 色 (RGB 各 8 階調) カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 512 (8³ = 2⁹)色で 9 ビット × 640 × 400 = 2304000 ビット = 288000 バイト = 288k バイトのグラフィックス RAM が必要となる。
• 4096 色 (RGB 各 16 階調) カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 4096 (16³ = 2¹²)色で 12 ビット × 640 × 400 = 3072000 ビット = 384000 バイト = 384k バイトのグラフィックス RAM が必要となる。
• 16777216 色 (RGB 各 256 階調) カラーでグラフィックスの表示を一画面に縦横 640×400 ピクセルだとすると、1 ピクセル当たり 16777216 (256³ = 2²⁴)色で 24 ビット × 640 × 400 = 6144000 ビット = 768000 バイト = 768k バイトのグラフィックス RAM が必要となる。

9, 12 ビットなど 8 の倍数ビットでないものは計算機によって半端なので、R, G, B の階調が等しくはなかったり (R: 5, G: 6, B: 5 = 16 ビット)、輝度など他の属性とともにバイト単位に情報を詰めて記憶域に格納したりする。前者は人間の目の特性に合っており合理的だが、後者は、例えば、SHARP X68000 の 65536 色とは、RGB 各 32 階調カラーで 15 = 5 × 3 ビットに加えて明暗の輝度 1 ビットで、1 ピクセルあたり 16 ビット = 2 バイトという色表現を行っている。但しこれは、プログラミングが容易になる反面、RGB 値を変えれば輝度は調整できるので冗長な情報表現だ。例えば、グリーン #00FF00 の HSL の輝度 50 を半分の 25 に下げたものはダークグリーン #007F00 である。尤もハードウェア的に RGB 値以外の輝度調整が可能になっているのであればその限りではない。

パレット、何色中何色、および色空間

さて、昨今のコンピュータの進歩によって不要となった「パレット」という仕組みが登場している。これは当時は RAM が高価で合ったため表現できる RGB 値の階調をすべてのピクセルに割り当てるなどということは現実ではなかったのである。よって、一度パレットという変換テーブルを用いて備わっている VRAM に収まるように「同時に表示可能」な色数を抑えているというわけである。後に登場する「WEB セーフカラー」にも密接に関連する話題であるが、ある色数に色彩を分布させるというのは様々な場面で必要となるので、ここでいくつか例を示そう。

RGB グラデーションカラー

人間が認識できる光の三原色 RGB にそれぞれ階調を設けて、パレットを表で用意してみる。3 次元情報なので本来なら「立方体」で現すべきだが、そこまでではないので単に横に並べる。以下、小さい平面の x-y 軸が G, B で、その横方向への並びが R である。

左上と右下に黒白が割り当てられている。その間に RGB カラーが均等に分布する。この色空間モデルはあまり人間にわかりやすい空間の使い方とは言えないので、次に HSL 色空間を用いる。

HSL グラデーションカラー

HSL (Hue: 色相, Saturation: 彩度, Lightness: 輝度) 色空間の円柱モデルが、昨今のウェブ技術で簡単に扱えるようになった。これは光の三原色 RGB に全単射な色モデルである。HSL それぞれ階調を設けて、パレットを表で用意してみる。3 次元情報なので本来なら「円柱」で現すべきだが、そこまでではないので単に横に並べる。以下、小さい平面の x-y 軸が L, H で、その横方向への並びが S である。

数値処理上、黒白を割り当てると空間に無駄が生じたり複雑になるので、黒白グレースケールは設けていない。パレットとしての実用上は黒白グレースケールも必要であろうから、計算機に都合が良い 2 進法でキリのよい数に少し足りない色数にしてあるので、64 - 60、256 - 252 = 4 色 を黒白グレースケールに別途割り当てるといった実用が考えられるだろう。尤も昨今はそういった必要性も少ないだろうが、グラフ等で色に番号付けが必要になるときには依然として有用である。

登場したゲームの動画

上記に登場した XEVIOUS の配信されている動画を紹介しておく。但し、上記の低スペックマシンからの順序だと本物の様子がわからないと思われるので、本家から低スペックへと動画を貼っておく。また、昨今のマシン上のエミュレータによる実現については除いたつもりである。本項で取り上げなかったマシンも混ざっているのは、どうしても心情的に外すことが出来なかった。

マシンの性能を極限まで引き出したものから、余裕でこなしているもの、などさまざまである。

release	vender		model			VRAM
1978/07	Apple		Apple Ⅱ			8kB
1981/11	NEC		PC-6001			16kB
1982/10	NEC		PC-9801			256kB
1982/11	Fujitsu		FM-7			48kB
1982/11	SHARP		MZ-700			4kB
1982/11	SHARP		X1			48kB
1982/12	namco		Galaga			unknown
1983/07	NEC		PC-6001mkⅡ		16kB
1983/07	Nintendo	NES(Family Computer)	2kB
1985/01	NEC		PC-8001mkⅡSR		48kB
1985/10	SHARP		MZ-2500			64kB
1987/03	SHARP		X68000			512kB

ちなみに、PC-6001、ファミリーコンピュータ(NES)、Apple Ⅱ については RGB による色制御ではなく NTSC ビデオ信号の特性等を利用した色彩表現技術であるため一概には他と比べられないのだが、便宜上 VRAM のサイズを記載してある。

さまざまなカラーテーブル

以上、RGB, HSL 色空間によるカラーリングを中心に解説してきたが、人類の歴史で自然と「名前が付けられた色」というものも大変重要である。色の名前に対する RGB 値の定義などはさまざまだが、昨今のウェブ技術においては色名の RGB 値が CSS (Cascading Style Sheets) の分野で定義されており有用である。それが後段で紹介する「W3C による色名」である。さらに、日本の伝統色など、長い歴史で名付けられてきた色などはウェブデザインにも（色名を直接的には使うというわけではなく）有用である。

さらに、先のパレットで紹介したような、HSL 色空間を利用してアルゴリズムによって色の段階を設け、ある色数に割り当てておくことも有用である。後段の「モノトーン（グレースケール）」「グラデーション」「パステルカラー」「ビビッドカラー」は単純なアルゴリズムで実現可能なパレット例として既に紹介したが、後段の「WEB セーフカラー」も簡単なアルゴリズムによって実現可能である。

ちなみに、以上のパレット例や伝統色はサイト「HTML5&CSS3」を大いに参考にさせて頂いた。ここに感謝を申し上げる。

下表において、小さい第１列が色名による背景色の指定であり、それで着色されていないセルがブラウザでサポートされていない色名ということになる。小さい第２列は上記の RGB2HSL 変換による HSL 色空間による背景色の指定をついでに行った。小さい第３列はその逆変換を確認するためのセルである。残りの大きいセルは、前景色、背景色が白黒の違いでその色が見やすいかを確認するための４セルである。着色していない第８列に RGB2HSL 変換結果を印字した。また、表題があっても表を印字していない節は、誌面の関係で表示をオフにしたものである（技術実証のためだが表の構築に時間がかかるので details, summary タグで閉じてある）。

X11 色名

X11/rgb.txt に登録されている RGB 値と色名 659 色には、大文字を使い空白を含む名前と同色の空白を除去した名前が多く存在する。命名の揺らぎをある程度抑えつつ利便性も担保するちょっとした工夫が今なお使われている理由なのだろう。

⌗ rgb.txt

X11 色名に W3C による追加・変更

X11/rgb.txt で大文字を小文字に変換し空白を除去し、W3C が追加・変更した色名をマージした 570 色である。5 色の変更前の色名を、ここでは gray obs, grey obs, green obs, maroon obs, purple obs のように印字しておいた。darkgray, darkslategray, dimgray, lightgrey, lightslategray, slategray, rebeccapurple が追加されている。W3C によって省かれてしまった番号付きの色名を残してあるので、用途によっては使い勝手がいいだろう。

⌗ rgb+w3c.txt

POV-Ray 3.5 色名

POV-Ray 3.5 にて定義されていた色名と RGB 値 129 色は、X11 とも W3C とも RGB 値が異なる色名が少なからず定義されている。

⌗ povray35.rgb.txt

ImageMagick 色名

ImageMagick にて古く定義されていた色名と RGB 値 675 色は、同名で別の RGB 値が登録されていた。それらを gray obs, green obs, maroon obs, purple obs のように印字しておいたが、どちらが新旧かは未確認での機械処理なのだが、奇しくも W3C による変更色と同じなので、色名における違和感など似た動機による変更だったのだろう。

⌗ imagemagick.rgb.txt

X11R6 色名

X11R6 時代の X11/rgb.txt 752 色は、93 色も多い、詳細不明。このように、X11/rgb.txt にはバリエーションが存在する。

日本の色名

何処だったかのサイトの日本の色名には、同じ漢字が 2 名ある(「菖蒲色」, 「丹」、色は同値)。同じ読みが 4 色ある(「うすいろ」, 「あまいろ」, 「たん」, 「くりいろ」)。かつて、タイムリーに「松崎しげる色」まで登録され、今でも重宝している。（参考にした URL を失念してしまいました、すいません。）

⌗ rgb.txt.ja

日本の伝統色

こちらの日本の伝統色には、同じ読みが 8 色ある(「うすこう」, 「からちゃ」, 「えびちゃ」, 「せんさいちゃ」, 「うすもえぎ」, 「あまいろ」, 「きがらちゃ」, 「くりいろ」)。

中国の伝統色

こちらの中国の伝統色には、同じ読みが 7 色ある(「イエンホン」, 「シューホン」, 「タンホワン」, 「チュンリュー」, 「ルーホイ」, 「ユーリュー」, 「シェンラン」)。

アメリカの伝統色

こちらのアメリカの伝統色には、W3C による色名に重なるものがないので、用途によっては使い勝手がよいと思う。日本の伝統色と比べて原色に近くパワフルな色合いが多い。

ヨーロッパの伝統色

こちらのヨーロッパの伝統色には、W3C による色名に重なるものが 23 色あり、かなり色合いも異なるので、使い方によっては雰囲気を切り替えるなど面白いと思う。米国と比べてシックな色合いが多い。

イギリスの伝統色

こちらのイギリスの伝統色には、7 色 signalred, maroon, mustard, nightgreen, midnightblue, midnightblue, mallow 同名があるが、明らかに誤植。他にもタイポが存在するようで、手元では修正しておいた。

⌗ rgb.en_GB.txt

フランスの伝統色

こちらのフランスの伝統色には、2 色 palme, blue indigo sombre 同名が存在する。

アフリカの伝統色

こちらのアフリカの伝統色は、由来がわからない。国旗かスポーツが関係しているのかな。

誕生日色

こちらのバースデーカラー 366 色は、閏年を含めて一年間の各日に色を割り当てたものらしい。興味深いが、何が由来か不明。

WEB セーフカラー

WEB セーフカラー 216 色は、Pseudo カラークラスでも自然に色彩表現が偏りないよう、この色数に色を割り当てたものである。

⌗ websafe216.rgb.txt

W3C による色名

W3C による色名 140 色、スペルミス(lavender, papayawhip, crimson の typo かと)が３つあるので注意。というか、何千件も間違った色名が既にネットに流布している。手元では修正しておいた。

⌗ web.rgb.txt

モノトーン

こちらのモノトーン 256 色、はアルゴリズムで任意の色数を算出可能だが、丁度良い色数で有用である。

グラデーション

こちらのグラデーション 432 色、はアルゴリズムで任意の色数を算出可能だが、丁度良い色数で有用である。

パステルカラー

こちらのパステルカラー 300 色、はアルゴリズムで任意の色数を算出可能だが、丁度良い色数で有用である。

ビビッドカラー

こちらのビビッドカラー 300 色、はアルゴリズムで任意の色数を算出可能だが、丁度良い色数で有用である。

Microsoft パレット 10 カラー

Microsoft Word などで使用されている 10 色パレットは、少ない色数で弁別に有用な最小セットと言える。

⌗ microsoft-palette-10.rgb.txt

Apple Pages パレット 29 カラー

Apple Pages などで使用されている 29 色パレットは、少ない色数で弁別に大変有用である。

⌗ apple-palette-29.rgb.txt

Apple macOS パレット 48 カラー

Apple macOS で使用されている 48 色パレットは、少ない色数で弁別に有用である。

⌗ apple-palette-48.rgb.txt

Solarized パレット 16 カラー

オープンソースの開発者界隈で重用されているライトモード、ダークモード両方の作業環境で使える最小基本 16 色、Solarized、さまざまな場面で極めて有用である。

⌗ solarized-16.rgb.txt

グレースケール＋ビビッド＋パステル＋グラデーション

上記のアルゴリズムで算出可能なカラーテーブルを任意の階調で生成できるフォームを作成したのでご活用いただきたい。

1 次元情報、2 次元情報、3 次元情報などの順序に番号をつけ、色分けし可視化する際に有用である。

システムカラーとして指定できる名前

システムカラーとして指定できる名前はブラウザによって異なる。

なんと、Firefox での GrayText は透過率による灰色らしく、黒地だと不可視である。背景色が黒色以外であることを前提としているということである。Chrome では灰色になる。ちなみに † は非推奨である。