颜色转换

这个工具能做什么

在 HEX、RGB、RGBA 与 HSL 之间互相转换，同时给出 CSS 变量写法和整数色值，并按当前颜色生成一组从浅到深的配色梯度与互补色参考。取色器与手工输入双向同步，点一下色块即可复制色值。

如何使用

1. 用取色器选择颜色，或直接输入 HEX 值
2. 查看 HEX、RGB、HSL 等格式的转换结果
3. 点复制按钮取用某个格式
4. 在「配色参考」里点色块复制配色

适合哪些场景

• 把设计稿里的色值转成 CSS 变量
• 给一个主色快速配出深浅变体
• 把 RGB 值换算成 HEX 填进样式表

使用限制

• 配色梯度按明度递推生成，只提供参考，不保证满足对比度或无障碍标准。
• 输入必须是合法的 3 位或 6 位 HEX 值。

常见问题

能生成互补色吗？

可以，配色参考里包含互补色与邻近色，点击即可复制。

HSL 结果能直接用在 CSS 里吗？

可以，输出的就是标准的 hsl() 写法。

支持带透明度的颜色吗？

会输出一个固定 0.5 透明度的 RGBA 示例，其余格式为不透明色值。

相关工具

隐私说明

输入的数据在当前浏览器中处理，不会上传到服务器；不需要注册。