颜色转换工具

颜色转换工具是一款免费工具，可将以 HEX、HEX Alpha、RGB、RGBA、HSV、HSL 或 HSLA 表示的颜色转换为多种等效颜色格式。

可以转换哪些颜色格式？

你可以输入 HEX、HEX Alpha、RGB、RGBA、HSV、HSL 或 HSLA 颜色值，并查看该颜色在所有支持格式中的对应值。当设计规范、样式表或第三方 API 使用不同方式表示同一种颜色时，这项功能很实用。

• HEX 使用十六进制数对表示红、绿、蓝三个通道，通常采用 #RRGGBB 格式。
• HEX Alpha 增加了不透明度通道。在现代 CSS 语法中，通常写作 #RRGGBBAA。
• RGB 使用红、绿、蓝三个通道的数值，常见范围为 0 到 255。
• RGBA 在 RGB 的基础上增加 Alpha 通道。
• HSV 通过色相、饱和度和明度描述颜色。它常用于颜色选择工具，但并不是标准的 CSS 颜色函数。
• HSL 通过色相、饱和度和亮度描述颜色。CSS 可直接使用 HSL。
• HSLA 是带有 Alpha 值的 HSL。

RGB 和 HSL 是对同一种颜色的不同数学描述，并不是不同的颜色。通过转换，你可以改变颜色的表示方式，同时在目标格式允许的范围内尽可能保持原有颜色。

如何使用颜色转换工具？

在 Color 字段中输入一个采用支持格式的完整颜色值，然后在输出字段中查看或复制生成的颜色值。

1. 准确复制原始值。如果格式中包含开头的井号、逗号、括号、百分号或 Alpha 分量，也要一并复制。
2. 将其放入 Color 字段中。
3. 查看 HEX、HEX Alpha、RGB、RGBA、HSV、HSL 和 HSLA 下显示的等效值。
4. 从目标系统支持的颜色格式中选择结果。编写 CSS 规则时，通常可选用 HEX、RGB、RGBA、HSL 或 HSLA。HSV 则更多用于编辑界面和颜色计算。

转换过程在服务器上完成。你输入的内容会通过 HTTPS 发送到服务器，但不会被存储。单个颜色值通常不属于敏感信息，不过，如果尚未发布的调色板或一组设计令牌属于机密内容，请先考虑是否适合将其提交给任何在线服务。

空格和标点符号是 RGB、HSL 及相关语法的一部分，百分号则用于区分百分比值。单独的数字、空值或任意文本都无法表示颜色。带重音符号的文本和非拉丁文字在这些数值格式中同样没有明确含义。

如何理解转换后的颜色值？

每项结果都是同一种颜色的另一种表示方式。查看时要特别注意通道范围、百分比和 Alpha 透明度。具体复制哪个字段，取决于接收系统支持的颜色写法。

在六位 HEX 中，第一对字符表示红色，第二对表示绿色，第三对表示蓝色。例如，#336699 包含十六进制通道值 33、66 和 99，对应的十进制 RGB 值分别为 51、102 和 153。

色相通常以色轮上的角度表示，饱和度以及亮度或明度通常使用百分比。HSL 亮度和 HSV 明度采用不同的计算方式，因此不能把两者的百分比当作同一属性来比较。

Alpha 表示不透明度。完全不透明的颜色不需要支持 Alpha 的格式，但半透明颜色需要。如果将 RGBA 或 HSLA 颜色复制到普通 RGB、HSL 或六位 HEX 格式中，目标格式将无法记录 Alpha 通道。

该转换工具并未被说明为能够提供详细诊断信息的语法验证器，因此不要依赖它定位格式错误输入中的具体字符。常见的颜色语法错误包括 HEX 缺少井号、括号不匹配、遗漏百分号、Alpha 值超出预期范围，以及混用 HSL 和 RGB 的通道规则。

颜色转换示例

通过一个简单示例，可以了解 HEX、RGB、HSL 和 HSV 之间的关系。纯红色可以使用以下几种等效形式表示。

• HEX 输入 #ff0000
• 对应的 RGB 值 rgb(255, 0, 0)
• 对应的 HSL 值 hsl(0, 100%, 50%)
• 对应的 HSV 值 hsv(0, 100%, 100%)

对于饱和度较低的颜色，#336699 等同于 rgb(51, 102, 153)。它的 HSL 表示为 hsl(210, 50%, 40%)，HSV 表示中的色相为 210 度，饱和度约为 66.7%，明度为 60%。不同界面可能会对小数进行舍入或采用不同的空格格式，但不会改变其实际用途中的含义。

透明度也可以用一个直观的例子说明。rgba(255, 0, 0, 0.5) 和 hsla(0, 100%, 50%, 0.5) 都表示不透明度为一半的红色。按照常见的八位 CSS HEX 约定，对应值为 #ff000080，其中 80 是量化后的 Alpha 字节。

哪些情况下值得转换颜色格式？

当接收颜色的应用要求使用另一种格式，或者换一种表示方式更便于调试时，颜色转换就很有用。常见场景包括将 Figma 中的颜色值转换为 CSS 自定义属性、检查 Chrome DevTools 中发现的 RGBA 值、为 API 请求数据准备颜色字段，以及在部署前审核第三方主题数据。

如果目标系统已经支持现有的颜色格式，通常无需转换。仅为了生成机器可读的 CSS 而把六位 HEX 改为 RGB，并没有太大意义。反复转换还可能导致 HSL 或 HSV 值出现舍入误差。同样，如果已知所有颜色都完全不透明，就不必添加 Alpha 通道。

如果你需要通过视觉方式选择颜色，而不是转换已知的颜色值，使用颜色选择工具会更直接。颜色转换也不能替代对比度测试、色觉障碍模拟或色彩配置文件管理。数值等效并不能证明前景文字符合 WCAG 对比度要求。

常见问题

可以输入 CSS 颜色名称吗？

不可以。已说明支持的输入格式为 HEX、HEX Alpha、RGB、RGBA、HSV、HSL 和 HSLA，因此 red、rebeccapurple 或 transparent 等名称不在支持的输入列表中。请先将颜色名称转换为数值形式的 CSS 颜色值，再输入工具。

可以输入三位 HEX 值吗？

支持的输入格式包括 HEX，但并未说明具体支持哪些 HEX 长度。为确保输入结果可预测，请将 #369 之类的简写展开为 #336699。包含 Alpha 的四位简写也应按同样原则处理。

可以直接粘贴整条 CSS 声明吗？

不可以，请只输入颜色值，不要输入整条声明。例如，应输入 #336699，而不是 color: #336699;，因为属性名和分号并不是颜色值的一部分。从 JSON 或配置文件复制颜色值时，还要删除两侧的引号。

转换结果会保留广色域或色彩配置文件信息吗？

不会。支持列表中不包含任何广色域格式或嵌入式色彩配置文件。Display P3、Lab、LCH 和 ICC 配置文件数据包含的信息，无法通过现有的 HEX、RGB、HSL 和 HSV 字段表达。如果需要基于色彩配置文件进行转换，请使用支持色彩管理的应用程序。

为什么转换结果有时会出现小数？

即使源 RGB 通道都是整数，HSL 和 HSV 计算仍可能产生带小数的百分比。对这些数值进行舍入，可能会导致之后转换回 RGB 时出现轻微变化。存储设计令牌时应保留现有精度，只有在目标格式或编码规范有要求时才进行舍入。