RGB与HSL：两种色彩模型的核心差异
RGB（红绿蓝）是一种加色混合模型，用于电子屏幕显示。每个通道取值0到255，代表该基色光的强度。三个通道共同决定一个颜色，例如79, 70, 229对应某种紫色。这种模型的优点是直接对应硬件，但缺点也很明显：调整一个通道会同时改变色相、饱和度和明度，人很难凭直觉预测结果。
HSL（色相、饱和度、明度）则从人类感知角度描述颜色。色相用一个0°到360°的色环表示，0°是红色，120°是绿色，240°是蓝色，依此类推。饱和度和明度都表示为百分比。HSL的核心优势是明度可独立调节而不影响色相——这正是设计调色板、生成明暗变体时最需要的特性。
本页面的独特价值
大多数色彩转换工具只是单向输出，但本页面支持双向实时转换：输入RGB立刻看到HSL、HEX、HSV、CMYK和LAB值；直接编辑任意输出字段（包括HSL）也会反向更新所有其他字段。所有计算都在浏览器中完成，你输入的任何数据都不会上传到服务器。
这种设计特别适合三类人群：UI/UX设计师需要生成符合WCAG对比度的颜色变体，只需调整HSL的明度而保持品牌色相；前端开发者将设计稿中的RGB数值翻译为CSS的hsl()或hsla()函数；主题构建者通过改变HSL的饱和度或明度创建浅色或深色模式。
输入输出规则与边界情况
有效输入格式
- RGB：三个0‑255之间的整数，用逗号或空格分隔，例如
79, 70, 229或79 70 229。 - HSL：色相0‑360，饱和度和明度百分比，如
243, 75%, 59%。
错误提示
- RGB格式错误时显示：“Enter RGB as three numbers 0–255, like 79, 70, 229.”
- HSL格式错误时显示：“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
色域与精度
- CMYK输出是基于sRGB的屏幕估算值，不应直接用于专业印刷。
- 当从LAB或CMYK输入一个超出sRGB色域的颜色时，工具会将其调整到最接近的可显示颜色；再次转换回LAB可能导致微小偏移，这是正常现象。
RGB到HSL的转换算法
转换分三步完成：
- 归一化：将RGB各分量除以255，得到范围的值
r',g',b'。 - 计算最大值cmax与最小值cmin，以及差值
delta = cmax - cmin。 - 计算明度(L)、饱和度(S)和色相(H)：
- 明度
L = (cmax + cmin) / 2 - 饱和度
S = 0如果delta = 0；否则S = delta / (1 - |2L - 1|) - 色相根据哪个分量是最大值确定：
- 如果
cmax = r'：H = 60° × ((g' - b') / delta mod 6) - 如果
cmax = g'：H = 60° × ((b' - r') / delta + 2) - 如果
cmax = b'：H = 60° × ((r' - g') / delta + 4)
- 如果
- 明度
最终H取值0‑360，S和L为0%‑100%。这个算法是CSS标准和颜色科学中最常用的形式。
为何HSL适合调色板与主题设计
独立调节明度
在RGB中，降低亮度通常需要同时减小三个通道的值，这会使颜色向黑色滑动，并可能改变色相。在HSL中，只需降低明度百分比，色相和饱和度保持不变。例如品牌色hsl(243, 75%, 59%)明度降低到40%即获得深色变体，升高到80%获得浅色变体，色相始终是243°。
与CSS直接对接
现代浏览器支持hsl()和hsla()函数，可直接在样式表中使用。JavaScript动态修改颜色时，操作HSL属性也比解析RGB字符串更直观。
可访问性辅助
WCAG对比度要求前景色与背景色的相对明度差达到一定阈值。使用HSL，你可以精确调整明度值来满足4.5:1或3:1的比例，而无需重新设计配色方案。
HSL的局限性与替代方案
HSL虽然比RGB更适合人思考，但它并非感知均匀的色彩空间。黄色（色相60°）和蓝色（色相240°）在相同明度百分比下，人眼感觉黄色亮得多。这是因为人类视觉对中波长的绿黄光更敏感，而HSL的明度计算公式只是简单的算术平均。对于需要严格感知一致性的场景——例如数据可视化中的等距色阶——应使用CIE LAB或CAM16等更先进的模型。另外，CMYK是从RGB估算的，不能替代印刷厂的ICC配置文件。
常见问题FAQ
1. 为什么HSL中明度50%的黄色和蓝色看起来亮度不同？
因为HSL的明度是(max+min)/2的线性计算，未考虑人眼对波长敏感度的非线性。黄色反射更多光，所以实际感知亮度更高。如需感知均匀性，请用LAB。
2. 我可以在印刷中使用这里的CMYK值吗？
不能直接使用。CMYK值是sRGB到标准CMYK的估算，未考虑实际印刷色域、油墨和纸张。专业印刷必须使用ICC配置文件进行转换。
3. 输入RGB时可以用空格代替逗号吗？
可以。工具同时接受逗号分隔或空格分隔的三个整数。例如79 70 229和79, 70, 229效果相同。
4. 转换后HEX值为什么有时会舍入？
HEX格式只保留两位十六进制（对应0‑255整数）。RGB通道本身就是整数，所以舍入只发生在反向转换（如HSL→RGB）时，结果会四舍五入到最接近的整数。
5. 如果我想保持色相不变但调整饱和度，应该怎么用HSL？
直接在HSL输入框中修改饱和度百分比。例如将243, 75%, 59%改为243, 50%, 59%。所有其他字段会同步更新。
6. 这个工具支持浮点RGB值吗？
不支持。RGB必须输入0‑255整数。如果从其他工具复制了带小数的值（如79.5），请先四舍五入。HSL的色相可以输入小数，饱和度和明度则需使用百分比整数或小数。