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 和设计工具的常用写法,误差远低于肉眼可辨的程度。