色相、饱和度与明度：HSL 到 HEX 的转换逻辑
HSL 色彩模型是为人类直觉而设计：调整明度就能在保持色相不变的情况下获得深浅变化，这使得它成为调色板生成和主题定制的首选。而 HEX 则是以六个十六进制数字（#RRGGBB）或三个数字的简写形式（#RGB）直接表示 sRGB 色域内的颜色，是 CSS 和大多数设计工具中的标准交换格式。本页面将 HSL 的三个值——色相（0–360°）、饱和度（0–100%）和明度（0–100%）——实时映射为对应的 HEX 码，并且不引入任何色域裁剪，因为 sRGB 就是 HSL 转换的底层颜色空间。与 LAB 或 CMYK 转换不同，HSL 到 HEX 是一条直接且无损的路径，你输入的每个 HSL 三元组都能精确对应一个 HEX 值，不会有任何意外偏差。
即时反馈与全字段联动
页面以三个输入字段接受 HSL：Hue（色相，0–360 整数或小数），Saturation（饱和度，0–100%，必须带百分号），Lightness（明度，0–100%，必须带百分号）。例如输入 243, 75%, 59%，主输出区立即显示对应的 HEX #4f46e5。如果 RGB 的每个通道恰好都能用单个十六进制数字表示（例如 rgb(170, 187, 204) 对应 #abc），页面还会额外显示三字符简写形式，方便你在只需要大致颜色的场景下精简代码。其余色彩空间——RGB、HSV、CMYK、LAB——的值也同步更新，无需手动切换标签页。所有计算完全在浏览器本地完成，任何输入都不会离开你的设备。一旦某个值超出合法范围（色相不在 0–360，饱和度或明度不含百分号或超出 0–100%），页面会显示明确的提示：“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”（请输入 HSL：色相 0–360，两个百分比数值，例如 243, 75%, 59%）。格式化错误时这条消息立即显现，不会产生无效的颜色输出。
转换的内核：HSL → RGB → HEX
了解背后的数学有助于理解为什么输入始终有效。HSL 到 HEX 的转换分两步。第一步，HR 根据色相计算出 RGB 三个通道的中间值，再结合饱和度和明度调整每个分量的强度。具体公式依赖一个分段线性函数：色相决定 RGB 中的主色和次色位置，饱和度控制色彩纯度，明度则控制整体亮度。第二步，将得到的 RGB 值（0–255 范围）分别转换为两位十六进制数，例如 (79, 70, 229) 变成 #4f46e5。如果三个数值都能被 17 整除（即分别是 0, 17, 34, …, 255），则对应的十六进制数字重复（如 0x00→0，0x11→1……0xFF→F），此时三字符简写 #RGB 与六字符长写完全等价。整个过程中没有 RGB 值会被截断或取整——输入是百分比时，算法会精确计算到小数点后，再四舍五入为最接近的整数通道值，因此 HEX 输出与原始 HSL 是一一对应的。
实用场景：从调色板到生产代码
设计师常在 Figma 或 Sketch 中使用 HSL 滑块微调配色，因为“加一点明度”比修改 RGB 三个通道更直观。但当最终需要将颜色写入 CSS 或发给开发人员时，HEX 才是浏览器和设计系统的通用语言。本页面恰好填补这个环节：你在设计稿中记下的 hsl(243, 75%, 59%)，瞬间变成可复制的 #4f46e5。前端开发者收到这样的 HSL 值时，无需手动计算，直接粘贴即可获得 HEX。更进阶的用法是配合可访问性需求：通过提高明度（例如从 40% 提升到 60%）来满足 WCAG 对比度的同时，保持品牌色相不变，然后即时得到新的 HEX 值用于生产。HEX 六字符形式不携带原生 alpha 通道，对于需要透明度的场景，你仍需使用八字符 HEX（#RRGGBBAA）或 rgba()，但本页面专注纯色转换，不涉及 alpha。
常见错误与设计边界
用户最容易犯的输入错误是忘记带百分号。243, 75, 59 会被解析为缺少 %，页面直接报错。色相超过 360 或负值同样触发验证。另外需注意，CMYK 输出是依据 sRGB 色彩空间通过简化算法估算的，它反映的是屏幕上的近似，而非印刷设备的实际颜色。如果你需要印刷级的 CMYK，应当使用专业的 ICC 配置进行转换。至于 HEX 的三字符简写，许多设计师误以为 #abc 等同于 #aabbcc——它确实如此，但前提是原始 RGB 每个通道值都能被 17 整除。本页面会在满足条件时自动显示简写，但不会强制使用。所有转换在本地完成，无网络请求。
常见问题（FAQ）
-
问：为什么我输入
hsl(243, 75%, 59%)得到的 HEX 是#4f46e5，而手动算出来有一点点差别？
页面内部使用与 CSS 标准一致的算法，明度 59% 对应的 RGB 通道精确计算后四舍五入，你的手动计算可能用了不同的取整步骤。结果在可接受误差范围内一致。 -
问：HEX 输出中的字母是大写还是小写？
页面默认使用小写十六进制（#4f46e5），你可以直接复制到 CSS 中（大小写不敏感）。但如果你需要大写，可以自行转换，本页不提供大小写选项。 -
问：我可以输入类似
120.5, 50%, 70%这样的浮点色相吗？
可以。色相可以是任何实数（包括小数），内部计算时保留精度。结果 HEX 始终是整数 RGB 通道值。 -
问：页面显示的 CMYK 值能用于印刷吗？
不能。CMYK 值是基于 sRGB 的近似估计，与专业印刷 ICC 配置输出的结果可能有明显色差。仅作屏幕预览参考。 -
问：明度 0% 是不是纯黑色？明度 100% 是不是纯白色？
是。HSL 中明度 0% 对应 RGB(0,0,0)→#000000，明度 100% 对应(255,255,255)→#FFFFFF。饱和度的值不影响这点。 -
问：HEX 的三字符简写什么时候显示？
当 RGB 每个通道值都是 17 的倍数时（即0x00,0x11,0x22…0xFF），页面会显示#RGB形式。例如hsl(0, 0%, 100%)显示#fff。否则只显示六字符长写。