🌈

HSV -> RGB 変換式を高校数学でガチ導出する

2022/10/25に公開

CSS

デザイン

JavaScript

tech

前提知識

RGB -> HSV 変換式

RGB -> HSV 変換式をベースに、その逆変換を考えていくのがこの記事です。

上記の記事と同様に、次の定義を用いる。

const Imax = Math.max(r, g, b)
const Imin = Math.min(r, g, b)

床関数の性質

$\lfloor x\rfloor$ は、 $x$ を超えない最大の整数なので、 $x - 1$ と $x$ の間の数になります。

x - 1 < \lfloor x \rfloor \leq x

各辺に $1$ を加えると、

x < \lfloor x \rfloor + 1 \leq x + 1

$\lfloor x \rfloor \leq x$ と組み合わせて、

\lfloor x \rfloor \leq x < \lfloor x \rfloor + 1 \leq x + 1

この式から、次の性質を抜き出せます。

\lfloor x\rfloor \leq x<\lfloor x\rfloor +1

事前準備 - 色相を60で割った値の重要性

前記事を見ていただけるとわかるのだが、色相 $H$ の計算式は、いずれも次のような形になっている。

H = 60y + 60X

$X$ は前記事でいう区間内回転率であり、 $y$ には $0$ ~ $6$ の整数が入る。

ゆえに、本記事での計算の過程では、60を括り出す、

H = 60 \cdot (y + X)

のような変形を毎度行うことになり、その流れで $\cfrac{H}{60}$ という形がよく現れることになるので、 $\cfrac{H}{60}$ を変数化しておくと式が綺麗にまとまるのだ。

ところで、色相Hは $0$ ~ $360$ の間の整数ならなんでもありなので、 $\cfrac{H}{60}$ は整数になるとは限らない。
$\cfrac{H}{60}$ が整数になるのは、 $H$ が、前記事で規則性が発見された60°ずつの区間の開始角である時のみだ。
つまり、

$\cfrac{H}{60}$ の整数部分は、何番目の区間であるかを表す
$\cfrac{H}{60}$ の小数部分は、その区間の開始地点からの誤差（その区間内で何%進んでいるか）を表す

ことになる。

これらの重要な値を、まずは変数としてまとめておきたい。

$\cfrac{H}{60}$ の整数部分は、色相の区間を指すindex、みたいな意味合いで $H_i$ としておく。

H_i = \left\lfloor \cfrac{H}{60} \right\rfloor

$\cfrac{H}{60}$ の小数部分は、小数だからfloatの $F$ にでもしておこうか。

F = \cfrac{H}{60} - H_i

整数部分と小数部分を加えれば元の数値になるので、 $\cfrac{H}{60} = H_i + F$ が成り立つ。

$H_i = 0$ のとき

このとき、色相 $H$ は0°~60°

$H_i$ は何番目の区間かを表す数ということで、 $H_i = 0$ は一番最初の区間を表すのだから、 $H$ が0°~60°の範囲であることは至極当然のことである。

と言ってももやもやする人もいるかもしれないので、数学的な証明を書いておく。

H_i = \left\lfloor \cfrac{H}{60} \right\rfloor = 0

床関数の性質より、

0 \leq \cfrac{H}{60} < 0 +1

0 \leq \cfrac{H}{60} < 1

0 \leq H < 60

RGB値の関係性

詳しくは前記事の解説を参照してほしいのだが、以下のような関係にある。

R = Imax
G = Imin -> Imax
B = Imin

明度VからRを求める

明度の定義 $V = \cfrac{I_{max}}{255}$ より、

R = I_{max} = 255 \times V

彩度SからBを求める

彩度の定義 $S = \cfrac{I_{max} - I_{min}}{I_{max}}$ より、

\begin{align*} S &= \cfrac{255V - I_{min}}{255V} \\\\ &= \cfrac{255V}{255V} - \cfrac{I_{min}}{255V} \\\\ &= 1 - \cfrac{I_{min}}{255V} \\\\ S + \cfrac{I_{min}}{255V} &= 1 \\\\ \cfrac{I_{min}}{255V} &= 1 - S \\\\ I_{min} &= 255V \times (1 - S) \end{align*}

BがIminであるから、

B = I_{min} = 255 \times V \cdot (1 - S)

色相HからGを求める

$H = 60 \times \cfrac{G - B}{I_{max} - I_{min}}$ より、

\begin{align*} H &= 60 \times \cfrac{G - 255V \cdot (1 - S)}{255V - 255V \cdot (1 - S)} \\\\ &= 60 \times \cfrac{255V \cdot \left(\cfrac{G}{255V} - (1 - S)\right)}{255V \cdot (1 - (1 - S))} \\\\ &= 60 \times \cfrac{\cfrac{G}{255V} - (1 - S)}{S} \\\\ \cfrac{H}{60} &= \cfrac{\cfrac{G}{255V} - (1 - S)}{S} \\\\ \cfrac{H}{60} \cdot S &= \cfrac{G}{255V} - (1 - S) \\\\ \cfrac{G}{255V} &= \cfrac{H}{60} \cdot S + (1 - S) \\\\ G &= 255V \cdot \left(\cfrac{H}{60} \cdot S + (1 - S)\right) \\\\ &= 255V \cdot \left(1 + \cfrac{H}{60} \cdot S - S \right) \\\\ &= 255 \times V \cdot \left(1 - S \cdot \left(1 - \cfrac{H}{60} \right)\right) \end{align*}

ところで、今は $H_i = 0$ なので、

\begin{align*} \cfrac{H}{60} &= H_i + F \\\\ &= F \end{align*}

というわけで、代入すると、

G = 255 \times V \cdot \left(1 - S \cdot \left(1 - F \right)\right)

つまり、 $H$ が0°~60°の時のRGB値は、

\begin{cases} R &= 255 \times V \\ G &= 255 \times V \cdot \left(1 - S \cdot \left(1 - F \right)\right) \\ B &= 255 \times V \cdot (1 - S) \end{cases}

Unfinished Tasks

近々続き書くよ。KaTeX疲れたにゃん

HSV -> RGB 変換式を高校数学でガチ導出する

前提知識

RGB -> HSV 変換式

床関数の性質

事前準備 - 色相を60で割った値の重要性

$H_i = 0$ のとき

このとき、色相 $H$ は0°~60°

RGB値の関係性

明度VからRを求める

彩度SからBを求める

色相HからGを求める

つまり、 $H$ が0°~60°の時のRGB値は、

Unfinished Tasks

参考にしたサイト

床関数、整数部分・小数部分

色の変換原理

Discussion

前提知識

RGB -> HSV 変換式

床関数の性質

事前準備 - 色相を60で割った値の重要性

H_i = 0のとき

このとき、色相Hは0°~60°

RGB値の関係性

明度VからRを求める

彩度SからBを求める

色相HからGを求める

つまり、Hが0°~60°の時のRGB値は、

Unfinished Tasks

参考にしたサイト

床関数、整数部分・小数部分

色の変換原理

Discussion

$H_i = 0$ のとき

このとき、色相 $H$ は0°~60°

つまり、 $H$ が0°~60°の時のRGB値は、