如何使用十六进制颜色转换器转换 HEX、RGB 与 HSL

输入三位或六位十六进制颜色代码，即可快速将颜色转换为规范的 HEX、RGB 与 HSL 格式，并自动计算互补色与浅色明暗属性。系统默认颜色为 #3498db，默认输出格式为全部。

十六进制颜色转换工具的核心功能

在网页设计与前端开发中，不同场景对颜色格式的要求各不相同。使用十六进制颜色转换器，您可以快速验证颜色代码的格式，并在 HEX、RGB 与 HSL 之间进行转换。此外，工具还会根据红绿蓝加权公式判断颜色是否属于浅色系，并直接生成对应的互补色代码。

操作步骤：输入颜色并选择格式

1. 在“十六进制颜色”输入框中输入目标代码。支持六位标准格式（如 #3498db）或三位简写格式（如 #fff 或 39d）。系统会自动修剪首尾空格并补齐三位简写。
2. 在“输出格式”下拉菜单中选择输出类型：全部、Hex、Rgb 或 Hsl。保持默认即可查看全部数据。
3. 点击运行按钮，获取规范化的颜色数据、互补色以及明暗判断结果。
4. 若需要从现有图片中提取色彩后再进行转换，可以配合使用图片取色工具快速获取基础 HEX 值。

如何读取与使用转换结果

转换成功后，工具将输出以下具体属性： - HEX：小写字母组成的标准六位十六进制值，带有 # 前缀。 - RGB：红、绿、蓝通道的整数数值，范围为 0 到 255。 - HSL：色相、饱和度与亮度的四舍五入整数百分比表示。 - 互补色：基于各通道反相值（255 减去原通道值）计算出的十六进制互补颜色。 - 浅色判断：基于加权公式计算并判断该颜色是否偏向浅色，便于搭配文字前景色。

实用转换示例

以默认蓝色 #3498db 为例，输出格式选择“全部”： - 输入：#3498db - HEX：#3498db - RGB：rgb(52, 152, 219)（R: 52, G: 152, B: 219） - HSL：hsl(204, 70%, 53%) - 互补色：#cb6724 - 浅色属性：加权计算值为 129.738，大于 128，判定为浅色（is_light 为真）。

使用限制

• 工具仅支持 3 位或 6 位标准十六进制字符，不支持 Alpha 透明度通道（如 8 位 HEX 或 rgba 语法）。
• 浅色属性基于通道加权阈值判断，不代表 WCAG 官方无障碍对比度合规评分。

常见错误与排查

• 输入非法字符：包含字母 g 到 z 或特殊符号会导致解析失败。
• 长度不符：输入 4 位或 5 位字符无法被系统识别。
• 输入函数文本：误将 rgb(...) 格式直接填入输入框会导致报错。

常见问题解答

可以不输入前面的 # 号吗？

可以。系统会自动识别纯十六进制字符并在内部补齐 # 前缀。

浅色属性是如何计算的？

系统采用标准加权公式 (r * 299 + g * 587 + b * 114) / 1000 计算亮度，大于 128 时即判定为浅色。

互补色代码是如何生成的？

工具通过使用 255 分别减去当前颜色的红、绿、蓝通道值，生成对应的反相十六进制代码。