RGBとHSLの相互変換ツールと変換計算式
色の表現法である「RGB」と「HSL」を相互変換するオンラインツールと変換計算式の解説
■ RGBとHSLの相互変換ツール
■ カラーコード
カラーコード :
■ RGB
| R : | |
| G : | |
| B : |
■ HSL
| H : | |
| S : | |
| L : |
H値の範囲 :
S,L値の範囲 :
S,L値の範囲 :
色の見本
#ffffff
読み込み中...
ツールの使い方
色を赤・緑・青の3つで表現する「RGB」と、色を色相・彩度・輝度の3つで表現する「HSL」を相互変換するツールです。HTMLなどで使う16進数カラーコードとの変換も可能。Webブラウザ上で動作するので手軽に利用できます。
■ [関連項目] HSL色空間とは
RGB値をHSL値に変換したい場合は、RGB値の欄に変換する値を入力してください。
HSL値をRGB値に変換したい場合は、HSL値の欄に変換する値を入力してください。
値を入力すると、変換後の値が自動的にセットされます。
RGBの各パラメータは0～255の値で表示されます。
HSLはデフォルト設定だとHが0～360、SとLは0～100で表示されますが、Hを0～100、SとLを0～255の範囲に変更することもできます。
HSLとHSV・HSBの違いについて
「HSL」は、色を色相(Hue)・彩度(Saturation)・輝度(Lightness)の3要素で表現したものです。似たようなものに、色を色相(Hue)・彩度(Saturation)・明度(Value)の3要素で表現した「HSV」「HSB」という形式もありますが、これらとHSLは計算方法が違う完全な別物です。
なのでHSLとHSV・HSBを混同しないよう注意してください。
なお、HSV・HSBの変換ツール＆変換計算式の解説は下記ページにあります。
RGBからHSLへの変換計算式
色相を求める
Rが最大値の場合 色相 H = 60 × ((G - B) ÷ (MAX - MIN))
Gが最大値の場合 色相 H = 60 × ((B - R) ÷ (MAX - MIN)) +120
Bが最大値の場合 色相 H = 60 × ((R - G) ÷ (MAX - MIN)) +240
3つとも同じ値の場合 色相 H = 0
求められた色相がマイナス値だった場合は360を加算して0～360の範囲に収めます
Gが最大値の場合 色相 H = 60 × ((B - R) ÷ (MAX - MIN)) +120
Bが最大値の場合 色相 H = 60 × ((R - G) ÷ (MAX - MIN)) +240
3つとも同じ値の場合 色相 H = 0
[例] RGB(210,70,120)の色相を求める
最大値はRなので
60 × ((70 - 120) ÷ (210 - 70)) = -21.4285...
マイナス値なので360を加算して0～360の範囲に収める
-21.4285... + 360 = 339
60 × ((70 - 120) ÷ (210 - 70)) = -21.4285...
マイナス値なので360を加算して0～360の範囲に収める
-21.4285... + 360 = 339
彩度を求める
0%と100%が分かれば、あとは現在の値が変動幅のうちの何%になるのかを調べれば彩度を求めることができます。
彩度0%のときのRGB値は、赤・緑・青のうち最も大きな値をMAX、最も小さな値をMINとして
収束値 CNT = (MAX + MIN) ÷ 2
すなわち、最大値と最小値の中間の灰色になります。
[例] RGB(210,70,120)の彩度0%のときの色を求める
最大値はR、最小値はGなので
収束値 CNT = (210 + 70) ÷ 2
= 140
よって、RGB(210,70,120)は彩度0%のときRGB(140,140,140)となる。
収束値 CNT = (210 + 70) ÷ 2
= 140
よって、RGB(210,70,120)は彩度0%のときRGB(140,140,140)となる。
上記の式で求められた収束値から彩度上昇にあわせて最小値・最大値が等速で広がっていき、最小値が0、もしくは最大値が255に到達した段階で彩度100%になります。
最小値・最大値のどちらが先に到達するかは、収束値が0～255の中間となる127の前か後かで判断できます。
収束値 CNTが127以下の場合 変動幅 = CNT
収束値 CNTが128以上の場合 変動幅 = 255 - CNT
収束値 CNTが128以上の場合 変動幅 = 255 - CNT
[例] RGB(210,70,120)の変動幅を求める
最大値はR、最小値はGなので
収束値 CNT = (210 + 70) ÷ 2
= 140
140は128以上なので、
変動幅 = 255 - 140
= 115
収束値 CNT = (210 + 70) ÷ 2
= 140
140は128以上なので、
変動幅 = 255 - 140
= 115
0%から100%までの変動幅が分かれば、あとは(現在値-収束値)/変動幅で彩度を求めることができます。
収束値 CNTが127以下の場合 彩度 S = (CNT - MIN) ÷ CNT
= 2(CNT - MIN) ÷ 2CNT
= (MAX + MIN - 2MIN) ÷ (MAX + MIN)
= (MAX - MIN) ÷ (MAX + MIN)
収束値 CNTが128以上の場合 彩度 S = (MAX - CNT) ÷ (255 - CNT)
= 2(MAX - CNT) ÷ 2(255 - CNT)
= 2MAX - MAX - MIN ÷ (510 - MAX - MIN)
= (MAX - MIN) ÷ (510 - MAX - MIN)
= 2(CNT - MIN) ÷ 2CNT
= (MAX + MIN - 2MIN) ÷ (MAX + MIN)
= (MAX - MIN) ÷ (MAX + MIN)
収束値 CNTが128以上の場合 彩度 S = (MAX - CNT) ÷ (255 - CNT)
= 2(MAX - CNT) ÷ 2(255 - CNT)
= 2MAX - MAX - MIN ÷ (510 - MAX - MIN)
= (MAX - MIN) ÷ (510 - MAX - MIN)
以上の内容をまとめた最終的な彩度計算式は以下のようになります。
R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
収束値 CNT = (MAX + MIN) ÷ 2
収束値 CNTが127以下の場合 彩度 S = (MAX - MIN) ÷ (MAX + MIN)
収束値 CNTが128以上の場合 彩度 S = (MAX - MIN) ÷ (510 - MAX - MIN)
収束値 CNTが127以下の場合 彩度 S = (MAX - MIN) ÷ (MAX + MIN)
収束値 CNTが128以上の場合 彩度 S = (MAX - MIN) ÷ (510 - MAX - MIN)
[例] RGB(45,175,90)の彩度を求める
収束値 CNT = (175 + 45) ÷ 2
= 110
収束値が127以下なので
S = (175 - 45) ÷ (175 + 45)
= 0.590909
0～100の場合は 0.590909 × 100 = 59
0～255の場合は 0.590909 × 255 = 150
= 110
収束値が127以下なので
S = (175 - 45) ÷ (175 + 45)
= 0.590909
0～100の場合は 0.590909 × 100 = 59
0～255の場合は 0.590909 × 255 = 150
[例] RGB(210,70,120)の彩度を求める
収束値 CNT = (210 + 70) ÷ 2
= 140
収束値が128以上なので
S = (210 - 70) ÷ (510 - 210 - 70)
= 0.6086956
0～100の場合は 0.6086956 × 100 = 60
0～255の場合は 0.6086956 × 255 = 155
= 140
収束値が128以上なので
S = (210 - 70) ÷ (510 - 210 - 70)
= 0.6086956
0～100の場合は 0.6086956 × 100 = 60
0～255の場合は 0.6086956 × 255 = 155
輝度を求める
R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
輝度 L = (MAX + MIN) ÷ 2
[例] RGB(45,175,90)の明度を求める
(175 + 45) ÷ 2 = 110
0～100の場合は (110 ÷ 255) × 100 = 43
0～255の場合は 110
0～100の場合は (110 ÷ 255) × 100 = 43
0～255の場合は 110
HSLからRGBへの変換計算式
最大値と最小値を求める
S・Lの範囲が0～100の場合の場合は下記のとおりです。
輝度Lが49以下の場合
最大値 MAX = 2.55 × (L + L × (S ÷ 100))
最小値 MIN = 2.55 × (L - L × (S ÷ 100))
輝度Lが50以上の場合
最小値 MIN = 2.55 × (L - L × (S ÷ 100))
最大値 MAX = 2.55 × (L + (100 - L) × (S ÷ 100))
最小値 MIN = 2.55 × (L - (100 - L) × (S ÷ 100))
最小値 MIN = 2.55 × (L - (100 - L) × (S ÷ 100))
[例] HSL(185,40,75)の最大値と最小値を求める
輝度が50以上なので
MAX = 2.55 × (75 + (100 - 75) × (40 ÷ 100))
= 216.75
MIN = 2.55 × (75 - (100 - 75) × (40 ÷ 100))
=165.75
MAX = 2.55 × (75 + (100 - 75) × (40 ÷ 100))
= 216.75
MIN = 2.55 × (75 - (100 - 75) × (40 ÷ 100))
=165.75
RGB値を求める
残った色も変換式の逆算で求めます。
Hの範囲が0～360、S・Lの範囲が0～100の場合は下記のとおりです。
■ Hが0～60の場合
R = MAX
G = (H ÷ 60) × (MAX - MIN) + MIN
B = MIN
R = MAX
G = (H ÷ 60) × (MAX - MIN) + MIN
B = MIN
■ Hが60～120の場合
R = ((120 - H) ÷ 60) × (MAX - MIN) + MIN
G = MAX
B = MIN
R = ((120 - H) ÷ 60) × (MAX - MIN) + MIN
G = MAX
B = MIN
■ Hが120～180の場合
R = MIN
G = MAX
B = ((H - 120) ÷ 60) × (MAX - MIN) + MIN
R = MIN
G = MAX
B = ((H - 120) ÷ 60) × (MAX - MIN) + MIN
■ Hが180～240の場合
R = MIN
G = ((240 - H) ÷ 60) × (MAX - MIN) + MIN
B = MAX
R = MIN
G = ((240 - H) ÷ 60) × (MAX - MIN) + MIN
B = MAX
■ Hが240～300の場合
R = ((H - 240) ÷ 60) × (MAX - MIN) + MIN
G = MIN
B = MAX
R = ((H - 240) ÷ 60) × (MAX - MIN) + MIN
G = MIN
B = MAX
■ Hが300～360の場合
R = MAX
G = MIN
B = ((360 - H) ÷ 60) × (MAX - MIN) + MIN
R = MAX
G = MIN
B = ((360 - H) ÷ 60) × (MAX - MIN) + MIN
[例] HSL(325,80,25)のRGB値を求める
輝度が49以下なので
MAX = 2.55 × (25 + 25 × (80 ÷ 100))
= 114.75
MIN = 2.55 × (25 - 25 × (80 ÷ 100))
=12.75
Hが300～360の範囲内なので
R = 114
G = 12
B = ((360 - 325) ÷ 60) × (115 - 13) + 13
= 72.499996... = 72
MAX = 2.55 × (25 + 25 × (80 ÷ 100))
= 114.75
MIN = 2.55 × (25 - 25 × (80 ÷ 100))
=12.75
Hが300～360の範囲内なので
R = 114
G = 12
B = ((360 - 325) ÷ 60) × (115 - 13) + 13
= 72.499996... = 72
関連コンテンツ
WEBカラーチャート
HTML・CSSで使える色の見本一覧。各色のRGBと16進数カラーコードを簡単に取得できます。
RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
RGBとHSV・HSBの相互変換ツールと変換計算式
色の表現法である「RGB」と「HSV」を相互変換するツールと変換計算式の解説。
HTML・CSSで使用するカラーネーム・カラーコード一覧
HTMLやCSSで使用できる147色のカラーネーム・カラーコードの一覧。