如何在 HEX、RGB 和 HSL 格式之间转换颜色

填写颜色文本并选择小写的 hex、rgb 或 hsl 来源格式，即可尝试转换颜色。成功后可以查看 HEX、RGB、HSL 表示、数值组件和预览。

颜色转换适合哪些场景

颜色格式转换工具适合在网页设计、界面开发或视觉规范整理中核对同一种颜色的不同写法。你可以先提供 HEX、RGB 或 HSL 颜色文本，再指定对应的来源格式；转换成功后，结果会同时展示三种颜色表示、数值组件和预览，便于继续比对或复制使用。需要留意的是，输入是否能成功转换取决于内容是否为空、能否解析出需要的数字、数值是否处于支持范围，以及来源格式是否被正确识别。

输入颜色并完成转换

1. 先在颜色输入区域填写待转换的文本。输入不能留空，因为空颜色不会生成转换结果。 2. 再指定来源格式。可识别的值只有小写的 hex、rgb 和 hsl；如果没有提供来源格式，工具会按 hex 处理，因此省略选择时应确认输入确实是十六进制颜色。 3. 使用 HEX 时，输入三位或六位十六进制文本均可，开头可以带 #，也可以省略。例如，#369 和 336699 都符合已支持的长度形式。 4. 使用 RGB 时，确保解析出的数字子串正好有三个，并让三个通道的结果分别处于 0 到 255 之间。RGB 文本不应只凭外观判断，关键是工具能否提取出符合数量和范围要求的数值。 5. 使用 HSL 时，准备三个数字，依次对应色相、饱和度和明度。色相会按 360 度的周期折算；饱和度和明度高于 100% 时会被限制到 100%。 6. 提交转换后，先确认是否出现成功结果，再查看三种表示、RGB 通道数值、HSL 组件数值和预览。若没有成功结果，依次检查颜色文本是否为空、来源格式是否使用小写、数字数量是否符合要求，以及相关数值是否越过支持范围。

读取输出时要注意什么

成功后，结果区域会同时提供十六进制、RGB 和 HSL 三种表示；其中 RGB 通道使用整数，转换得到的 HSL 组件也会四舍五入为整数。预览可以帮助你直观看到转换结果，但阅读数值时仍应以各项输出为准。 HSL 的折算会改变超出一个完整周期的色相写法，而超过 100% 的饱和度或明度会落到 100%，所以输出值可能与输入文本的表面写法不同。 RGB 和 HSL 的数值是从数字子串中提取的，并非对整段文字进行严格语法校验；某些看起来不规范的文本仍可能被处理，这种成功不等于文本的每个符号都符合标准颜色写法。另一个边界是，带负号的 HSL 文本不会按负数含义读取，解析时可能只取得负号后面的数字，因此不要用这种写法表达负值并期待原意保留。

使用示例

设计人员需要把一个六位 HEX 颜色交给同时使用 RGB 和 HSL 的设计流程。

输入 #336699，选择小写来源格式 hex，然后提交转换。

成功后会显示十六进制、RGB 和 HSL 三种表示、RGB 与 HSL 数值组件，以及预览结果。

使用限制

• 结果不代表整段颜色文本经过全面语法校验；数字子串提取、HSL 负号的读取方式和来源格式的精确小写匹配，都可能让输出偏离输入者原本的表达意图。

常见错误

• 如果来源格式填写成大写或未识别的名称，或者颜色输入为空，转换就不会成功；请改用小写的 hex、rgb 或 hsl，并补上颜色文本。

常见问题

HEX 颜色可以不写 # 吗？

可以。三位或六位十六进制文本都能作为 HEX 输入，开头的 # 可以保留，也可以不写。

来源格式应该怎样填写？

请填写小写的 hex、rgb 或 hsl；其他写法不会被识别为受支持的来源格式。

格式写得不完全规范也能转换吗？

有条件地可以。RGB 和 HSL 会从文本中的数字子串提取数值，因此部分外观不规范的内容仍可能转换；不过空输入、数字数量不符合要求或数值超出范围时，结果可能失败。