HIROTA YANO
TOOL/

RGB・16進数カラーコード・HSV・HSLの相互変換 ／ ツール

色空間のRGB、16進数カラーコード、HSV、HSLを相互変換するツールです。

  • 16進数カラーコードは3桁の省略形でも入力できます。
    例）#3F9 → #33FF99
  • RGBとHSV・HSLは表現できる色の数が異なるため、変換は不可逆です。
    RGB：256 × 256 × 256 = 16,777,216通り
    HSV：360 × 101 × 101 = 3,672,360通り

CONVERT

16進数カラーコード

RGB

HSV

HSL

赤 (R)
緑 (G)
青 (B)
色相 (H)
彩度 (S)
明度 (V)
色相 (H)
彩度 (S)
輝度 (L)

PREVIEW

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
比較色：

色の表現法・色空間

RGB

光の三原色と呼ばれる赤（Red）、緑（Green）、青（Blue）を混ぜて色を表現します。機械にわかりやすい表現で、ディスプレイなどで使われています。

16進数カラーコード（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と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={G−BMAX−MIN×60, MAX=RB−RMAX−MIN×60+120, MAX=GR−GMAX−MIN×60+240, MAX=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=MAX−MINMAX×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={MAX−MINMAX+MIN×100, 0≦L≦50MAX−MIN510−(MAX+MIN)×100, 51≦L≦100S = \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′=H60 mod 1H'={\dfrac {H}{60}} \bmod 1

例）Hが90の場合：9060 mod 1=1.5 mod 1=0.5{\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5

② S（彩度）とＶ（明度）を変換する

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

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

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

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

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

② L（輝度）におまじないをかける

L′={L, 0≦L<50100−L, 50≦L≦100L' = \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×(L−L′×S100)f(x)=x60×(MAX−MIN)+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), 0≦H<60(f(120−H), MAX, MIN), 60≦H<120(MIN, MAX, f(H−120)), 120≦H<180(MIN, f(240−H), MAX), 180≦H<240(f(H−240), MIN, MAX), 240≦H<300(MAX, MIN, f(360−H)), 300≦H<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}
矢野ヒロタ / 1987年生まれ。プログラマー。
趣味で作ったWebツールを公開しています。無料ですのでご自由にお使いください。ブログは技術ネタと見せかけてもっぱら妄想です。よしなに。
© HIROTA YANO