色空間の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の違い
HSV | HSL | |
---|---|---|
色相 | 色味を0~360度の角度で表す。0度は赤で、反対側(180度)は反対色である青緑。反対色が見つけやすい。 | HSVと同じ。 |
彩度 | 鮮やかさというよりは色の濃さ。下げると薄くなる。 | 鮮やかさ。下げると灰色になる。 |
明度 / 輝度 | 100%を原色として、そこからどれだけ明るさが失われるかで表す。原色より明るくしたい場合は彩度を下げる必要があり、操作に迷う。 | 0%を黒、100%を白として、50%を原色とする。高ければ明るく、低ければ暗くなるので、明度より直感的。 |
RGBからHSVへの変換計算式
R, G, Bのうち、最大値をMAX、最小値をMINとする。
色相(H)
最大値がR:
最大値がG:
最大値がB:
彩度(S)
明度(V)
RGBからHSLへの変換計算式
R, G, Bのうち、最大値をMAX、最小値をMINとする。
色相(H)
HSVと同じ。
輝度(L)
彩度(S)
輝度が50以下:
輝度が51以上:
HSVからRGBへの変換計算式
計算準備
は360の場合0とする。
※H ÷ 60を1で割った余り(=小数部)
例)Hが90の場合:
計算
条件 | R | G | B |
---|---|---|---|
Sが0(無彩色) | A | A | A |
Hが60未満 | A | D | B |
Hが120未満 | C | A | B |
Hが180未満 | B | A | D |
Hが240未満 | B | C | A |
Hが300未満 | D | B | A |
Hが300以上 | A | B | C |
HSLからRGBへの変換計算式
計算準備
は360の場合0とする。
Lが50未満:
Lが50以上:
計算
条件 | R | G | B |
---|---|---|---|
Hが60未満 | MAX | f(H) | MIN |
Hが120未満 | f(120 - H) | MAX | MIN |
Hが180未満 | MIN | MAX | f(H - 120) |
Hが240未満 | MIN | f(240 - H) | MAX |
Hが300未満 | f(H - 240) | MIN | MAX |
Hが300以上 | MAX | MIN | f(360 - H) |