RGB→HSL変換ツールとは？
このツールは、RGBモデル（赤・緑・青、各0〜255）で表した色を、HSLモデル（色相・彩度・輝度）に変換します。HSLは「色味（色相）」と「鮮やかさ（彩度）」「明るさ（輝度）」を分けて扱えるため、デザイナーにとって直感的に色を調整しやすい形式です。この変換は世界共通の数式に基づいており、特定のデバイスや国に依存しません。
使い方
変換したい色の赤・緑・青の値を、それぞれ0〜255の範囲で入力します。「計算」を押すと、対応するHSLの3つの値が表示され、CSSに hsl(H, S%, L%) としてそのまま貼り付けられます。
計算式の解説
まず各チャンネルを255で割って0〜1の範囲に正規化します。3つの値のうち最大値をmax、最小値をminとし、\(\Delta = \max - \min\) と定義します。輝度は \(L = (\max + \min)/2\) で求めます。彩度は \(S = \Delta /(1 - \lvert 2L - 1 \rvert)\) で、\(\Delta = 0\) のとき（グレーの場合）は0とします。色相は最大値となったチャンネルに応じて算出し、60°を掛けたうえで0〜360°の範囲に収めます。
$$L = \frac{C_{\max} + C_{\min}}{2}, \quad S = \frac{C_{\max} - C_{\min}}{1 - \lvert 2L - 1 \rvert}$$
$$H = 60^{\circ} \times \begin{cases} \dfrac{G^{\prime} - B^{\prime}}{\Delta} \bmod 6 & C_{\max} = R^{\prime} \\[0.6em] \dfrac{B^{\prime} - R^{\prime}}{\Delta} + 2 & C_{\max} = G^{\prime} \\[0.6em] \dfrac{R^{\prime} - G^{\prime}}{\Delta} + 4 & C_{\max} = B^{\prime} \end{cases}$$
計算例
トマトレッド RGB(255, 99, 71) を例にとります。正規化すると \(R=1\)、\(G=0.388\)、\(B=0.278\)。\(\max=1\)、\(\min=0.278\)、\(\Delta=0.722\) です。\(L = (1 + 0.278)/2 = 0.639 \to 63.9\%\)。\(S = 0.722 /(1 - \lvert 2\times 0.639 - 1 \rvert) = 0.722 / 0.722 = 1 \to 100\%\)。max が R なので、\(H = 60 \times \left((0.388 - 0.278)/0.722\right) = 60 \times 0.1525 \approx 9.13^{\circ}\)。結果は hsl(9.13, 100%, 63.92%) となります。
よくある質問
グレーの彩度が0になるのはなぜ？ 3つのチャンネルがすべて同じ値のとき \(\Delta = 0\) となり、色味の情報が存在しません。そのため彩度は定義できず、慣例として0に設定されます。
H・S・Lは四捨五入されますか？ 表示は小数第2位までに丸めていますが、内部計算では完全な精度の値を保持しています。
逆変換はできますか？ はい。HSL→RGBはこの逆の手順で、色相のセクターとクロマを使って計算します。
