HIROTA YANO
FREE WEB TOOLS
JP
/
EN

色の変換(カラーコード・RGB・HSV・HSL) / ツール

プレビュー
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
背景色:
RGB・カラーコード
赤 (R)
緑 (G)
青 (B)
HSV
色相 (H)
彩度 (S)
明度 (V)
HSL
色相 (H)
彩度 (S)
輝度 (L)

ツールの使い方

ブラウザ上で動作する、色空間のカラーコード(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通り

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

色空間 概要
RGB 光の三原色と呼ばれる赤(Red)、緑(Green)、青(Blue)を混ぜて色を表現します。機械にわかりやすい表現で、ディスプレイなどで使われています。
カラーコード
/Webカラー
RGBを16進数で記述したもので、Webカラーや単にカラーコードとも呼ばれます。ソフトウェア上の色指定時によく使われています。
HSV 色相(Hue / 色の種類)、彩度(Saturation / 鮮やかさ)、明度(Value / 明るさ)の三つの成分で色を表現します。人間にわかりやすい表現です。
HSL 色相(Hue / 色の種類)、彩度(Saturation / 鮮やかさ)、輝度(Lightness / 明るさ)の三つの成分で色を表現します。HSVをより直感的にした表現です。

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

HSV HSL
色相 色味を0~360度の角度で表す。0度は赤で、反対側(180度)は反対色である青緑。反対色が見つけやすい。 HSVと同じ。
彩度 鮮やかさというよりは色の濃さ。下げると薄くなる。 鮮やかさ。下げると灰色になる。
明度
/輝度
100%を原色として、そこからどれだけ明るさが失われるかで表す。原色より明るくしたい場合は彩度を下げる必要があり、操作に迷う。 0%を黒、100%を白として、50%を原色とする。高ければ明るく、低ければ暗くなるので、明度より直感的。

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

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

HSVの彩度(S)を求める

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

HSVの明度(V)を求める

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

RGBからHSLへの変換

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

HSLの色相(H)を求める

HSVと同じ。

HSLの輝度(L)を求める

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

HSLの彩度(S)を求める

輝度によって求め方が変わります。

0L500 \leqq L \leqq 50の場合:

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

51L10051 \leqq L \leqq 100の場合:

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

HSVからRGBへの変換

① HSVのH(色相)を変換する

Hは360の場合0とし、H ÷ 60を1で割った余り(=小数部)を求めます。

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

例)Hが90の場合:9060mod1=1.5mod1=0.5{\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5

② HSVのS(彩度)とV(明度)を変換する

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

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

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

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

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=0S = 0 A A A
0H<600 \leqq H < 60 A D B
60H<12060 \leqq H < 120 C A B
120H<180120 \leqq H < 180 B A D
180H<240180 \leqq H < 240 B C A
240H<300240 \leqq H < 300 D B A
300H<360300 \leqq H < 360 A B C

HSLからRGBへの変換

① HSLのH(色相)を変換する

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

H360H \neq 360の場合:H=HH = H
H=360H = 360の場合:H=0H = 0

② HSLのL(輝度)を変換する

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

0L<500 \leqq L < 50の場合 :L=LL' = L
50L10050 \leqq L \leqq 100の場合:L=100LL' = 100-L

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

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
0H<600 \leqq H < 60 MAX ff(H) MIN
60H<12060 \leqq H < 120 ff(120 - H) MAX MIN
120H<180120 \leqq H < 180 MIN MAX ff(H - 120)
180H<240180 \leqq H < 240 MIN ff(240 - H) MAX
240H<300240 \leqq H < 300 ff(H - 240) MIN MAX
300H<360300 \leqq H < 360 MAX MIN ff(360 - H)