前端开发者必备：HEX/RGB/HSL颜色转换工具

2026年6月7日 · 阅读约3分钟

写CSS时最常见的一个场景：设计稿给的是HEX值 #3b82f6，但你需要RGB格式 rgb(59,130,246) 来做动态透明度。或者反过来，控制台输出了RGB，你需要在CSS里用HEX。

每次都手动算？或者打开Photoshop？太慢了。一个在线颜色转换器能秒解决。

三种颜色格式的区别

格式	示例	使用场景
HEX	#3b82f6	CSS常用，简洁
RGB	rgb(59,130,246)	rgba()透明度、JS操作
HSL	hsl(217,91%,60%)	调色、主题生成

Red

Orange

Yellow

Green

Blue

Violet

Pink

推荐工具

DevTools 颜色转换器提供三个功能合一：

三格式互转：HEX ↔ RGB ↔ HSL，修改任一值自动同步
内置取色器：点一下直接从色盘选色
一键复制：三种格式同时复制到剪贴板

全部在浏览器本地计算，零延迟。

👉 打开颜色转换器