HSL→RGB変換ツールとは？
HSLは「Hue（色相）・Saturation（彩度）・Lightness（明度）」の頭文字で、色を直感的に表現できる方式です。色相はカラーホイール上の角度（0〜360°）、彩度は色の鮮やかさ（0〜100%）、明度は色の明るさ・暗さ（0〜100%）を表します。一方RGBは、同じ色を「赤（Red）・緑（Green）・青（Blue）」の3チャンネルで表し、それぞれ0〜255の値をとります。これは画面表示やCSS、画像ファイルで使われる形式です。このツールは、入力したHSLの色をぴったり対応するRGB値へ変換します。
使い方
色相を度数で、彩度をパーセントで、明度をパーセントで入力してください。対応するrgb(r, g, b)の値が即座に表示され、ライブプレビューのカラースウォッチで実際の色を目で確認できます。
計算式の解説
まずSとLを0〜1の小数に変換します。彩度（クロマ）は色の鮮やかさを表し、\(C = (1 - |2L - 1|)\cdot S\)で求めます。中間成分は\(X = C\,(1 - |(H/60 \bmod 2) - 1|)\)、補正値\(m = L - C/2\)は全体を正しい明度へ調整する役割を持ちます。色相は60°ごとの6つの区画（セクスタント）に分けられ、各区画ではC・X・0が決まった順序でR・G・Bに割り当てられます。最後に各成分にmを加え、255を掛けて（四捨五入して）整数値にします。
$$(R,G,B) = \big( (R_1+m)\cdot 255,\; (G_1+m)\cdot 255,\; (B_1+m)\cdot 255 \big)$$$$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\,(1 - |(H/60 \bmod 2) - 1|) \\ m &= L - \tfrac{C}{2} \\ S &= \frac{\text{Saturation }(\%)}{100},\quad L = \frac{\text{Lightness }(\%)}{100} \\ H &= \text{Hue }(^{\circ}) \end{aligned} \right.$$
計算例
HSL(210°, 50%, 60%) の場合：\(S = 0.5\)、\(L = 0.6\)。\(C = (1 - |1.2 - 1|)\times 0.5 = (1 - 0.2)\times 0.5 = 0.4\)。\(H/60 = 3.5\) なので、$$X = 0.4 \times (1 - |3.5 \bmod 2 - 1|) = 0.4 \times (1 - 0.5) = 0.2$$\(m = 0.6 - 0.2 = 0.4\)。区画3（\(\le H/60 < 4\)）では \((R',G',B') = (0, X, C) = (0, 0.2, 0.4)\)。mを加えると $$(0.4, 0.6, 0.8) \times 255 = (102, 153, 204)$$ となります。
よくある質問
RGBの数値が四捨五入されるのはなぜ？ RGBの各チャンネルは0〜255の整数のため、計算で得られた値を最も近い整数に丸めています。
彩度を0%にするとどうなる？ 完全に彩度を失った色は、明度だけで決まるグレーになります。R・G・Bの3チャンネルがすべて同じ値になります。
360を超える色相を入力したら折り返される？ はい。色相は360で割った余り（mod 360）として扱われるため、370°は10°と同じ結果になります。
