如何将 HEX 颜色转换为 RGB 和 HSL

输入 HEX 颜色值并运行转换，即可查看对应的 RGB、HSL、大小写 HEX 文本、数值组成和亮度分类；留空时使用 #ff5733。

先了解输入和用途

这个工具用于把十六进制颜色值转换成 RGB 和 HSL 表示，适合在设计稿、样式表或配色记录中核对同一种颜色的不同写法。它会同时整理文本形式和数值形式，便于阅读颜色组成。输入不是必填项；如果暂时不填写，工具会使用默认值 #ff5733 进行转换。

转换 HEX 颜色的步骤

1. 在颜色输入区域填写十六进制颜色值，例如 #ff5733。输入可以带开头的 #，也可以省略这个符号。工具解析时会先按十六进制颜色的格式处理，因此两种写法都可用于同一颜色值。
2. 如果使用三位写法，例如 abc 或 #abc，可以照常输入。工具会把每个字符各重复一次，再进行颜色转换，也就是按六位形式处理。
3. 运行颜色转换。如果想查看默认颜色，可以保持输入为空后运行；这时使用的是 #ff5733，而不是一个空的颜色结果。
4. 打开结果区域，先查看 HEX、RGB 和 HSL 的文本表示，再根据需要核对 RGB 与 HSL 的数值组成。若界面中有可选的历史设置，可以保持默认状态；这个设置不会为结果添加历史内容，也不会改变本次颜色转换结果。

如何阅读转换结果

正常解析时，结果会提供大写和小写两种六位 HEX 文本，方便复制或按不同书写习惯记录；同时还会提供 RGB 和 HSL 的文本表示，以及两种颜色模型各自的数值组成。这里的文本和数值是同一次 HEX 转换得到的不同呈现方式，不代表需要再次输入 RGB 或 HSL 才能完成转换。

HSL 中的色相、饱和度和亮度会四舍五入到整数。如果你要记录结果，应注意这些数值不是保留小数位的显示形式。结果还包括一个亮度分类，它依据加权 RGB 亮度计算判断，只有计算结果大于 128 时才会为 true；因此不要仅凭颜色名称或主观观感推断这个分类。

如果输入无法完成十六进制解析，工具会返回带有成功标记和错误提示的结果，而不是抛出该解析错误。这个结果不应当当作有效的颜色转换。请回到输入处检查字符、位数和十六进制格式，再重新运行。

使用示例

你正在核对一份使用 #ff5733 的设计稿，希望查看它对应的 RGB、HSL 和亮度分类。

在颜色输入控件中输入 #ff5733，运行转换，然后核对结果中的 HEX、RGB、HSL 和亮度字段。

结果应包含大写和小写六位 HEX 文本、RGB 与 HSL 文本表示、数值形式的 RGB 和 HSL 组成，以及亮度分类。

使用限制

• HSL 的色相、饱和度和亮度以整数形式呈现；无法解析的输入会返回错误提示结果，不能作为有效转换结果使用。

常见错误

• 把 RGB 或 HSL 文本直接填入颜色输入框，或输入无法解析的 HEX 字符串，会导致结果出现错误提示。请改用十六进制颜色值；开头的 # 可以省略，三位 HEX 值也可以输入。

常见问题

不输入颜色时会使用什么颜色？

如果不填写颜色值，工具会使用默认十六进制值 #ff5733，然后返回相应的颜色表示。

HEX 值必须以 # 开头吗？三位写法可以使用吗？

可以。输入不带开头 # 的 HEX 值时，工具会在解析前补上；三位 HEX 值也会先扩展为每个字符重复一次的六位形式。

输入无效的 HEX 值会发生什么？

如果输入无法完成十六进制解析，返回结果会带有成功标记和错误提示，而不是抛出该解析错误。请检查并修正 HEX 输入后，再查看转换结果。