用 HSL 选色很直观，但样式表、设计交接和品牌文件仍然使用 HEX。此转换器填补这个空白，为任意色相、饱和度和亮度组合给出六位代码。
如何将 HSL 转换为 HEX
- 把饱和度和亮度变成小数：60% 变成 0.6。
- 计算色度 C = (1 − |2L − 1|) × S — 这表示颜色距灰色的远近。
- 用色相把该色度分配到红、绿、蓝通道，然后把三者整体平移 L − C/2。
- 将每个通道乘以 255，四舍五入，然后写成两个十六进制位。
示例演示
HSL hsl(204, 70%, 53%)=HEX #3398DB
四舍五入只在最后一步发生，当每个通道被定格到 0–255 的整数值时。结果是与你的 HSL 输入最接近的 HEX 代码，通常与设计工具显示的一致。
HSL 与 HEX 说明
HSL 是什么？
HSL 将颜色拆分为色相（在色轮上 0–360°）、饱和度（颜色程度，0–100%）和亮度（明亮程度，0–100%）。因为每一部分都符合人们描述颜色的方式，HSL 是手动或在代码中构建色阶、色调和一致调色板的最简单格式。
- 语法：
- hsl(H, S%, L%)
- 范围：
- 0–360°，0–100%，0–100%
- 适合用于：
- 调色板、色阶与色调、主题化
HEX 是什么？
HEX 代码是一个六位的十六进制数，前面带有 #，用于存储颜色的红、绿、蓝通道。每对十六进制位对应一个通道，从 00（无）到 FF（满），以比 RGB 更简短的表示方式覆盖同样的 1670 万颜色。HEX 是 CSS、设计工具和品牌指南中的默认形式。
- 语法：
- #RRGGBB
- 范围：
- 每个通道 00–FF
- 适合用于：
- CSS、设计交接、品牌指南
HSL 到 HEX 参考表
最常见的 CSS 颜色，已从 HSL 转换为 HEX。
| 颜色 | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |
常见问题
把饱和度和亮度变成小数：60% 变成 0.6。 计算色度 C = (1 − |2L − 1|) × S — 这表示颜色距灰色的远近。 用色相把该色度分配到红、绿、蓝通道，然后把三者整体平移 L − C/2。 将每个通道乘以 255，四舍五入，然后写成两个十六进制位。
四舍五入只在最后一步发生，当每个通道被定格到 0–255 的整数值时。结果是与你的 HSL 输入最接近的 HEX 代码，通常与设计工具显示的一致。
HEX 代码是一个六位的十六进制数，前面带有 #，用于存储颜色的红、绿、蓝通道。每对十六进制位对应一个通道，从 00（无）到 FF（满），以比 RGB 更简短的表示方式覆盖同样的 1670 万颜色。HEX 是 CSS、设计工具和品牌指南中的默认形式。
可以。输入框旁的交换按钮会带你到 HEX 到 HSL 的转换器，使用方式完全相同。两个方向使用相同的公式，只是反向应用而已。
在 HSL 中建立调色板，然后导出 HEX。调色板保持其逻辑（相同色相、分级亮度），而交付的代码保持开发者期望的格式。