什麼是 HSL 轉 Hex 轉換器？
這個工具能將以 HSL 模型表示的色彩——也就是色相（Hue）、飽和度（Saturation）與亮度（Lightness）——轉換成 CSS、設計軟體和網頁開發中常用的十六進位（Hex）色碼。HSL 對人類來說相當直覺：色相決定你在色輪上挑選的顏色，飽和度控制鮮豔程度，亮度則決定整體的明暗。而 Hex（例如 #3F7FBF）才是瀏覽器與各種工具實際讀取的格式。
使用方法
輸入 0 到 360 度的色相、0 到 100% 的飽和度，以及 0 到 100% 的亮度，就能立即看到對應的 Hex 色碼、RGB 三個色版數值，以及即時的色塊預覽。這套換算法則是通用的，適用於任何顏色，完全不需要安裝任何軟體。
公式解析
換算的第一步是計算彩度（chroma）\(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)\)，而 Hex 字串就是把 R、G、B 三個兩位數的十六進位值串接起來。
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$ $$\text{where}\quad \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|)\cdot 0.5 = 0.5\)。H/60 = 3.5，因此 (3.5 mod 2) = 1.5，\(X = 0.5\cdot(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\cdot 255) = 64\)、\(G = \text{round}(0.5\cdot 255) = 128\)、\(B = \text{round}(0.75\cdot 255) = 191\) → #4080BF。
常見問題
色相會循環嗎？會的——色相 360 與 0 同樣都是紅色，本工具會把任何數值都正規化到 0–360 之間。
為什麼我的色版數值有時會差 1？四捨五入到最接近的整數時，可能會比那些採用「無條件捨去」的工具多或少 1；以四捨五入計算其實更為精確。
可以做出灰色嗎？可以——把飽和度設為 0，搭配任何色相，三個色版的值都會等於 \(\text{round}(L\cdot 255)\)，產生中性的灰色。
