HSL→HEX変換ツールとは？
このツールは、HSLモデル（色相＝Hue、彩度＝Saturation、明度＝Lightness）で表した色を、CSSやデザインソフト、Web制作で使われる16進数（HEX）表記に変換します。HSLは人間の感覚に合った指定方法で、色相で色相環上の色を選び、彩度で鮮やかさを、明度で明るさ・暗さを調整できます。一方で、ブラウザや各種ツールが実際に読み取るのはHEX（例：#3F7FBF）の形式です。
使い方
色相を0〜360度、彩度を0〜100％、明度を0〜100％で入力するだけで、変換後のHEXコード、RGBの各チャンネル値、そして実際の色を表示するカラースウォッチがすぐに確認できます。この変換はあらゆる色に共通で使え、ソフトのインストールは一切不要です。
変換の仕組み（計算式）
変換ではまず、彩度（クロマ）\(C = (1 - |2L - 1|)\cdot S\) を求めます。ここでSとLは0〜1の小数です。原色どうしのグラデーションを処理する補助値 \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) を計算し、明るさの補正値 \(m = L - \tfrac{C}{2}\) で結果を適切な明度まで持ち上げます。色相が60度ごとのどのセクターに入るかに応じて、(R′,G′,B′) の各チャンネルにC、X、0が割り当てられます。最終的な各チャンネルは \(\text{round}((c' + m)\cdot 255)\) で計算し、R・G・Bそれぞれを2桁の16進数にして連結したものがHEX文字列になります。
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$$$\left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$
計算例
HSL(210, 50%, 50%) の場合：S = 0.5、L = 0.5 なので \(C = (1 - |0|)\times 0.5 = 0.5\) となります。H/60 = 3.5 なので (3.5 mod 2) = 1.5 となり、\(X = 0.5\times (1 - |0.5|) = 0.25\)。\(m = 0.5 - 0.25 = 0.25\) です。色相210はセクター3（180〜240）に入るため、(R′,G′,B′) = (0, X, C)。したがって \(R = \text{round}(0.25\times 255) = 64\)、\(G = \text{round}(0.5\times 255) = 128\)、\(B = \text{round}(0.75\times 255) = 191\) となり、結果は #4080BF です。
よくある質問
色相は一周してつながりますか？ はい。色相360は色相0と同じ赤を表し、本ツールは入力された値を0〜360の範囲に正規化します。
チャンネルの値が他ツールと1だけずれるのはなぜ？ 本ツールは最も近い整数に「四捨五入」しているため、小数を「切り捨て」する他ツールと比べてチャンネルが±1ずれることがあります。四捨五入のほうがより正確な結果です。
グレーは作れますか？ はい。彩度を0にすれば色相がどの値でも、R・G・Bの3チャンネルすべてが \(\text{round}(L\times 255)\) となり、無彩色のグレーになります。
