在 HEX、RGB 和 HSL 之间转换颜色
发布于 · 更新于 阅读约 1 分钟
HEX、RGB 和 HSL 用三种方式描述同一种颜色。工具同时显示这三种，并接受常见的写法；HSL 被取整到整数，这就解释了转回 HEX 时会出现相差一级的情况。
同一种颜色的三种写法
探索颜色 默认显示全部三种形式，并预览颜色。以绿色 #2F4A3F 为例：
| 形式 | 结果 |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
面板上的 HEX、RGB 和 HSL 三个按钮可以让结果只显示一种形式，方便原样复制。
接受的写法
| 写法 | 示例 | HEX 结果 |
|---|---|---|
| 短 HEX | #fff | #ffffff |
| 带透明度的 HEX | #2F4A3F80 | #2f4a3f80 |
| 用逗号的 RGB | rgb(47, 74, 63) | #2f4a3f |
| 用空格的 RGB | rgb(47 74 63) | #2f4a3f |
| 用百分比的 RGB | rgb(100%, 0%, 0%) | #ff0000 |
| 用空格的 HSL | hsl(156 22% 24%) | #304b40 |
像“rouge”这样的颜色名称，以及像 rgb(300, 0, 0) 这样超出 0 到 255 范围的通道值，会被拒绝，并显示一条列出可接受写法的提示。
透明度
透明度在 HEX 中用八位数字书写，或者写在带空格的斜杠后面。颜色 rgb(47 74 63 / 50%) 的 HEX 是 #2f4a3f80，RGB 是 rgba(47, 74, 63, 0.5)。反过来，#2F4A3F80 的不透明度是 0.502，因为十六进制的 80 等于 255 中的 128。
为什么往返转换会相差一级
HSL 显示为整数：色相用度数，饱和度和明度用百分比。因此，从 HSL 转回 HEX 会落在相邻的颜色上，而不是起点的颜色。
| 起点 | 显示的 HSL | 转回 HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
每个通道的差距只有一级，肉眼看不出来。对于设计变量或品牌色，请把原始 HEX 当作基准，不要再经过 HSL。
灰色
灰色的饱和度为零，色相不起作用：#808080 得到 rgb(128, 128, 128) 和 hsl(0, 0%, 50%)。
工具不衡量什么
格式转换并不说明可读性。工具不会计算文字与背景之间的对比度：发布之前请另行检查。对比度决定可读性的情形，见 生成一次就能扫出的二维码。
检查转换
- 把颜色粘贴到输入框中：预览必须与您预期的一致。
- 复制您的系统要求的形式。
- 想保留准确的颜色，请保存 HEX 或 RGB，而不是 HSL。