ツールの使い方
- 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=⎩⎨⎧MAX−MING−B×60MAX−MINB−R×60+120MAX−MINR−G×60+240, MAX=R, MAX=G, MAX=B
彩度(S)
S=MAXMAX−MIN×100
明度(V)
S=255MAX×100
RGBからHSLへの変換
R, G, Bのうち最大値をMAX、最小値をMINとします。
輝度(L)
L=2MAX+MIN×255100
彩度(S)
輝度によって求め方が変わります。
S=⎩⎨⎧MAX+MINMAX−MIN×100510−(MAX+MIN)MAX−MIN×100, 0≦L≦50, 51≦L≦100
HSVからRGBへの変換
① H(色相)を変換する
Hは360の場合0とし、H ÷ 60を1で割った余り(=小数部)を求めます。
H′=60Hmod1
例)Hが90の場合:6090mod1=1.5mod1=0.5
② S(彩度)とV(明度)を変換する
SとVは百分率から小数に変換しておきます。
S′=100S
V′=100V
③ Hの値に応じて解を決定する
無彩色(S = 0)を例外とし、Hの値に応じて解を決定します。
A=V′×255B=V′×(1−S′)×255C=V′×(1−S′×H′)×255D=V′×(1−S′×(1−H′))×255
(R,G,B)=⎩⎨⎧(A,A,A)(A,D,B)(C,A,B)(B,A,D)(B,C,A)(D,B,A)(A,B,C), S=0, 0≦H<60, 60≦H<120, 120≦H<180, 180≦H<240, 240≦H<300, 300≦H<360
HSLからRGBへの変換
① H(色相)を変換する
Hは360の場合0とします。
H={H0, H=360, H=360
② L(輝度)におまじないをかける
L′={L100−L, 0≦L<50, 50≦L≦100
③ Hの値に応じて解を決定する
MAX=2.55×(L+L′×100S)MIN=2.55×(L−L′×100S)f(x)=60x×(MAX−MIN)+MIN
(R,G,B)=⎩⎨⎧(MAX, f(H), MIN)(f(120−H), MAX, MIN)(MIN, MAX, f(H−120))(MIN, f(240−H), MAX)(f(H−240), MIN, MAX)(MAX, MIN, f(360−H)), 0≦H<60, 60≦H<120, 120≦H<180, 180≦H<240, 240≦H<300, 300≦H<360