HSL 轉換器
把 hsl() 與 hsla() 色值轉成 HEX、RGB 與 RGBA，也能貼上 HEX 或 RGB 反查 HSL。全部在瀏覽器內完成，附即時預覽色塊。
顏色值
等效顏色格式
輸入顏色以查看結果。
HSL 與 HEX 色碼的關係
HSL 用色相、飽和度與亮度描述顏色。色相是 0 到 360 度的角度，飽和度與亮度則是百分比，所以調色時比直接看通道數值更直覺。
這個轉換器同時讀取其他格式。貼上 HEX 色碼或 rgb() 數值，就會列出對應的 hsl() 與 hsla() 字串，讓你在設計工具、CSS 與 JavaScript 之間換算不必靠猜。
如何把 HSL 轉成 HEX
- 在輸入框輸入或貼上 hsl(217, 91%, 60%) 這類 HSL 色值。
- 按下「轉換色碼」。
- 確認預覽色塊，以及 HEX、HEX8、RGB、RGBA、HSL、HSLA 六列結果。
- 用該列旁的複製按鈕，複製你需要的格式。
HSL 轉換範例
由 HSL 得到天藍色
hsl(217, 91%, 60%)
#3C83F6
帶透明度的 HSL
hsla(217, 91%, 60%, 0.5)
#3C83F680
由 HEX 反查 HSL
#3B82F6
hsl(217, 91%, 60%)
UrsaKit 與其他 HSL 轉換器比較
| 比較項目 | UrsaKit | htmlcolorcodes.com | rgbtohex.net |
|---|---|---|---|
| 費用 | 免費 | 免費，含廣告 | 免費 |
| 讀取 hsl() 與 hsla() | 支援 | 支援 | 不支援 |
| 同時反查 HEX 與 rgb() | 支援 | 支援 | 部分支援 |
| 透明度處理 | 支援，hsla() 轉 hex8 | 支援 | 部分支援 |
| 逐項複製各格式 | 支援 | 部分支援 | 不支援 |
| 上傳你的色值 | 不會 | 不會 | 不會 |
常見問題
常見問題
HSL 是什麼意思？
色相（Hue）、飽和度（Saturation）、亮度（Lightness）。色相是角度，飽和度與亮度是百分比，所以 hsl(217, 91%, 60%) 代表色相 217、飽和度 91%、亮度 60%。
可以改貼 HEX 色碼嗎？
可以。這個轉換器支援 hsl()、hsla()、HEX、rgb() 與 rgba()，你手上是哪種格式就從哪種開始。
透明度怎麼處理？
hsla() 的第四個數值介於 0 到 1，會寫成 HEX8 的後兩位，所以 hsla(217, 91%, 60%, 0.5) 等於 #3B82F680。
為什麼轉出來的 HSL 跟原本差一點？
飽和度與亮度會四捨五入到整數百分比，由 RGB 反推時可能差 1 個百分點，顏色本身不變。
輸入的色值會被上傳嗎？
不會。解析與轉換都在瀏覽器內用 JavaScript 完成，不會把色值送到任何伺服器。
我想把 RGB 轉成 HEX 呢？
可以，用下方連結的 RGB 轉 HEX 或 HEX 轉 RGB 轉換器，直接從那些格式開始。