HSL→RGB変換ツールとは？
このツールは、HSLモデル（Hue＝色相、Saturation＝彩度、Lightness＝明度）で表した色を、画面表示やCSS、画像ファイルで使われるRGBモデルへ変換します。HSLは「色そのもの（色相）」と「鮮やかさ（彩度）」「明るさ（明度）」を分けて扱えるため、デザイナーにとって直感的に色を調整しやすいのが特長です。一方でRGBは、まったく同じ色を赤・緑・青の光の量として表現します。変換は正確で、有効なHSL値であればどんな入力にも対応します。
使い方
色相を度数（0〜360）、彩度をパーセント（0〜100）、明度をパーセント（0〜100）で入力してください。計算ツールは、それぞれ0〜255の範囲で対応するrgb(r, g, b)の値を返します。さらにリアルタイムのカラースウォッチも表示されるので、結果を目で確かめながら使えます。
計算式の仕組み
まず彩度と明度を0〜1の範囲にスケーリングします。彩度（クロマ）は\( C = (1 - |2L - 1|)\,S \)で求められ、これが色の鮮やかさを表します。補助値\( X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \)は、60°ごとの色相区間内における中間的な混色を担います。そして\( m = L - \tfrac{C}{2} \)が、指定した明度に合わせて全体を調整します。色相がどの60°のセクターに入るかに応じて、C・X・0がR・G・Bに特定の順番で割り当てられ、最後にmを加え、各チャンネルに255を掛けて四捨五入します。
$$ C = (1 - |2L - 1|)\,S,\quad X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right),\quad m = L - \tfrac{C}{2} $$各チャンネルは次のように求めます。
$$ (R,G,B) = \bigl((R'+m)\cdot 255,\ (G'+m)\cdot 255,\ (B'+m)\cdot 255\bigr) $$
計算例
HSL(210°, 50%, 50%)の場合：\( S = 0.5 \)、\( L = 0.5 \)。\( C = (1 - |0|)\cdot 0.5 = 0.5 \)。\( H/60 = 3.5 \)なので\( (3.5 \bmod 2) = 1.5 \)、\( X = 0.5\cdot(1 - |1.5 - 1|) = 0.25 \)。\( m = 0.5 - 0.25 = 0.25 \)。色相210°はセクター3（180〜240°）に入るため、\( (R',G',B') = (0, X, C) = (0, 0.25, 0.5) \)となります。mを加えて×255すると、\( R = 64 \)、\( G = 128 \)、\( B = 191 \) → rgb(64, 128, 191)になります。
よくある質問
入力できる範囲は？ 色相は0〜360度、彩度と明度は0〜100パーセントです。
なぜ値が四捨五入されるの？ RGBの各チャンネルは0〜255の整数でなければならないため、スケーリングした結果を最も近い整数に丸めています。
グレーも作れる？ はい。彩度を0にすれば、色相がどの値であってもR・G・Bはすべて明度を0〜255にスケーリングした同じ値になり、グレーが得られます。
