颜色转换器
免费在线颜色格式转换工具，HEX/RGB/HSL色值互转，实时预览，配合取色器与随机色，前端样式调试、设计稿色值转换必备，本地浏览器处理免登录即用。
0 次使用 0
颜色预览
颜色编辑
R
G
B
H (0-360)
S (0-100)
L (0-100)
各格式输出
HEX
#4f46e5RGB
rgb(79, 70, 229)RGBA
rgba(79, 70, 229, 1)HSL
hsl(243, 75%, 59%)HSLA
hsla(243, 75%, 59%, 1)颜色模型简介
HEX：以#RRGGBB形式表示，每两位十六进制字符代表红/绿/蓝通道（0-255）。前端开发中最常用，CSS、设计稿标注均以此为准。
RGB：直接以rgb(255, 87, 51)形式表示三通道数值，配合rgba()可添加透明度通道，适合需要动态计算颜色的场景。
HSL：以色相(Hue)、饱和度(Saturation)、亮度(Lightness)表示，更符合人类直觉。调整亮度制作hover态、生成同色系配色时最为方便，如hsl(11, 100%, 60%)。
三者可以无损互转。日常建议：设计稿对色用HEX，透明度控制用RGBA，主题配色系统用HSL。
颜色格式速查
| 格式 | 示例 | 适用场景 |
|---|---|---|
| HEX | #FF5733 | CSS、设计稿标注、最常用 |
| RGB | rgb(255, 87, 51) | 动态计算颜色 |
| RGBA | rgba(255, 87, 51, 0.5) | 带透明度通道 |
| HSL | hsl(11, 100%, 60%) | 主题配色、同色系深浅 |
| HSLA | hsla(11, 100%, 60%, 0.5) | 带透明度的HSL |
常见问题
HEX的三位简写（如#F53）和六位（#FF5533）有什么关系？
三位简写是六位的压缩形式，每一位重复一次即可展开：#F53等价于#FF5533。只有R、G、B三组各自两位相同时才能简写。
HSL中的色相（H）为什么是0-360？
色相表示颜色在色环上的角度位置：0°是红色，120°是绿色，240°是蓝色，360°回到红色。饱和度和亮度则是百分比。
怎么快速生成同一色系的不同深浅？
使用HSL格式，保持色相（H）和饱和度（S）不变，调整亮度（L）即可。例如hsl(244, 75%, 40%)与hsl(244, 75%, 70%)是同一色系的深浅两个层级，常用于主题色和hover态。