色
在 HEX、RGB、HSL 格式之间转换颜色。
色码转换器会解析你输入的 hex 色码、rgb() 或 hsl() 数值，同时显示三种等效表示法与色块预览——只要设计工具或代码需要特定格式的颜色，就能立刻派上用场。
HEX: #ff6b4a
RGB: rgb(255, 107, 74)
HSL: hsl(11, 100%, 65%)
使用指引
- 输入 hex 色码（#ff6b4a）、rgb() 或 hsl() 数值。
- 三种格式会同步更新，显示同一个颜色。
常见使用情境
- 把设计文件中的 hex 颜色转成代码需要的 rgb() 或 hsl() 格式。
- 只看色码就先确认颜色实际长什么样子。
- 在不同工具之间搬移颜色时做格式转换。
- 用 HSL 微调颜色的明度或饱和度，再获取对应的 hex 值。
✓内容与验证流程复查: 2026-08-27
色码转换器 的验证方法与判读边界
如何确认转换后的数值代表完全相同的颜色。
三
hex、RGB、HSL 只是同一个颜色的三种不同写法——在它们之间转换绝不会改变颜色本身，只是改变表达方式。
色
如果色块看起来跟你预期的颜色不一样，请检查输入是否打错字——hex 色码中一个数字打错，颜色可能会差很多。
仅
此工具只处理完全不透明的 hex/rgb/hsl 数值，不会解析或保留透明度（alpha）通道（例如 rgba() 或带透明度的 hex）。
使用结果前的检查清单
- 色块预览在视觉上与你想转换的颜色一致。
- 已复制你目标工具或代码实际需要的那个格式（hex、rgb 或 hsl）。
- 了解此工具不处理透明度／alpha 数值。
- 如果结果跟预期的颜色不一样，已检查输入是否有打错字。
适合谁使用
- 要在 hex、rgb、hsl 之间转换颜色的设计师与开发者。
- 想确认色码实际颜色的人。
- 在不同设计工具之间搬移颜色值的人。
- 想通过 HSL 调整颜色明度或饱和度的人。
实际案例
把
开发者从设计文件中获取 hex 颜色，转换成 CSS-in-JS 代码需要的 rgb() 格式。
使用
有人粘贴文档中的 hex 色码，在正式采用前先预览这个颜色实际长什么样子。
通过 HSL 调整明度
设计师把基础色转成 HSL，在脑中调整明度数值，再转回去获取较亮或较暗版本的 hex 值。
使用限制
- 不支持 CSS 颜色名称（例如「tomato」）或透明度——仅支持不透明的 hex/rgb/hsl 数值。
常见问题
hex
不会——对同一个颜色而言，三者完全等价。如果看起来有明显差异，代表其中一个数值打错或输入有误。
可以
无法直接支持——此工具只解析 hex、rgb()、hsl() 输入，不支持具名的 CSS 颜色。
支持
不支持——仅处理不透明颜色，透明度／alpha 数值（例如 rgba() 中的透明度）不会被解析或保留。
为什么
请检查 hex 色码是否正好是 6 位十六进制数字，或 rgb()/hsl() 数值是否符合提示中显示的逗号分隔格式。
🔒 在浏览器内处理，不会上传。结果仅供参考，详见 免责声明。 最后更新: 2026-08-27
订阅更新
新工具上线与实用技巧，第一时间发送到你的邮箱。不发垃圾邮件，随时可退订。