Hirota Yano
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={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ツールを公開しています。無料ですのでご自由にお使いください。ブログは技術ネタと見せかけてもっぱら妄想です。よしなに。
COPYRIGHT © 2018 HIROTA YANO, ALL RIGHTS RESERVED.