色の変換（カラーコード・RGB・HSV・HSL） ／ ツール

使い方

色空間を相互変換するWebツールです。カラーコード（16進数のRGB）、RGB（10進数）、HSV、HSLに対応しています。

• カラーコード、RGB、HSV、HSLのいずれかを入力すると自動変換します。
• カラーコードは3桁の省略形でも入力できます。
  例）#3F9 → #33FF99

※RGBとHSV/HSLの変換は不可逆です。これはRGBとHSV/HSLでは表現できる色の数が異なり、変換時に端数の丸めが発生するためです。
RGB: 256 × 256 × 256 = 16,777,216通り
HSV: 360 x 101 x 101 = 3,672,360通り

RGBとカラーコード（16進数）の変換計算式

RGBは一般的に各色を0から255までの256段階（= 8ビット分）で表現します。そのため16進数と相性が良く、ソフトウェア上ではよく16進数で表現されます。

16進数の場合は最初に#を付け、赤・緑・青の順に00～FFの16進数2桁ずつ計6桁で色を表現します。RGBであることに変わりはないですが、特にこの形式を指してカラーコードと呼ばれたりします。

#FF9933 = rgb(255, 153, 51)

また、CSSなどでは16進数カラーコードを3桁の省略形で指定できます。

#FF9933 = #F93

各色2桁ずつの計6桁を各色1桁ずつの計3桁に省略したもので、各桁を2回くり返す場合にのみ使用できます。

RGBからHSVへの変換計算式

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

① HSVの色相（H）を求める。MAXがR, G, Bのどれかによって求め方が変わる。

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$

② HSVの彩度（S）を求める。

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

③ HSVの明度（V）を求める。

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

RGBからHSLへの変換計算式

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

① HSLの色相（H）を求める。

HSVと同じ。

② HSLの輝度（L）を求める。

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

③ HSLの彩度（S）を求める。輝度によって求め方が変わる。

$0 \leqq L \leqq 50$の場合：

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

$51 \leqq L \leqq 100$の場合：

$S = {\dfrac {MAX-MIN}{510-(MAX+MIN)}} \times 100$

HSVからRGBへの変換計算式

① HSVのH（色相）を変換する。

Hは360の場合0とし、H ÷ 60を1で割った余り（＝小数部）を求める。

$$H'={\dfrac {H}{60}} \bmod 1$$

例）Hが90の場合：${\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5$

② HSVのS（彩度）とＶ（明度）を変換する。

SとVは百分率から小数に変換しておく。

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

③ HSVのHの値に応じてRGBを決定する。

無彩色（S = 0）を例外とし、Hの値に応じてR, G, Bの解を決定。

$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$

条件	R	G	B
$S = 0$	A	A	A
$0 \leqq H < 60$	A	D	B
$60 \leqq H < 120$	C	A	B
$120 \leqq H < 180$	B	A	D
$180 \leqq H < 240$	B	C	A
$240 \leqq H < 300$	D	B	A
$300 \leqq H < 360$	A	B	C

HSLからRGBへの変換計算式

① HSLのH（色相）を変換する。

$H \neq 360$の場合：$H = H$
$H = 360$の場合：$H = 0$

② HSLのL（輝度）を変換する。

$0 \leqq L < 50$の場合　：$L' = L$
$50 \leqq L \leqq 100$の場合：$L' = 100-L$

③ HSLのHの値に応じてRGBを決定する。

$$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$$

条件	R	G	B
$0 \leqq H < 60$	MAX	$f$(H)	MIN
$60 \leqq H < 120$	$f$(120 - H)	MAX	MIN
$120 \leqq H < 180$	MIN	MAX	$f$(H - 120)
$180 \leqq H < 240$	MIN	$f$(240 - H)	MAX
$240 \leqq H < 300$	$f$(H - 240)	MIN	MAX
$300 \leqq H < 360$	MAX	MIN	$f$(360 - H)