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

ツールの使い方

ブラウザ上で動作する、色空間のカラーコード（16進数のRGB）と10進数のRGB、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通り

色の表現法・色空間について

HSVとHSLには以下の違いがあります。

色空間の変換方法・計算式

RGBとカラーコードの変換（10進数と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を決定する