颜色转换完全指南：HEX、RGB、HSL 与对比度意识
设计稿给的是 #3B82F6，组件库 API 要 rgb()，主题变量又想用 hsl() 做 hover 变亮——中间少不了 无损意图下的格式互转。本指南讲清三种表示、工具页真实操作、Alpha 与显示限制，并强调对比度必须测量而不能「目测够用」，对接 WebUtils 颜色转换与对比度工具。
核心一句话
同一颜色多种写法；互转改的是记法，对比度决定的是能不能读清。
HEX、RGB、HSL 在 sRGB 常用场景下描述的是同一类屏幕色。转换器帮你在记法之间同步；它不告诉你「白底上用这色做小字是否合法」。无障碍对比要用对比度算法或 对比度检查。下面按「模型 → 操作 → 选型场景 → 误区 → FAQ」展开。
1. HEX、RGB、HSL 各管什么
| 格式 | 典型写法 | 直觉 | 常见用途 |
|---|---|---|---|
| HEX | #3B82F6 / #abc |
紧凑、易存 token | CSS 变量、设计标注、SVG |
| RGB | rgb(59, 130, 246) |
三通道 0–255 | 与画布/像素、旧资料一致 |
| HSL | hsl(217, 91%, 60%) |
色相/饱和/亮 | 派生 hover、暗色主题微调 |
HEX
- 常见 6 位：
#RRGGBB，每位十六进制0-9A-F。 - 3 位简写
#RGB等于把每位重复，#3af→#33aaff。 - 8 位
#RRGGBBAA含 alpha；本站转换页主路径以 6 位不透明色为主（见能力边界）。 - 大小写一般等价；工具里常统一成大写便于对比。
RGB
- 与显示器加色模型一致：R/G/B 越高越亮。
- CSS 还支持
rgba()与现代rgb(59 130 246 / 0.5)空格语法。 - 互转时注意：不要把 0–1 的 float 通道和 0–255 混用。
HSL
- H 色相：0–360 度，绕色环。
- S 饱和度：0% 灰 → 100% 纯。
- L 亮度：0% 黑、50% 「纯色典型区」、100% 白。
- 做「同一品牌色变亮/变暗」时，优先改 L（有时微调 S），比直接改 HEX 两位更可控。
- HSL 的 L 不是感知亮度的完美模型（更均匀的有 OKLCH 等）；但对多数 UI 派生已明显好于瞎改 HEX。
和「设计工具色」的关系
Figma/Sketch 可能显示 sRGB 或其它配置文件。Web CSS 默认按 sRGB 理解这些函数时，以导出到 CSS 的值为准 做转换，而不是假设印刷 CMYK 可逆。
2. 工具页能做什么
工具：颜色转换器。
界面要点（对照真实页面）：
- 大预览块 — 显示当前色，并在块上叠加 HEX 文本；实现会按亮度在深/浅文字间切换，保证色号可读。
- 圆形 color picker — 系统取色，适合从屏幕感觉出发。
- HEX / RGB / HSL 三个输入框 — 各带「复制」按钮。
- R、G、B 滑块 — 0–255，旁显数值，拖动即同步三格式。
- 预设色点 — 红橙黄绿蓝靛紫粉与黑白，快速跳到常用色。
脚本内含 rgbToHex、hexToRgb、rgbToHsl、hslToRgb 等，改任一输入会尝试解析并刷新其它字段与预览。
能力边界
- 强项： sRGB 不透明色在 HEX ↔ RGB ↔ HSL 间同步、滑块微调、一键复制、本地运行。
- 弱项 / 不宣称： 完整 ICC 管理、CMYK、OKLCH 输入、HDR、任意 CSS 颜色 Level 4 语法解析；Alpha 通道若输入带透明度，需确认页面是否保留（主 UI 以 RGB 滑块三维为主）。
- 对比度： 预览自动黑/白字只保证「色号叠在色块上能看清」，不是 WCAG 正文对比度合规证明。
3. 逐步操作
- 打开 /tools/dev/color-converter。
- 从设计稿复制 HEX（含或不含
#按解析支持）粘贴到 HEX 框，Tab 或触发 input 后看 RGB/HSL 是否更新。 - 或拖动 RGB 滑块 微调；观察 HSL 的 H 是否剧变——靠近灰轴时色相不稳定是正常现象。
- 或点预设 从基础色出发再滑到品牌近似。
- 复制目标格式： 写 CSS 变量常用 HEX 或 HSL；与 Canvas 像素 API 对齐时用 RGB。
- 派生 hover： 在 HSL 上把 L 提高或降低约 6%–12%（视背景），再复制新 HEX 回设计 token 表。
- 做可读性检查： 把前景/背景最终值带到 对比度检查（设计目录下亦有同名工具时可书签其一），看是否达到 AA/AAA。
- 写入代码后 可用 CSS 格式化 整理变量块，但色值本身以转换为准。
4. 无障碍：为什么必须单独测对比度
人眼在不同背景、字号、字重下对对比敏感度不同。WCAG 对正文与大字有不同的对比度阈值要求（常见讨论 AA：正文 4.5:1，大字 3:1 等——以你合规目标文档为准）。
| 误区 | 实况 |
|---|---|
| 「预览上数字是白的就说明合规」 | 只说明色号叠在色块上可读 |
| 「品牌蓝在白底一定够」 | 浅品牌色经常不够 4.5:1 |
| 「加深一点就行」 | 可能仍差 0.2；要测 |
| 「色盲模式模拟 = 对比度」 | 相关但不是同一指标 |
| 「用 HSL 降 S 更安全」 | 可能变灰仍对比不足 |
工作流推荐： 转换器定色 → 对比度工具测一对颜色 → 不通过则改 L 或换背景 → 再转回 HEX 写入设计系统。
不要在转换指南里假装转换器「内置合规」；本站把测量放在 contrast-checker，是正确拆分。
5. 常见错误与处理办法
| 现象 | 常见原因 | 怎么处理 |
|---|---|---|
| HEX 输入无效 | 少 #、含 g 等非法字符、长度不对 |
用 6 位十六进制；先从 picker 取色 |
| RGB 粘贴失败 | 写了百分比或 rgba 而解析只认整数 |
先改为 0–255 三通道 |
| HSL 一改就「跳色」 | 低饱和时 H 无意义；四舍五入 | 先提高 S 再调 H；接受 1° 误差 |
| 与设计稿差 1 | 圆整、色空间、显示器校准 | token 以设计导出指定格式锁死 |
| 复制了带空格的字符串 | CSS 旧项目敏感 | 统一团队格式（空格与否） |
| 透明色变实心 | UI 主路径不保留 alpha | 透明用单独 rgba/#RRGGBBAA 流程 |
| 暗黑主题「反相」难看 | 简单取反 RGB ≠ 好主题 | 用 HSL 降 L 或设计双套 token |
| 渐变中间色带脏 | HSL 插值非感知均匀 | 可接受或改用更现代色彩空间工具 |
| 对比度不合格仍上线 | 只转格式未测 | 必经 contrast-checker |
6. 真实工作场景
场景 A：把设计 token 写进 CSS 变量
设计给 HEX 表。转换器生成 HSL，写入：
:root {
--color-brand: 217 91% 60%; /* 配合 hsl(var(--color-brand)) */
}
hover：hsl(var(--color-brand-h) var(--color-brand-s) calc(var(--color-brand-l) + 8%)) 一类结构（具体拆分方式依团队约定）。先在工具里试 L 再落地。
场景 B：Canvas 取色与 CSS 对齐
getImageData 得到 RGB 整数 → 填入 RGB 框 → 复制 HEX 给样式或文档。注意预乘 alpha 的图像要先处理透明。
场景 C：图表系列色
要 5 个同色相不同亮度的序列：固定 H/S，只扫 L，复制五个 HEX。再对「色上白字」做对比度抽检。
场景 D：邮件客户端
部分客户端对 hsl() 支持差，导出 HEX 或 RGB 更稳。转换器负责把设计师的 HSL 决策落到 HEX。
场景 E：无障碍整改周
产品对比度不达标。用检查器确认差多少，回转换器提高 L 差或改背景灰阶，输出新 token，开 PR。避免「整个品牌重刷」却无测量。
场景 F：从竞品截图吸色
系统取色器吸色 → 转 HEX 入文档。注意环境光与显示器；竞品色作参考，合规与品牌仍走自己的体系。
7. 工程清单
- 设计系统锁定 一种源格式（常 HEX 或 OKLCH），其它为生成物
- 文档写明是否支持 alpha
- 正文/图标/禁用态分别有对比度验收
- 暗色主题单独测，不要只反相
- 禁止在业务里魔法数字散落；走 CSS 变量
- 打印/投影场景另行校对（本工具面向屏幕 sRGB）
常见问题
HEX 和 RGB 哪个「更准确」？
在同样 sRGB 量化下，#3B82F6 与 rgb(59,130,246) 表达同一 8-bit 色。没有谁更准确，只有谁更适合当前 API。
为什么 HSL 的 L=50% 看起来不是「中等灰」？
HSL 的 L 不是 CIELAB 亮度。不同色相在 L=50% 时感知亮度不同。需要感知均匀时用更现代模型；UI 微调仍常用 HSL。
3 位 HEX 要不要展开？
写 token 建议统一 6 位，减少工具与正则差异。简写适合手写草稿。
转换会损失颜色吗？
在 8-bit sRGB 内互转，主要损失来自 四舍五入（HSL 整数度与百分比）。一般 ±1 通道可接受；动画关键帧需更小心。
色盲用户只靠对比度够吗？
对比度是必要条件之一，不是全部。还需不只用颜色传达唯一信息（加图标/文案）。转换器不解决信息设计。
可以转换 CSS 的 `color: red` 关键字吗？
以页面是否实现关键字表为准；稳妥做法是先在浏览器计算为 RGB 再贴入。关键字还有系统色等复杂情况。
在线转换会上传我的品牌色吗？
计算在浏览器本地完成。品牌色本身很少是机密，但未发布的整套主题仍不必在公开直播里全部展示。
交付色值前的回归检查
颜色从设计稿进入代码时，最容易发生的不是公式错误，而是上下文丢失。设计师给出 #3B82F6，开发者可能把它写进按钮背景，却忘记设计稿中的悬停态、禁用态和深色背景。建议把每个色值记录为“用途、前景、背景、交互状态、格式”五列，例如 primary-600 用于白字按钮，默认态为 #2563EB，悬停态再降低 HSL 的 L 值。这样转换器只是完成表示法转换，决策仍留在设计 token 表里。
Alpha 还会引入一个常被忽略的问题：半透明前景显示的最终颜色取决于背后的颜色。rgba(0, 0, 0, 0.2) 放在白底和蓝底上，视觉结果并不相同；把它直接转成不透明 HEX 会丢失“叠加背景”的语义。需要导出截图、渐变或阴影时，应保留 alpha 写法，并在目标背景上检查对比度。若工具只处理不透明 RGB，应把透明层视为单独的 CSS 变量，不要把一个近似颜色冒充原始设计值。
团队协作还要约定大小写、是否保留 #、空格格式和舍入位数。统一格式能减少代码审查中的无意义差异，但不能证明两个值在视觉上等价。部署前抽样检查浅色主题、深色主题和高对比度模式，确认文字、边框、焦点环仍清晰；颜色转换器无法替你测试浏览器的混合模式、滤镜或系统强制配色。
继续浏览
用预设蓝走一遍「滑块 → 三框同步 → 复制 HSL → 改 L → 再复制 HEX」，然后把最终前景/背景丢进对比度工具。通过后再写入 CSS 变量。