HSL转RGB转换器

使用方法

HSL转RGB转换器三步搞定：

1. 「色相 H」填 0～360，演示 210（偏蓝）；「饱和度 S」与「亮度 L」填百分数，演示 100 与 50。
2. 点「换算」，结果区给出 rgb(0,128,255) 与十六进制 #0080FF，并显示色块。
3. 点「复制 RGB」拿走色值，或「导出对照表 CSV」保存常见颜色的换算表。

HSL转RGB转换器能解决什么

它适合需要把「颜色感觉」翻译成代码的人：

• 设计稿转代码：设计师给的是 HSL，前端要的是 RGB/#HEX，一步换好。
• 调色核对：改 H 看色相在色轮上怎么走，改 L 看明暗变化。
• 批量对照：导出 12 组常见颜色的结果，写主题色时直接查表。

本页不做的事：不做 RGB 转 HSL 的反向换算，也不生成配色方案——只忠实做一次坐标换算。

原理和变量

① 用了哪个具体函数：标准 HSL→RGB 公式，先把 S、L 归一化到 0～1，算出色度 C = (1-|2L-1|)×S、X = C×(1-|((H/60) mod 2)-1|)、m = L - C/2，再按 H 所在 60° 区段分配 r、g、b。

② 关键参数为什么这样取：H 取 0～360 是因为色相是一个圆，超过 360 等价于减去 360；S、L 用百分数是因为它们本质是比例，用 0～100 更符合直觉。

③ 遵循哪个标准：换算口径与 CSS hsl()（W3C CSS Color 规范）一致，两者结果应逐位吻合。

④ 输入怎么变成输出：HSL(210,100%,50%)：C=1，X≈0.5，m=0；H 在 180～240 段，得到 r=0、g=0.5、b=1；×255 并四舍五入得 rgb(0,128,255)，即 #0080FF。

⑤ 边界与阈值：H 超 360 或为负会提示（也可循环折算）；S、L 超 100 或为负会提示；L=0 恒为黑、L=100 恒为白，与 S、H 无关。

⑥ 常见误用的正确解释：HSL 里的 L 不是「颜色的亮度感」而是几何中点，同样 L 下不同 H 观感明暗不同；本页输出的 RGB 是 0～255 整数，不带 alpha。

完整示例

演示输入 HSL(210, 100%, 50%)，逐步推导：

• 归一化：S=1，L=0.5，色度 C = (1-|2×0.5-1|)×1 = 1。
• H/60 = 3.5，中间量 X = 1×(1-|3.5 mod 2 - 1|) = 0.5。
• H 落在 180°～240° 段，赋值顺序使 r=0、g=X=0.5、b=C=1。
• 加 m=0 后乘 255：r=0、g=128、b=255，即 rgb(0,128,255)、#0080FF。

再试 HSL(0,100%,50%) 得 rgb(255,0,0) 纯红，HSL(120,100%,50%) 得 rgb(0,255,0) 纯绿。演示仅作说明。

输入范围与对照表

12 组常见 HSL 的换算对照（H=色相，S=饱和度，L=亮度）：

「导出对照表 CSV」会输出同样的 12 组数据（带 BOM，Excel 直接可读）。

结果边界和舍入

RGB 各分量按四舍五入取 0～255 整数，因此相邻 HSL 可能落到同一个 RGB（色深有限）。当 S=0 时输出灰色，此时 H 无论取多少结果都一样。

十六进制固定为 6 位大写，不含 alpha 通道；如果你的设计需要透明度，请另外指定 opacity，本工具不处理。

常见问题

相关工具

• 颜色选择器
• 邻近色颜色方案生成器
• 浅色颜色生成器
• 颜色对比度检测
• CMYK转RGB转换器
• 色盲模拟
• 十六进制颜色表