RGB 告诉屏幕要发出多少光；HSL 告诉你颜色实际看起来怎样。把三个通道转换成色相、饱和度和亮度后，颜色就更容易手工调整。
如何将 RGB 转换为 HSL
- 把 R、G、B 除以 255，使每个值落在 0 到 1 之间。
- 取三者中的最大值和最小值——它们的平均值就是亮度 L。
- 如果最大值和最小值相等，颜色就是灰色：色相和饱和度均为 0。
- 否则从最大值与最小值的差推导出 S，并根据哪个通道是最大值读取 H。
示例演示
RGB rgb(155, 89, 182)=HSL hsl(283, 39%, 53%)
原则上是精确的。由于 H、S 和 L 通常以四舍五入后的整数显示，来回转换可能会让某个通道偏移一两步。
RGB 与 HSL 说明
RGB 是什么？
RGB 用三个光通道来描述颜色——红、绿、蓝——每个从 0 到 255。它反映了屏幕的实际工作方式：三个通道都为 255 为白色，全部为 0 为黑色。当你需要用数值进行计算时，RGB 是合适的选择，rgba() 则在其上增加了透明度。
- 语法：
- rgb(R, G, B)
- 范围：
- 每个通道 0–255
- 适合用于：
- 代码、canvas、使用 rgba() 的透明度
HSL 是什么？
HSL 将颜色拆分为色相（在色轮上 0–360°）、饱和度（颜色程度，0–100%）和亮度（明亮程度，0–100%）。因为每一部分都符合人们描述颜色的方式，HSL 是手动或在代码中构建色阶、色调和一致调色板的最简单格式。
- 语法：
- hsl(H, S%, L%)
- 范围：
- 0–360°，0–100%，0–100%
- 适合用于：
- 调色板、色阶与色调、主题化
RGB 到 HSL 参考表
最常见的 CSS 颜色，已从 RGB 转换为 HSL。
| 颜色 | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |