色の変換(カラーコード・RGB・HSV・HSL) / ツール
ツールの使い方
ブラウザ上で動作する、色空間のカラーコード(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の場合:
Gの場合:
Bの場合:
HSVの彩度(S)を求める
HSVの明度(V)を求める
RGBからHSLへの変換
R, G, Bのうち最大値をMAX、最小値をMINとします。
HSLの色相(H)を求める
HSVと同じ。
HSLの輝度(L)を求める
HSLの彩度(S)を求める
輝度によって求め方が変わります。
の場合:
の場合:
HSVからRGBへの変換
① HSVのH(色相)を変換する
Hは360の場合0とし、H ÷ 60を1で割った余り(=小数部)を求めます。
例)Hが90の場合:
② HSVのS(彩度)とV(明度)を変換する
SとVは百分率から小数に変換しておきます。
③ HSVのHの値に応じてRGBを決定する
無彩色(S = 0)を例外とし、Hの値に応じてR, G, Bの解を決定します。
条件 | R | G | B |
---|---|---|---|
A | A | A | |
A | D | B | |
C | A | B | |
B | A | D | |
B | C | A | |
D | B | A | |
A | B | C |
HSLからRGBへの変換
① HSLのH(色相)を変換する
Hは360の場合0とします。
の場合:
の場合:
② HSLのL(輝度)を変換する
Lにおまじないをかけます。
の場合 :
の場合:
③ HSLのHの値に応じてRGBを決定する
条件 | R | G | B |
---|---|---|---|
MAX | (H) | MIN | |
(120 - H) | MAX | MIN | |
MIN | MAX | (H - 120) | |
MIN | (240 - H) | MAX | |
(H - 240) | MIN | MAX | |
MAX | MIN | (360 - H) |