RGBとHSLの違いとは？
RGBは、赤（Red）・緑（Green）・青（Blue）の光を混ぜ合わせて色を表現する方式で、各チャンネルを0〜255の範囲で指定します。一方HSLは、同じ色をより直感的な3つの数値で表します。色相（Hue：0〜360°のカラーホイール上での位置）、彩度（Saturation：鮮やかさ、0〜100%）、輝度（Lightness：明るさ・暗さ、0〜100%）の3要素です。「もっと明るく」「もっと暗く」「もっと鮮やかに」「もっとグレーに」といった調整が数値にそのまま対応するため、デザイナーにとってはHSLのほうが扱いやすいケースが多くあります。
この変換ツールの使い方
色の赤（R）・緑（G）・青（B）の値を、それぞれ0〜255の範囲で入力してください。対応するHSLの3つの値がすぐに表示され、hsl(H, S%, L%)の形式でそのままCSSに貼り付けて使えます。
変換の計算式
まず各チャンネルを255で割って、0〜1の範囲に正規化します。これらのうち最大値をmax、最小値をminとします。輝度は \(L = (max + min) \div 2\) で求めます。max と min が等しい場合、その色は灰色（グレー）の濃淡なので、彩度と色相はどちらも0になります。それ以外の場合、彩度は \(L > 0.5\) のとき \((max - min) \div (2 - max - min)\)、\(L \le 0.5\) のとき \((max - min) \div (max + min)\) で計算します。色相は、どのチャンネルが最大値かに応じて算出し、度数（0〜360°）に換算します。
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
計算例
トマトレッド RGB(255, 99, 71) の場合：正規化すると（1.0, 0.388, 0.278）。max = 1.0、min = 0.278 なので、\(L = 0.639 \to 63.9\%\)。\(L > 0.5\) なので、\(S = (1.0 - 0.278) \div (2 - 1.0 - 0.278) = 0.722 \div 0.722 = 1.0 \to 100\%\)。最大値は赤（R）なので、\(H = 60 \times ((0.388 - 0.278) \div 0.722) = 60 \times 0.1525 = 9.1^{\circ}\)。結果は hsl(9, 100%, 64%) となります。
よくある質問（FAQ）
グレーの色相が0になるのはなぜ？ 赤・緑・青の値がすべて等しいとき、その色には主となる色味がありません。そのため色相は定義できず、慣例として0と表記されます。
HSLはHSV/HSBと同じですか？ いいえ、違います。HSLとHSVは色相（Hue）は共通ですが、彩度と3つ目の値の計算方法が異なります。このツールが出力するのはHSLです。
結果をそのままCSSに貼り付けられますか？ はい。最近のブラウザは hsl(9, 100%, 64%) をそのまま色の値として認識します。
