HSL 用人们谈论颜色的方式来描述：哪个色相、颜色饱和度、亮度多少。把 HEX 转成 HSL 是把颜色变成可调节形式（变亮、去饱和或从它构建整个色阶）的最快方法。
如何将 HEX 转换为 HSL
- 把 HEX 转成 RGB，并将每个通道除以 255，使三者都落在 0 到 1 之间。
- 找出三者中的最大值和最小值。它们的平均值就是亮度 L。
- 它们之间的差决定饱和度 S：对于亮色，用差值除以 (2 − max − min)，对于暗色则除以 (max + min)。
- 持有最大值的通道决定色相 H — 红色为 0°、绿色为 120°、蓝色为 240° — 另两个通道则把色相定位到该区段内。
示例演示
HEX #2ECC71=HSL hsl(145, 63%, 49%)
数学上是精确的，但 HSL 通常会四舍五入到整数度和百分比。来回转换可能会让 RGB 偏离原值一两个单位——在实务中不可见，但如果多次来回转换应注意。
HEX 与 HSL 说明
HEX 是什么？
HEX 代码是一个六位的十六进制数，前面带有 #，用于存储颜色的红、绿、蓝通道。每对十六进制位对应一个通道，从 00（无）到 FF（满），以比 RGB 更简短的表示方式覆盖同样的 1670 万颜色。HEX 是 CSS、设计工具和品牌指南中的默认形式。
- 语法：
- #RRGGBB
- 范围：
- 每个通道 00–FF
- 适合用于：
- CSS、设计交接、品牌指南
HSL 是什么？
HSL 将颜色拆分为色相（在色轮上 0–360°）、饱和度（颜色程度，0–100%）和亮度（明亮程度，0–100%）。因为每一部分都符合人们描述颜色的方式，HSL 是手动或在代码中构建色阶、色调和一致调色板的最简单格式。
- 语法：
- hsl(H, S%, L%)
- 范围：
- 0–360°，0–100%，0–100%
- 适合用于：
- 调色板、色阶与色调、主题化
HEX 到 HSL 参考表
最常见的 CSS 颜色，已从 HEX 转换为 HSL。
| 颜色 | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |