RGB 转换器
在 RGB、HEX、HSL 和 CMYK 颜色格式之间转换
如何使用RGB 转换器
- 1为红、绿、蓝分别输入 0 到 255 之间的值。
- 2拖动滑块即可实时预览生成的颜色。
- 3复制 HEX、HSL 或 CSS 代码，用于你的项目。
RGB 如何构成颜色
颜色 = (R, G, B)，每通道 0 至 255；HEX = #RRGGBBRGB 混合三个光通道：(0,0,0) 为黑，(255,255,255) 为白，三者相等则为灰阶。
屏幕主动发光，所以 RGB 是加色法：与颜料相反，叠加所有通道会趋向白色而非黑色。
RGB 是**加色模型**（光的叠加），用于屏幕显示：三通道全 0 是黑，全 255 是白。这与印刷用的 CMYK（减色模型，颜料吸光）正好相反——颜料混得越多越暗，所以印刷四色叠加接近黑。设计稿在屏幕上好看但印出来发暗，多半是这个原因，需要在设计阶段就转换色彩空间。
HSL（色相/饱和度/亮度）比 RGB 更贴近人的直觉：调色时想「亮一点」就加 L，想「鲜艳一点」就加 S，而 RGB 要三个数一起改。**同色系配色只需固定 H 调 S 和 L**——比如 H=210 的蓝色，S 从 80% 降到 30%、L 从 40% 升到 90%，就得到一套和谐的浅蓝色阶。这也是 Material Design、Tailwind 等设计系统按 HSL 组织色板的原因。
| 颜色 | HEX | RGB | HSL |
|---|---|---|---|
| 纯红 | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| 纯绿 | #00FF00 | 0, 255, 0 | 120°, 100%, 50% |
| 纯蓝 | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| 白 | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
| 黑 | #000000 | 0, 0, 0 | 0°, 0%, 0% |
| 中灰 | #808080 | 128, 128, 128 | 0°, 0%, 50% |
| 青 | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
| 品红 | #FF00FF | 255, 0, 255 | 300°, 100%, 50% |
常见颜色 RGB / HEX / HSL 对照
常见问题
RGB 和 CMYK 有什么区别？
RGB 用于屏幕（加色光）；CMYK 用于印刷（减色油墨）。
为什么是 0 到 255？
每个通道为 8 位，提供 0 至 255 共 256 级，总计约 1670 万种颜色。
怎么转成 HEX？
把每个十进制数转成两位十六进制并加上 #，例如 255,0,0 变为 #FF0000。
为什么网页颜色和实际看到的不一样？
三个常见原因：① 色彩空间不同——同一 RGB 值在 sRGB、Display P3、Adobe RGB 显示器上显示不同，广色域屏上 sRGB 颜色会偏淡；② 显示器未校色，不同设备的白点和伽马有差异；③ 浏览器色彩管理设置。专业设计需要校色仪定期校准，普通使用确保系统色彩配置正确即可。
十六进制颜色怎么简写？
当 R/G/B 每个通道的两位数字相同时可以简写成 3 位：#FF0000 → #F00，#FFFFFF → #FFF，#336699 → #369（3→33、6→66、9→99）。只有每通道两位都相同才能简写，#FF8801 不能简写。简写在 CSS 中完全等效，能减小文件体积。