色を赤・緑・青の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」は、色を色相(Hue)・彩度(Saturation)・輝度(Lightness)の3要素で表現したものです。
似たようなものに、色を色相(Hue)・彩度(Saturation)・明度(Value)の3要素で表現した「HSV」「HSB」という形式もありますが、これらとHSLは計算方法が違う完全な別物です。
なのでHSLとHSV・HSBを混同しないよう注意してください。

なお、HSV・HSBの変換ツール＆変換計算式の解説は下記ページにあります。

R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして 求められた色相がマイナス値だった場合は360を加算して0～360の範囲に収めます 彩度は赤・緑・青の3値が同じ状態を0%とし、そこから彩度上昇にあわせて均等に広がっていって、赤・緑・青のどれかが0もしくは255に到達した段階で100%となります。
0%と100%が分かれば、あとは現在の値が変動幅のうちの何%になるのかを調べれば彩度を求めることができます。

彩度0%のときのRGB値は、赤・緑・青のうち最も大きな値をMAX、最も小さな値をMINとして すなわち、最大値と最小値の中間の灰色になります。
上記の式で求められた収束値から彩度上昇にあわせて最小値・最大値が等速で広がっていき、最小値が0、もしくは最大値が255に到達した段階で彩度100%になります。
最小値・最大値のどちらが先に到達するかは、収束値が0～255の中間となる127の前か後かで判断できます。
0%から100%までの変動幅が分かれば、あとは(現在値-収束値)/変動幅で彩度を求めることができます。

以上の内容をまとめた最終的な彩度計算式は以下のようになります。
R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして 輝度は彩度を求める時に使った収束値、つまり赤・緑・青のうちの最大値と最小値の中間の値になります。

R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして

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

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

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

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