颜色转换器
在不同颜色格式之间进行转换。
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
颜色选择
点击颜色选择器或在下方直接输入值
HEX
RGB
R
G
B
HSL
H
S
L
颜色变化
亮度变化
饱和度变化
和谐色
其他工具
了解颜色格式
HEX（十六进制）
HEX 颜色使用 6 位十六进制代码表示红、绿、蓝的数值。 格式为 #RRGGBB（例如 #FF5733），每组数值范围为 00 到 FF。 这是网页设计和 CSS 中最常用的颜色格式。
RGB（红、绿、蓝）
RGB 使用 0-255 的三个数值分别表示红、绿、蓝三种颜色。 格式为 rgb(255, 87, 51)，是数字显示设备的标准格式， 便于直观地调整各个颜色通道。
HSL（色相、饱和度、明度）
HSL 使用色相（0-360°）、饱和度（0-100%）和明度（0-100%）来表示颜色。 格式为 hsl(14, 100%, 60%)，在设计配色方案或调整亮度时通常更直观。
颜色格式对比
| 格式 | 示例 | 适用场景 |
|---|---|---|
| HEX | #FF5733 | 网页开发、CSS |
| RGB | rgb(255, 87, 51) | 数字设计、编程 |
| HSL | hsl(14, 100%, 60%) | 配色方案、亮度调整 |
使用颜色的小技巧
- 用 HSL 制作同色系变化：调整明度即可得到同一色系的深浅变化
- 代码中使用 HEX：在样式表中最为简洁紧凑
- 检查对比度：确保文字在背景上清晰可读
- 兼顾无障碍设计：测试颜色是否适合色觉差异人群