HIROTA YANOBLOG
JP
/
EN

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

色空間のRGB、カラーコード(16進数の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)

ツールの使い方

  • 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とします。

色相(H)

MAXがR, G, Bのどれかによって求め方が変わります。

H={GBMAXMIN×60MAX=RBRMAXMIN×60+120MAX=GRGMAXMIN×60+240MAX=BH = \begin{cases} {\dfrac {G-B}{MAX-MIN}} \times 60 &\text{, } MAX=R \\ \\ {\dfrac {B-R}{MAX-MIN}} \times 60+120 &\text{, } MAX=G \\ \\ {\dfrac {R-G}{MAX-MIN}} \times 60+240 &\text{, } MAX=B \end{cases}

彩度(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)

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

S={MAXMINMAX+MIN×1000L50MAXMIN510(MAX+MIN)×10051L100S = \begin{cases} {\dfrac {MAX-MIN}{MAX+MIN}} \times 100 &\text{, } 0 \leqq L \leqq 50 \\ \\ {\dfrac {MAX-MIN}{510-(MAX+MIN)}} \times 100 &\text{, } 51 \leqq L \leqq 100 \end{cases}

HSVからRGBへの変換

① 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

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

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

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

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

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

A=V×255B=V×(1S)×255C=V×(1S×H)×255D=V×(1S×(1H))×255A=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\\
(R,G,B)={(A,A,A)S=0(A,D,B)0H<60(C,A,B)60H<120(B,A,D)120H<180(B,C,A)180H<240(D,B,A)240H<300(A,B,C)300H<360(R,G,B) = \begin{cases} (A,A,A) &\text{, } S = 0 \\ (A,D,B) &\text{, } 0 \leqq H < 60 \\ (C,A,B) &\text{, } 60 \leqq H < 120 \\ (B,A,D) &\text{, } 120 \leqq H < 180 \\ (B,C,A) &\text{, } 180 \leqq H < 240 \\ (D,B,A) &\text{, } 240 \leqq H < 300 \\ (A,B,C) &\text{, } 300 \leqq H < 360 \end{cases}

HSLからRGBへの変換

① H(色相)を変換する

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

H={HH3600H=360H = \begin{cases} H &\text{, } H \neq 360 \\ 0 &\text{, } H = 360 \end{cases}

② L(輝度)におまじないをかける

L={L0L<50100L50L100L' = \begin{cases} L &\text{, } 0 \leqq L < 50 \\ 100-L &\text{, } 50 \leqq L \leqq 100 \end{cases}

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

MAX=2.55×(L+L×S100)MIN=2.55×(LL×S100)f(x)=x60×(MAXMIN)+MINMAX=2.55 \times (L+L' \times {\dfrac {S}{100}})\\ MIN=2.55 \times (L-L' \times {\dfrac {S}{100}})\\ f(x)={\dfrac {x}{60}} \times (MAX-MIN)+MIN
(R,G,B)={(MAX, f(H), MIN)0H<60(f(120H), MAX, MIN)60H<120(MIN, MAX, f(H120))120H<180(MIN, f(240H), MAX)180H<240(f(H240), MIN, MAX)240H<300(MAX, MIN, f(360H))300H<360(R,G,B) = \begin{cases} (MAX,\ f(H),\ MIN) &\text{, } 0 \leqq H < 60 \\ (f(120 - H),\ MAX,\ MIN) &\text{, } 60 \leqq H < 120 \\ (MIN,\ MAX,\ f(H - 120)) &\text{, } 120 \leqq H < 180 \\ (MIN,\ f(240 - H),\ MAX) &\text{, } 180 \leqq H < 240 \\ (f(H - 240),\ MIN,\ MAX) &\text{, } 240 \leqq H < 300 \\ (MAX,\ MIN,\ f(360 - H)) &\text{, } 300 \leqq H < 360 \end{cases}