ツール｜色の変換（RGB・HSV・HSL）

色空間のRGB（10進数／16進数）、HSV、HSLを相互変換するツールです。

• 16進数のRGBは3桁の省略形でも入力できます。
  例）#3F9 → #33FF99
• 変換時の端数は四捨五入します。
• RGBからHSV／HSLへの変換は不可逆です（RGBの方が表現できる色が多く、変換時に丸めてしまうため）。
  RGB：256 × 256 × 256 = 16,777,216通り
  HSV：360 × 101 × 101 = 3,672,360通り

RGB、HSV、HSLとは？

RGB

光の三原色と呼ばれる赤（Red）、緑（Green）、青（Blue）を混ぜて色を表現します。ディスプレイなどで使われており、機械にわかりやすい表現です。

HSV

色相（Hue / 色の種類）、彩度（Saturation / 鮮やかさ）、明度（Value / 明るさ）の三つの成分で色を表現します。人間にわかりやすい表現です。

HSL

色相（Hue / 色の種類）、彩度（Saturation / 鮮やかさ）、輝度（Lightness / 明るさ）の三つの成分で色を表現します。HSVをより直感的にした表現です。

HSVとHSLの違い

RGBからHSVへの変換計算式

R, G, Bのうち、最大値をMAX、最小値をMINとする。

色相（H）

最大値がR：$H={\dfrac {G-B}{MAX-MIN}} \times 60$

最大値がG：$H={\dfrac {B-R}{MAX-MIN}} \times 60+120$

最大値がB：$H={\dfrac {R-G}{MAX-MIN}} \times 60+240$

彩度（S）

$S={\dfrac {MAX-MIN}{MAX}} \times 100$

明度（V）

$S={\dfrac {MAX}{255}} \times 100$

RGBからHSLへの変換計算式

R, G, Bのうち、最大値をMAX、最小値をMINとする。

色相（H）

HSVと同じ。

輝度（L）

$L={\dfrac {MAX+MIN}{2}} \times {\dfrac {100}{255}}$

彩度（S）

輝度が50以下：$S={\dfrac {MAX-MIN}{MAX+MIN}} \times 100$

輝度が51以上：$S={\dfrac {MAX-MIN}{510-(MAX+MIN)}} \times 100$

HSVからRGBへの変換計算式

計算準備

$H$は360の場合0とする。

$H'={\dfrac {H}{60}} \bmod 1$
※H ÷ 60を1で割った余り（＝小数部）
例）Hが90の場合：${\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5$

$S'={\dfrac {S}{100}}$

$V'={\dfrac {V}{100}}$

計算

$A=V' \times 255$

$B=V' \times (1-S') \times 255$

$C=V' \times (1-S' \times H') \times 255$

$D=V' \times (1-S' \times (1-H')) \times 255$

HSLからRGBへの変換計算式

計算準備

$H$は360の場合0とする。

Lが50未満：$L'=L$

Lが50以上：$L'=100-L$

計算

$MAX=2.55 \times (L+L' \times {\dfrac {S}{100}})$

$MIN=2.55 \times (L-L' \times {\dfrac {S}{100}})$

$f(x)={\dfrac {x}{60}} \times (MAX-MIN)+MIN$