什麼是 HSL 轉 RGB 轉換器?
這項工具可將以 HSL 模型(色相 Hue、飽和度 Saturation、明度 Lightness)表示的顏色,轉換為螢幕、CSS 與影像檔案普遍採用的 RGB 模型。對設計師來說,HSL 相當直覺,因為它把「顏色本身」(色相)、「鮮豔程度」(飽和度)與「明亮程度」(明度)分開來表示;而 RGB 則是用紅、綠、藍三種光的強度來描述同一個顏色。本轉換結果完全精確,適用於任何有效的 HSL 數值。
使用方法
輸入色相的角度(0–360)、飽和度的百分比(0–100),以及明度的百分比(0–100)。計算器會回傳對應的 rgb(r, g, b) 數值,每個通道介於 0 到 255 之間,同時提供即時色塊預覽,讓你直接以肉眼確認結果是否正確。
公式解析
首先將飽和度與明度換算到 0–1 的範圍。彩度 $$C = (1 - |2L - 1|)\cdot S$$ 代表結果的色彩濃度。輔助值 $$X = C\cdot\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 並四捨五入取整。
實際範例
以 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 的明度值。