颜色转换工具
在 HEX、RGB 和 HSL 之间转换颜色，并实时预览。
正在加载工具…
颜色转换工具 — 以任意格式输入颜色——HEX、RGB 或 HSL——其他格式会即时同步，并显示大尺寸实时色块。内置原生取色器，每个值都带有一键复制按钮。非常适合在 CSS 与设计工具之间核对品牌色。
颜色转换工具 是什么？
颜色转换器是一款面向开发者和设计师的免费在线 HEX、RGB、HSL 颜色互转工具。用任意格式输入颜色——HEX（#rrggbb 或 #rgb 简写）、RGB（如 "255, 100, 0" 或 "rgb(255 100 0)"）、HSL（如 "220, 91%, 64%"）——其余格式都会在大尺寸实时预览色块旁即时更新。内置原生取色器可让你直观地挑选色调，每个数值还配有一键复制按钮，无论是匹配品牌色，还是在代码与设计工具之间转换 CSS 颜色值，都非常顺手。
如何使用 颜色转换工具
- 在 HEX、RGB 或 HSL 输入框中输入或粘贴颜色，或点击取色器色块直观地挑选色调。
- 观察其余两个输入框和大尺寸预览色块即时更新，呈现相同的颜色。
- 查看下方的 R / G / B、H / S / L 和 HEX 汇总图块，了解转换后的各通道数值。
- 点击某个输入框旁的复制按钮即可复制其值：HEX 复制 #rrggbb 字符串，而 RGB 和 HSL 则复制可直接使用的 rgb(...) 和 hsl(...) 字符串。
- 如果某个值被拒绝，请查看内联错误提示，并按照输入框提示所示的格式重新输入。
示例
HEX 转 RGB 和 HSL
输入
#ff6400
输出
RGB 255, 100, 0 / HSL 24, 100%, 50%
#rgb 简写展开
输入
#fff
输出
HEX #ffffff / RGB 255, 255, 255 / HSL 0, 0%, 100%
直观取色
点击色块打开原生取色器，拖动选取任意色调，HEX、RGB 和 HSL 输入框便会自动填入对应的数值。
常见问题
- 这款转换器支持哪些颜色格式？
- 它支持三种格式的互转：HEX（完整 #rrggbb 和 #rgb 简写）、RGB（每个通道 0-255）以及 HSL（色相以度为单位，饱和度和亮度以百分比表示）。目前不支持 alpha/透明度、HSV、CMYK 或 CSS 颜色名称。
- 为什么我的颜色会显示 "Invalid HEX color"、"Invalid RGB color" 或 "Invalid HSL color" 错误？
- 说明该值不符合预期格式或超出取值范围。HEX 必须是 3 或 6 位十六进制数字，RGB 各通道必须为 0-255，HSL 的饱和度和亮度必须为 0-100%。请按照该输入框下方的提示重新输入。
- 我可以粘贴像 rgb(255 100 0) 这样完整的 CSS 值吗？
- 可以。RGB 和 HSL 输入框只会从文本中提取数字，因此 "255, 100, 0" 和 "rgb(255 100 0)" 都能识别，复制按钮还会输出可直接使用的 rgb(...) 和 hsl(...) 字符串。
- 转换后的数值会四舍五入吗？
- 会。RGB 通道和 HSL 数值都会四舍五入为整数，因此往返转换后可能与原值相差一个单位。HEX 输出始终为每通道两位（#rrggbb）。
- 我的颜色数据会被上传到任何地方吗？
- 不会。整个转换过程都通过 JavaScript 在你的浏览器本地完成——不会向服务器发送任何内容，也不会上传任何颜色值，因此既能保护隐私，页面加载后甚至还能离线使用。