颜色转换工具
HEX、RGB、RGBA、HSL 颜色格式互相转换
这是什么工具？
颜色转换工具支持 HEX、RGB、RGBA、HSL 等颜色格式互相转换，提供颜色选择器和实时预览。支持一键复制各种格式的颜色值，还可以生成随机颜色。适用于前端开发、UI 设计、CSS 编写等场景。所有操作在浏览器本地完成。
如何使用？
- 1 使用颜色选择器或输入 HEX 值选择颜色
- 2 调整透明度滑块设置 Alpha 值
- 3 查看 HEX、RGB、RGBA、HSL 四种格式结果
- 4 点击「复制」按钮复制需要的格式
常见问题
支持哪些颜色格式？
支持 HEX、RGB、RGBA、HSL 格式互相转换。
可以复制 CSS 颜色值吗？
可以，每种格式都提供一键复制，可直接用于 CSS。
支持透明度吗？
支持，可以设置 Alpha 透明度值，RGBA 格式会包含透明度。
适用场景与示例
- 从设计稿拾取的颜色在 HEX、RGB、HSL 之间互转，粘贴进 CSS/SCSS
- 调透明度时把 HEX 转成 RGBA，得到带 Alpha 通道的可用值
- 用 HSL 直观调整色相、饱和度、明度，快速派生同色系配色
- 生成随机配色或对照色板，做 UI 配色试验
输入
#3498db
输出
rgb(52, 152, 219) | hsl(204, 70%, 53%)
💡 同一颜色三种表达；HSL 调色更直观，HEX 书写最紧凑。
原理与常见错误
屏幕颜色由红、绿、蓝三个通道叠加而成（RGB 加色模型），每个通道通常用 0-255 表示。HEX 是把三个通道值写成两位十六进制拼在一起，如 #3498db 表示 R=52、G=152、B=219；RGBA 在此基础上加了 Alpha 通道（0-1 的不透明度）。HSL 是另一种更贴近人直觉的表示：H（色相）是 0-360° 的色环角度，S（饱和度）和 L（亮度）是百分比，调色时「想更鲜艳调 S、想更亮调 L」比直接改 RGB 直观得多，特别适合派生同色系。三种格式可以无损互转，描述的是同一个颜色；选哪种主要看场景——CSS 里 HEX 最简洁、HSL 适合程序化生成配色、RGBA 用于需要半透明的叠加层。
⚠️ HEX 写成 3 位缩写后转换异常
#abc 实际是 #aabbcc 的缩写，转换前先展开成 6 位再计算。
⚠️ 透明度数值范围混乱
CSS 的 alpha 是 0-1 小数，而 8 位 HEX（#RRGGBBAA）里 alpha 是 0-255 的十六进制，注意区分。
⚠️ 直接调 RGB 调不出想要的颜色
改用 HSL，先定色相再调饱和度和亮度，更接近直觉。
参考与更新
最后更新：2026-06-23