计算机如何表示颜色：RGB、HEX 与二进制

#FF0000. #00FF00. #0000FF. 设计稿或代码里总会碰到这样的写法。看起来像密码，也像游戏代码。其实，它们是颜色的名字。

从上到下依次是红、绿、蓝。这就是计算机称呼颜色时使用的名字。下面来解析这套表示法的来龙去脉。

RGB — 构成颜色的三个字母

Red、Green、Blue。光的三原色。按不同比例混合，就能产生我们看到的所有颜色。

我们每天都在看 RGB

凡是有屏幕的地方，几乎都有 RGB。

• 显示器 / 电视 — 每个像素由红、绿、蓝三个子像素组成
• 智能手机屏幕 — 结构相同，像素更小
• 游戏键盘 LED — 每个按键内置 R、G、B 三颗 LED
• PC 机箱灯效 — RGB 灯带发出的就是 RGB 信号

把屏幕放大到足够大，就能看到：红、绿、蓝——仅此而已。数百万个微小的 RGB 点聚合在一起，构成我们眼中的整幅画面。

颜色通过混合产生

RGB 每个通道的强度范围是 0 到 255。

• RGB(255, 0, 0) — 仅红色最大 → 纯红
• RGB(0, 255, 0) — 仅绿色最大 → 纯绿
• RGB(255, 255, 0) — 红 + 绿 → 黄色
• RGB(0, 0, 0) — 全部关闭 → 黑色
• RGB(255, 255, 255) — 全部最大 → 白色

红与绿混合得到黄色，这可能有些反直觉——但这是光的叠加。它和美术课上学的颜料混色（红 + 绿 = 棕）规则不同。光叠加得越多越亮，全部叠加就是白色。

拖动下方三个滑块，亲自验证一下。

最右侧显示的 8 位数字是该通道的二进制表示。拖动滑块时，这个数字会同步变化。接下来就来讲，仅用 0 和 1 如何表示 256 种值。

为什么偏偏是 0 到 255

计算机只处理 0 和 1。存放一个 0 或 1 的单元称为位（bit）。位数每增加一位，可表示的值就翻倍。

8 位 = 1 字节（byte）。一种颜色由 RGB 三个通道组成，共 3 字节 = 24 位。24 位能表示约 1670 万种颜色——对人眼而言已绰绰有余，因此 1 字节成为单通道的标准。

亲自读懂二进制

每一位都有固定的权重。从左到右依次是 128、64、32、16、8、4、2、1——2 的幂次。

将所有值为 1 的位对应的权重相加，就得到十进制数。

这就是 8 位的最大值为 255 的原因，也是 RGB 单通道范围是 0～255 的确切依据。

HEX — 同样的数字，更简短的写法

RGB(255, 255, 255) 有 16 个字符。每次在 CSS 或设计工具里都要这样写未免太长。于是出现了一种更简短的表示方式。

什么是十六进制

十六进制是用单个字符表示 0 到 15 的进位制。我们平时只有 0～9 共 10 个数字，不够的 6 个从字母表里借用。

规则有三条：

• 0～9 照常使用
• 从 10 开始用 A 表示
• F 是单字符最大值（= 15）

为什么偏偏是十六进制

4 位二进制（0000～1111）恰好能表示 16 种值。

4 位二进制 = 1 位十六进制。四个字符压缩成一个。RGB 单通道是 8 位，因此恰好对应两位十六进制。

如何将 RGB 转换为 HEX

以 RGB(255, 87, 51) 为例进行转换。

原本 14 个字符的写法变成了 7 个字符。

从 HEX 推断颜色

反过来看 HEX，也能大致判断颜色。

• #FF5733 — R 最大 (FF)，G 居中 (57)，B 偏低 (33) → 红感强烈的橙色
• #3576E0 — R 低 (35)，G 中 (76)，B 强 (E0) → 略带紫味的蓝色
• #29A85A — R 低 (29)，G 强 (A8)，B 低 (5A) → 清爽的绿色

只看三段值就能区分”是橙色系还是蓝色系”，设计师和开发者便能用同一种语言沟通。

一句话总结

• RGB — 红、绿、蓝三通道，各 0～255
• 8 位二进制 — 单通道能表示 256 种值的原因
• HEX — 将同样数字缩写为两位字符的表示法

这三个概念串联起来，颜色代码就不再是天书。RGB 的三个数字，正是 HEX 的六个字符。

下一步是把这些数字转化为设计师的语言。“稍微亮一点""只降低饱和度""原样印到纸上”——这些需求仅靠 RGB 和 HEX 很难实现。HSL、CMYK 和 OKLCH 如何解决这些问题，请继续阅读RGB 还不够：HSL、CMYK 与 OKLCH 颜色表示法。