HEX 轉 HSL 轉換器
線上把 HEX 顏色值轉成 HSL:邊輸邊出結果,附換算示例和常用顏色對照表,免費即用。
輸入 HEX 顏色值,下方 HSL 值即時更新;也可以直接從色塊取色。
換算示例
HEX #ff5733 = HSL 11, 100%, 60%
換算原理
- HEX 顏色碼就是 RGB 三個通道的十六進位寫法:每個通道兩位,00 表示 0,ff 表示 255。
- HSL 用色相(0–360° 色環)、飽和度和亮度來描述同一個顏色,想把顏色調暗或降飽和,直接改對應分量就行。
常用顏色 HEX / HSL 對照表
| 顏色 | HEX | HSL |
|---|---|---|
| 紅色 | #ff0000 | 0, 100%, 50% |
| 橙色 | #ffa500 | 39, 100%, 50% |
| 黃色 | #ffff00 | 60, 100%, 50% |
| 綠色 | #008000 | 120, 100%, 25% |
| 青色 | #00ffff | 180, 100%, 50% |
| 藍色 | #0000ff | 240, 100%, 50% |
| 紫色 | #800080 | 300, 100%, 25% |
| 粉紅色 | #ffc0cb | 350, 100%, 88% |
| 棕色 | #a52a2a | 0, 59%, 41% |
| 白色 | #ffffff | 0, 0%, 100% |
| 灰色 | #808080 | 0, 0%, 50% |
| 黑色 | #000000 | 0, 0%, 0% |
所有換算都在你的瀏覽器本機完成,輸入內容不會上傳到 BroBroGo。
常見問題
HEX 怎麼轉成 HSL?
在上方輸入或貼上 HEX 值,HSL 值會邊輸邊更新;也可以點色塊直接選色。
換算結果精確嗎?
數值會四捨五入到整數,這也是 CSS 和設計工具的常用寫法,誤差遠低於肉眼可辨的程度。