HEX → HSL 変換

HSLは、色を色相（Hue、色相環上の角度）、彩度（Saturation、どれだけ鮮やかか）、明度（Lightness、黒や白にどれだけ近いか）で表します。HEXより手で調整しやすく、色相はそのままで明度を下げれば、同じ色の暗いバージョンが得られます。この変換ツールは、HEXとrgb()のコードを、新しいスペース区切りの書き方を含めてhsl()とhsla()に変換し、HSLをHEXとRGBに戻し、最大・最小の計算式のすべての手順を表示します。

使い方

1. HEX/RGB → HSL、またはHSL → HEX/RGBを選びます。
2. HEXコード（3、4、6、8桁）かrgb()、または色相・彩度・明度を入力します。
3. 表示する小数の桁数を選びます。
4. 結果をコピーします。計算過程の表で計算方法が分かり、リストを貼り付ければ一括変換できます。

計算式

L = (max + min) ÷ 2 · S = Δ ÷ (1 − |2L − 1|) · H = 60° × ((G′ − B′) ÷ Δ mod 6)（Rが最大のとき）、((B′ − R′) ÷ Δ + 2)（Gが最大のとき）、((R′ − G′) ÷ Δ + 4)（Bが最大のとき）

R′、G′、B′は各チャンネルを255で割った値で、max、min、Δ = max − min はこれらから求めます。グレーはΔ = 0なので、彩度と色相は0です。戻すときは、C = (1 − |2L − 1|) × S、X = C × (1 − |(H ÷ 60) mod 2 − 1|)、m = L − C ÷ 2 を使います。

計算例

#FF6347（トマト色）では、R′ = 1、G′ = 0.3882、B′ = 0.2784です。最大値は1、最小値は0.2784、Δ = 0.7216なので、L = 0.6392、S = 0.7216 ÷ (1 − 0.2784) = 1、H = 60 × (0.1098 ÷ 0.7216) = 9.1°となり、hsl(9.1, 100%, 63.9%) です。戻すと、hsl(210, 50%, 40%) は C = 0.4、X = 0.2、m = 0.2 となり、RGB (51, 102, 153) = #336699 です。