如何将十六进制颜色转换为 RGB 值

这个工具可将三位或六位十六进制颜色值转换为 RGB 通道信息及多种相关颜色表示。颜色值可带或不带前导 #。

HEX 转 RGB 适合什么场景？

HEX 是网页和设计工作中常见的颜色表示方式，RGB 则分别用红、绿、蓝三个通道描述颜色。使用这个工具时，可以提交三位或六位十六进制颜色值，输入前面可以有 #，也可以直接填写数字和字母组合。工具会把有效输入转换为 RGB 相关信息，适合在不同颜色写法之间查看和整理数值。

三位写法适合较短的颜色记录，例如 #369；六位写法则直接表示六个十六进制字符，例如 #336699。两种写法都属于本文所述的输入范围。若省略 #，工具会在转换前按带有前导符号的形式处理，因此 336699 和 #336699 使用的是同一类输入规则。

如何把 HEX 颜色转换为 RGB？

1. 在颜色值输入框中填写三位或六位十六进制值。可以输入 #369、369、#336699 或 336699 这类形式。输入时只保留颜色值本身，不要把 RGB 数字或其他颜色格式混在其中。
2. 如果暂时不填写输入，工具会使用默认值 #ff0000。需要检查指定颜色时，应先确认输入框中的内容就是要转换的三位或六位十六进制值。
3. 执行转换，等待工具返回结果。对于不带 # 的输入，工具会按带前导 # 的形式处理；对于三位输入，会先将每个字符展开，再按六位形式转换。
4. 查看红、绿、蓝三个数值通道。根据使用场景，还可以查看大写十六进制表示、逗号分隔的 RGB 表示、空格分隔的 RGB 表示，以及百分比 RGB 表示。
5. 如果结果没有提供转换后的颜色值，先回到输入框检查字符和长度。三位输入只能由三个十六进制字符组成，六位输入只能由六个十六进制字符组成，然后重新执行转换。

例如，需要处理设计稿中的颜色标记时，可以直接输入 336699，不必先手动补上 #。如果手头只有简写形式 #369，也可以直接提交，不需要先在其他地方改写。这样既能查看通道数值，也能按照后续场景选择不同的格式化表示。

如何理解转换结果？

转换成功时，结果会包含红、绿、蓝三个数值通道。它还会提供多种整理后的颜色表示：大写十六进制形式适合统一字母大小写，逗号分隔和空格分隔的 RGB 形式适合不同文本格式，百分比 RGB 形式则适合需要按百分比查看通道的场景。这里应根据后续使用位置选择对应表示，不要把一种格式误当成另一种格式。

三位输入能够得到结果，是因为每个十六进制字符会先展开为对应的两字符形式。带 # 和不带 # 的有效输入都遵循相同的转换规则。留空时，工具会采用预设的 #ff0000，所以查看默认颜色与转换指定颜色是两种不同情况。

如果输入长度不是三位或六位，或其中出现非十六进制字符，结果会是不成功状态，而不是转换后的颜色值。此时不能根据缺少的通道信息推测颜色，也不能把错误输入当作有效结果继续使用。本文说明的范围仅限三位或六位十六进制颜色值及其相关 RGB 表示，不延伸到其他颜色格式。

使用示例

设计人员输入 #336699，希望同时查看该颜色的 RGB 通道信息和便于整理的格式化表示。

在输入框中填写 #336699 并执行转换，然后查看返回的通道信息和格式化表示。

结果包含红、绿、蓝三个数值通道，并提供大写十六进制、逗号分隔 RGB、空格分隔 RGB 和百分比 RGB 表示。

使用限制

• 已验证的转换范围是三位或六位十六进制颜色值，可带或不带前导 #；本文不将该范围延伸到其他颜色格式。

常见错误

• 输入中含有非十六进制字符，或去掉可选的 # 后长度不是三位或六位，会导致转换不成功。请只保留有效十六进制字符，并重新检查长度后提交。

常见问题

HEX 颜色值可以不带 # 吗？

可以。输入省略前导 # 时，工具会在转换前按带有前导 # 的形式处理。

支持三位简写 HEX 吗？

可以，但输入需要是三位十六进制写法；工具会先展开每个字符，再进行转换。

输入无效时会发生什么？

当长度不是三位或六位，或包含非十六进制字符时，结果会是不成功状态，不会返回转换后的颜色值。