颜色转换
HEX / RGB / HSL 颜色格式在线互转，支持取色器、滑杆调节与一键复制
HSL 分量调节
配色参考
互补色
相近色
三种颜色格式说明
HEX（十六进制）
HEX 以 # 开头后跟 6 位十六进制数（如 #3b82f6），每两位依次表示红、绿、蓝分量（00-ff）；也支持 #rgb 三位缩写（如 #f00 等价于 #ff0000）。HEX 是 CSS 与设计软件中最常见的颜色写法，适合直接粘贴到样式表。
RGB（红绿蓝）
RGB 用红(R)、绿(G)、蓝(B)三个 0-255 的整数表示颜色，CSS 中写作 rgb(59, 130, 246)。它直观对应屏幕发光原理，适合需要程序化处理颜色通道的场景，如 Canvas、图像处理。
HSL（色相/饱和度/亮度）
HSL 用色相 H（0-360° 色环角度）、饱和度 S（0-100%）、亮度 L（0-100%）表示颜色，CSS 中写作 hsl(217, 91%, 60%)。它更符合人类对颜色的直觉，做配色方案（如调整明暗、生成互补色）时最方便。
常用颜色对照表
| 颜色 | HEX | RGB | HSL |
|---|---|---|---|
| 黑色 | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| 白色 | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 红色 | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| 绿色 | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 蓝色 | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 黄色 | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| 青色 | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| 品红色 | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| 橙色 | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| 灰色 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
使用说明
在任一输入框中输入颜色值（HEX 支持 #rgb 缩写与省略 #；RGB 支持 rgb() 函数与逗号分隔两种写法；HSL 中 % 可省略），或点击取色器、拖动 HSL 滑杆，其余格式会实时同步更新。每个格式右侧的「复制」按钮可将该格式复制到剪贴板。配色参考区域会给出当前颜色的互补色与相近色，点击色块可直接选用。全部计算在浏览器本地完成。