使用方法
- 打开页面默认就带示例：H=210、S=100、L=50，结果区已经显示 #0080FF 与 RGB 分量，你不需要先输入任何东西。
- 把你的 H、S、L 三个分量填进对应输入框，范围分别是 H 0 到 360、S 0 到 100、L 0 到 100。
- 在任意输入框里按回车也能立即转换，不必点按钮；结果区是当场算出来的，不是固定文案。
- 点「转换」按钮，页面先把分量归一化，再按标准 HSL 转 RGB 公式算红绿蓝，最后拼成 #RRGGBB；点「复制结果」复制十六进制值。
- 任一分量越界或为空时会点名当前字段提示你补全或修正，不会硬凑出一个错误颜色，避免你误以为转换成功。
- 本页不联网、不写本地存储，刷新即回到默认示例，所有转换都在你自己的浏览器里完成，输入内容不会离开设备。
这个 HSL转十六进制转换器 能解决什么
HSL转十六进制转换器 解决的是「设计稿用 HSL 描述、代码要 #RRGGBB」这个配色落地痛点。设计师常在工具里用色相、饱和度、亮度调色，而前端与许多软件只认十六进制色值，手动把三个分量换算成 RGB 再拼十六进制既慢又易算错。本工具一次给出准确色值，复制即用。
第一类用途是前端配色与样式调试。写 CSS、Canvas、图表时，常从设计变量里拿到 HSL，需要立刻得到对应的十六进制色值填进样式，本工具贴进去立即拿到 #RRGGBB，省去心算。
第二类用途是设计稿取色对齐。设计师给的标注是 HSL，开发要还原成代码色，逐字段换算容易偏差；用本工具统一转换，能保证两端颜色完全一致，也便于 code review 时核对。
第三类用途是颜色算法教学。很多人记不清 HSL 与 RGB 的换算关系，把同一组分量在输入框里试不同值，实时看到色块与分量变化，比口头解释更直观，也方便整理成教学材料。
第四类用途是批量生成色阶。做主题、调色板时，固定 H 与 S、只改 L 就能生成由浅到深的一列颜色，本工具逐次转换即可得到对应十六进制，效率比查表高。
第五类用途是跨工具的颜色搬运。有些设计软件导出的是 HSL，而另一些只接受十六进制，本工具在两者之间架起桥梁，避免反复切换软件手动换算。
第六类用途是自动化脚本的前置处理。在构建流程里把主题色从 HSL 量化成十六进制，比临时写换算代码更省心。理解这套「归一化加分段线性」的方法论后，你也能把它迁移到自己脚本里。
第七类用途是文档与教程里的示例展示。写技术文档、录教学视频时，常常需要把同一颜色同时展示 HSL 与十六进制两种写法，读者才能直观对比。本工具把两种形态并排输出，截图或复制都方便。
第八类用途是辅助无障碍与对比检查。对色觉障碍用户或需要核对色盲版本的设计，把 HSL 拆成量化分量后更容易判断是否落在安全区间，也能据此生成对比充分的替代配色，提升界面的可用性。
值得一提的是，本页所有转换都在本地完成，不联网也不上传。你可以放心粘贴项目配色，结果不会被任何服务器记录，这点和需要登录的在线取色站不同，更适合处理私密设计稿。
原理和变量
HSL转十六进制转换器 的核心是「归一化加分段线性」，不含随机成分，因此同一组分量永远得到同一组输出，可被手算复核。先把 H 除以 360、S 与 L 除以 100 都归一化到 0 到 1；若 S 为 0 则灰阶（R=G=B=L）；否则按亮度算 q 与 p 两个中间量，再根据 H 所在的六个扇区分别插值出 R、G、B，最后每个分量乘以 255 四舍五入并格式化为两位十六进制拼成 #RRGGBB。
为什么要先归一化？因为 H 用角度、S 与 L 用百分比，单位不统一无法运算；统一到 0 到 1 后才能套用同一套插值公式。下面变量表说明各环节含义，方便你对照手算。实际项目中 HSL 常被设计工具与取色面板采用，但网页与多数程序只认十六进制色值，因此这一步转换是把视觉参数落地为可用代码的关键环节，手动逐个扇区换算极易出错，交给工具更稳妥。
| 变量 | 含义 | 说明 |
|---|---|---|
| H,S,L | 三个分量 | H 0-360，S/L 0-100 |
| q,p | 中间量 | 由 L 与 S 推得 |
| R,G,B | 红绿蓝 | 0-255 整数 |
| hx | 十六进制 | 每分量两位，#RRGGBB |
完整示例
下面这组示例全部由页面算法原样得出，可直接对照你的手算。输入 H=210、S=100、L=50，归一化得 h=0.5833、s=1、l=0.5；S 非 0，算 q=l+s-l*s=1、p=2*l-q=0；H 落在第 4 扇区，插值得到 R=0、G=0.5、B=1，乘以 255 四舍五入得 R=0、G=128、B=255，格式化为 #0080FF。与上方结果区、下方卡片和对照表完全自洽，全程无随机、可逐字复核。如果你把 S 改成 0，会落入灰阶分支得到 R=G=B=128 即 #808080，算法始终不变。
如果你想验证手算，只要把分量归一化后按扇区查插值公式，再把 0 到 1 的分量乘以 255 四舍五入，必然和本工具一致。这个归一化法也是你在不支持本页的环境里手动复现结果的可靠办法。
H=210 S=100 L=50
R=0 G=128 B=255
#0080FF
示例输入：H=210 S=100 L=50 #0080FF R=0 G=128 B=255
常见 HSL 与十六进制对照表
下表列出常见 HSL 对应的十六进制与 RGB 分量（共 14 行），前 12 行直接展示，点「加载更多」展开剩余项。你可以一键导出 CSV（带 BOM，Excel 直接认中文）或复制 TSV 粘进表格软件。表里所有结果都由本页同一逻辑得出，无随机、可复核。
| H | S | L | 十六进制 | RGB 分量 |
|---|---|---|---|---|
| 210 | 100 | 50 | #0080FF | R=0 G=128 B=255 |
| 0 | 100 | 50 | #FF0000 | R=255 G=0 B=0 |
| 120 | 100 | 50 | #00FF00 | R=0 G=255 B=0 |
| 240 | 100 | 50 | #0000FF | R=0 G=0 B=255 |
| 60 | 100 | 50 | #FFFF00 | R=255 G=255 B=0 |
| 300 | 100 | 50 | #FF00FF | R=255 G=0 B=255 |
| 180 | 100 | 50 | #00FFFF | R=0 G=255 B=255 |
| 30 | 100 | 50 | #FF8000 | R=255 G=128 B=0 |
| 210 | 50 | 50 | #4080BF | R=64 G=128 B=191 |
| 210 | 100 | 25 | #004080 | R=0 G=64 B=128 |
| 210 | 100 | 75 | #80BFFF | R=128 G=191 B=255 |
| 0 | 0 | 50 | #808080 | R=128 G=128 B=128 |
| 0 | 0 | 100 | #FFFFFF | R=255 G=255 B=255 |
| 0 | 0 | 0 | #000000 | R=0 G=0 B=0 |
结果边界与错误提示
- 色相 H 为空时，提示「色相 H 不合法：请填写 0 到 360 的整数」，不会把空值塞进换算逻辑。
- 色相 H 小于 0 或大于 360 时，提示「色相 H 不合法：超出 0 到 360 范围」，避免角度不合理导致颜色错乱。
- 饱和度 S 或亮度 L 为空、小于 0 或大于 100 时，会点名对应字段提示「请填写 0 到 100 的整数」，不会硬凑出一个颜色。
- 当 S=0 时进入灰阶分支，R=G=B，这是预期行为；若你期望彩色，请把 S 调大。
- 结果区与错误区都带 role="alert" 语义，内容一变就会被屏幕阅读器播报；所有转换本地完成，不联网也不写存储，刷新即还原默认示例。
- 十六进制每分量固定两位，单数字节会补前导零，例如 0 显示为 00，保证 #RRGGBB 格式正确。
- CSV 导出在文件头写入 UTF-8 BOM（\ufeff），Excel 打开中文不会乱码；TSV 复制是纯制表符分隔文本，粘进任意表格软件都会自动分列。
- 本工具只做 HSL 到十六进制的单向换算，不会对颜色做任何调整；若需要反向，请使用十六进制转 HSL 工具。
常见问题
H、S、L 分别是什么意思？
H 是色相（0 到 360 度的颜色环），S 是饱和度（0 灰到 100 最艳），L 是亮度（0 黑到 100 白）。三者归一化后再套插值公式得到 RGB。
为什么算出来是灰阶？
当 S=0 时颜色失去饱和度，必然落入灰阶分支，R=G=B=L*255。想看到彩色请把饱和度调大，比如 S=100。
十六进制为什么要两位？
因为每个 RGB 分量范围 0 到 255，正好用两位十六进制表示，单数字节补前导零，例如 0 写成 00，保证 #RRGGBB 始终六位。
我的配色会上传吗？
不会。所有分量只在浏览器本地换算，不联网、不写存储，刷新即还原默认示例，没有任何数据离开你的设备，可以放心粘贴项目配色。
和 CSS 的 hsl() 一样吗？
算法一致，都遵循标准 HSL 到 RGB 的换算。本工具把结果进一步格式化成 #RRGGBB，方便直接写进样式或设计文件。
导出的 CSV 为什么带 BOM？
因为 Excel 打开无 BOM 的 UTF-8 文件时常把中文显示成乱码，BOM 能让 Excel 正确识别编码。TSV 复制走剪贴板不经文件，所以不需要 BOM。
亮度 L 调到 0 或 100 会怎样？
L=0 时一定是黑色 #000000，L=100 时一定是白色 #FFFFFF，与 H、S 无关。本工具按公式正确处理这两个边界。
能批量转很多颜色吗？
本页一次处理一组 H、S、L。若需批量，逐组输入转换即可；理解「归一化加分段线性」的方法论后，你也能把它写成脚本批量跑。