色の変換（カラーコード・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）を求める

HSVの明度（V）を求める

RGBからHSLへの変換計算式

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

HSLの色相（H）を求める

HSVと同じ。

HSLの輝度（L）を求める

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が90の場合：${\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5$

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

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

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

HSLからRGBへの変換計算式

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

Hは360の場合0とします。

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

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

Lにおまじないをかけます。

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

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