RGBとHSLの相互変換ツール
RGBとHSLの相互変換ツールと変換計算式
色の表現法である「RGB」と「HSL」を相互変換するオンラインツールと変換計算式の解説

ツールの使い方

色を赤・緑・青の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・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
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の範囲に収めます
[例] RGB(210,70,120)の色相を求める
最大値はRなので
60 × ((70 - 120) ÷ (210 - 70)) = -21.4285...

マイナス値なので360を加算して0~360の範囲に収める
-21.4285... + 360 = 339

彩度を求める

彩度は赤・緑・青の3値が同じ状態を0%とし、そこから彩度上昇にあわせて均等に広がっていって、赤・緑・青のどれかが0もしくは255に到達した段階で100%となります。
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)となる。

上記の式で求められた収束値から彩度上昇にあわせて最小値・最大値が等速で広がっていき、最小値が0、もしくは最大値が255に到達した段階で彩度100%になります。
最小値・最大値のどちらが先に到達するかは、収束値が0~255の中間となる127の前か後かで判断できます。
収束値 CNTが127以下の場合 変動幅 = CNT
収束値 CNTが128以上の場合 変動幅 = 255 - CNT
[例] RGB(210,70,120)の変動幅を求める
最大値はR、最小値はGなので
収束値 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)


以上の内容をまとめた最終的な彩度計算式は以下のようになります。
R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
収束値 CNT = (MAX + MIN) ÷ 2
収束値 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
[例] 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

輝度を求める

輝度は彩度を求める時に使った収束値、つまり赤・緑・青のうちの最大値と最小値の中間の値になります。

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

HSLからRGBへの変換計算式

最大値と最小値を求める

輝度Lが最大値と最小値の中間値で、彩度Sが中間値から最大値・最小値までの距離を表しているので、この2つの値からRGBの最大値と最小値を求める式を導くことができます。

S・Lの範囲が0~100の場合の場合は下記のとおりです。

輝度Lが49以下の場合
最大値 MAX = 2.55 × (L + L × (S ÷ 100))
最小値 MIN = 2.55 × (L - L × (S ÷ 100))
輝度Lが50以上の場合
最大値 MAX = 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

RGB値を求める

色相はRGBの最大値・最小値を使って求めているため、逆算することでどの色が最大値・最小値になるかがわかります。
残った色も変換式の逆算で求めます。

Hの範囲が0~360、S・Lの範囲が0~100の場合は下記のとおりです。
■ Hが0~60の場合
R = MAX
G = (H ÷ 60) × (MAX - MIN) + MIN
B = MIN
■ Hが60~120の場合
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
■ Hが180~240の場合
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
■ Hが300~360の場合
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

関連コンテンツ

WEBカラーチャート
HTML・CSSで使える色の見本一覧。各色のRGBと16進数カラーコードを簡単に取得できます。
RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
RGBとHSV・HSBの相互変換ツール
色の表現法である「RGB」と「HSV」を相互変換するツールと変換計算式の解説。
CSSアイコン
HTMLやCSSで使用できる147色のカラーネーム・カラーコードの一覧。