HSL 是选择颜色的友好方式，RGB 则是屏幕、canvas API 和图像代码真正使用的格式。此转换器将任意色相、饱和度和亮度三元组转换为精确的 0–255 通道值。
如何将 HSL 转换为 RGB
- 将 S 和 L 转成小数并计算色度 C = (1 − |2L − 1|) × S。
- 将色相除以 60 以找到它在色轮上的段落，并计算中间值 X = C × (1 − |(H/60 mod 2) − 1|)。
- 根据该段落将 C、X 和 0 分配到 R、G、B 插槽。
- 给三条通道都加上亮度偏移 L − C/2 并乘以 255。
示例演示
HSL hsl(37, 90%, 51%)=RGB rgb(243, 156, 18)
结果在最后四舍五入为整数通道前是精确的。支持带小数的色相或饱和度值，会四舍五入到最近的 RGB 三元组。
HSL 与 RGB 说明
HSL 是什么？
HSL 将颜色拆分为色相（在色轮上 0–360°）、饱和度（颜色程度，0–100%）和亮度（明亮程度，0–100%）。因为每一部分都符合人们描述颜色的方式，HSL 是手动或在代码中构建色阶、色调和一致调色板的最简单格式。
- 语法：
- hsl(H, S%, L%)
- 范围：
- 0–360°，0–100%，0–100%
- 适合用于：
- 调色板、色阶与色调、主题化
RGB 是什么？
RGB 用三个光通道来描述颜色——红、绿、蓝——每个从 0 到 255。它反映了屏幕的实际工作方式：三个通道都为 255 为白色，全部为 0 为黑色。当你需要用数值进行计算时，RGB 是合适的选择，rgba() 则在其上增加了透明度。
- 语法：
- rgb(R, G, B)
- 范围：
- 每个通道 0–255
- 适合用于：
- 代码、canvas、使用 rgba() 的透明度
HSL 到 RGB 参考表
最常见的 CSS 颜色，已从 HSL 转换为 RGB。
| 颜色 | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |