HSL 到 RGB：把人对颜色的直觉翻译给屏幕
为什么这个转换是独特的
HSL（色相、饱和度、明度）是少数几种为人的直觉设计的颜色模型。你在其中调整明度，色相保持不变——这意味着做一套同色系配色方案时，改变的只是亮度，颜色本身不会漂移。而RGB（红、绿、蓝）是屏幕发光的原始语言，三个通道各用0–255的整数直接控制每个子像素的亮度。
这个页面做的就是这两者之间的转换。关键在于：这个映射是无损的。每一个合法的HSL值都对应且只对应一个RGB三元组，并且这个RGB三元组一定落在0–255的有效范围内。与从LAB或CMYK转换到RGB不同——那些转换会遇到色域外的颜色，导致数值被裁剪、颜色被压缩——HSL到RGB永远不会发生裁剪。你把颜色从HSL转成RGB再转回HSL，得到的数字与原值完全相同。
转换是如何工作的
HSL采用一个三维的圆锥或双锥空间来描述颜色：
- 色相（H）：0–360度，从红色（0°）开始，经过绿色（120°）、蓝色（240°），回到红色（360°）。
- 饱和度（S）：0–100%，表示颜色的纯度。0%时颜色完全是灰色。
- 明度（L）：0–100%，表示颜色的亮度。0%是纯黑，100%是纯白。
RGB则是加法颜色模型，三种颜色的光叠加形成最终颜色。每个通道的数值直接对应该原色的发光强度。
转换分两步：先根据饱和度判断颜色落在灰阶区还是彩色区，再计算每个通道的中间值。一个数学上的中间步骤会生成一个所谓的“RGB辅助值”（有时写作R₁、G₁、B₁），它们的范围是0–1，然后通过明度调整公式映射到最终的0–255整数。这个公式考虑了HSL圆锥的几何结构，确保明度变化时色相不动。
输入、输出与边界情况
页面接收一个HSL值，格式如 243, 75%, 59%。所有其他字段即时更新：
| 输出字段 | 范围 | 示例值（输入：243, 75%, 59%） |
|---|---|---|
| HEX | 6位十六进制 | #4F46E5 |
| RGB | 每个通道0–255 | 79, 70, 229 |
| HSL | 0–360, %, % | 照原样显示 |
| HSV | 0–360, %, % | 242°, 71%, 90% |
| CMYK | 每个0–100% | 66, 69, 0, 10（估计值） |
| LAB | L 0–100, a/b ±128 | 34.2, 53.6, -80.1（取决于具体计算） |
错误处理：如果输入不合法——比如色相值超过了360、缺少百分号、用了中文括号——页面显示一条提示：
“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
CMYK的注意事项：页面上显示的CMYK是屏幕上的估算值。它假设了sRGB色彩空间与标准印刷油墨之间的一个通用转换矩阵。实际打印时，纸张的白度、墨水的品牌、印刷机的特性都会改变最终颜色。专业印刷应当使用专门的CMYK配置文件（如FOGRA、SWOP）和分色工具。
理解各种颜色模型的目的
不同颜色模型解决不同的问题：
- HSL与HSV：为人类设计。适合用于生成渐变色、配色方案、主题系统。调整明度或值不会破坏色相。
- RGB：屏幕的原生语言。CSS里的
rgb(79, 70, 229)直接告诉显示器该发什么光。 - HEX：RGB的十六进制缩写，主要在CSS和设计工具中使用。
#4F46E5等于rgb(79, 70, 229)。 - CMYK：减色模型，用于印刷。四种墨水（青、品红、黄、黑）叠加吸收光线。CMYK的色域比RGB窄，所以有些鲜艳的RGB颜色无法用油墨印出来。
- LAB：感知均匀性模型。L表示亮度，a和b表示颜色方向。它的设计目标是“相同的色差数字对应相同的人眼感知差异”，用于颜色匹配和工业标准。
实际使用中的建议与常见错误
调整明度：在HSL里改变L值，颜色会变亮或变暗但色相不变。这在设计系统里非常有用——你定义一个主色，然后生成浅色、深色变体，所有颜色仍然视觉上“属于同一家族”。如果用RGB来做这件事，直接乘以一个系数会让颜色变灰或者漂向另一个色相。
饱和度为0：当S=0%时，所有色相都收敛到同一种灰色。L值决定了这个灰色的深浅。这是完全合理的数学结果，但用户看到H值无关紧要时可能会困惑。
明度极端值：L=0%永远是纯黑，L=100%永远是纯白。无论H和S取什么值，结果都一样。这符合HSL双锥模型的几何：顶部和底部是单点。
CMYK估算不等同于印刷数据：屏幕上看到的所有CMYK值都经过了简化的转换公式。它足以让你大致了解一个HSL颜色对应哪种印刷颜色，但不应该用它来生成最终交货的印刷文件。
常见问题
HSL的H值我应该输入0–360还是0–359？ 0°和360°是同一个颜色（红色）。输入0°和360°会得到完全相同的RGB结果。大部分实现接受0–360的闭区间，含两端。
转换会不会产生小数RGB值？ 不会。页面上显示的RGB是四舍五入到0–255之间的整数。内部计算时使用的浮点精度足够让四舍五入结果唯一确定，不存在“边界值两种可能的整数舍入”的情况。
我可以在设计工具里看到HSL，但CSS只接受RGB，怎么办？
直接用这个页面把HSL转成RGB或者HEX。CSS现在也支持hsl()函数，但老的浏览器或某些代码库可能只接受十六进制或RGB格式。
为什么CMYK值和打印店给的不同？ 因为页面上用的是通用转换公式，而打印店有自己的色彩管理设置——包括特定的ICC配置文件、油墨类型和纸张特性。CMYK输出始终应该由最终印刷设备对应的配置文件来确定。
页面会记录我输入的色值吗？ 所有颜色转换都在你的浏览器内完成，没有任何数据被发送到服务器。你不联网的本地也可以正常使用。
为什么HSV和HSL不一样？ HSV（色调、饱和度、明度值）使用一个六棱锥模型，它的“明度”（V）对应RGB三个通道的最大值。而HSL的“明度”（L）使用平均值。所以相同H和S下，HSL看起来通常更接近人眼感知的亮度；HSV的V通道更接近发光强度。两者各有用途，但不要混用。