ツール|色の変換(RGB・HSV・HSL)

色空間のRGB、HSV、HSLを相互変換するツールと変換の計算式。RGBは16進数にも変換可能。

プレビュー

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
背景色

RGB

赤 (R)
緑 (G)
青 (B)

HSV

色相 (H)
彩度 (S)
明度 (V)

HSL

色相 (H)
彩度 (S)
輝度 (L)
- Webツール

色空間の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:H=GBMAXMIN×60H={\dfrac {G-B}{MAX-MIN}} \times 60

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

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

彩度(S)

S=MAXMINMAX×100S={\dfrac {MAX-MIN}{MAX}} \times 100

明度(V)

S=MAX255×100S={\dfrac {MAX}{255}} \times 100

RGBからHSLへの変換計算式

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

色相(H)

HSVと同じ。

輝度(L)

L=MAX+MIN2×100255L={\dfrac {MAX+MIN}{2}} \times {\dfrac {100}{255}}

彩度(S)

輝度が50以下:S=MAXMINMAX+MIN×100S={\dfrac {MAX-MIN}{MAX+MIN}} \times 100

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

HSVからRGBへの変換計算式

計算準備

HHは360の場合0とする。

H=H60mod1H'={\dfrac {H}{60}} \bmod 1
※H ÷ 60を1で割った余り(=小数部)
例)Hが90の場合:9060mod1=1.5mod1=0.5{\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5

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

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

計算

A=V×255A=V' \times 255

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

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

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

条件 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への変換計算式

計算準備

HHは360の場合0とする。

Lが50未満:L=LL'=L

Lが50以上:L=100LL'=100-L

計算

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

MIN=2.55×(LL×S100)MIN=2.55 \times (L-L' \times {\dfrac {S}{100}})

f(x)=x60×(MAXMIN)+MINf(x)={\dfrac {x}{60}} \times (MAX-MIN)+MIN

条件 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)
- Webツール

矢野ヒロタ /1988年生まれ。プログラマー、会社員。仕事で培ったWebやスマホアプリの技術を発信すると見せかけてもっぱら妄想を綴っています。よしなに。