理解 RGB 颜色模型

介绍

在数字世界中，颜色无处不在。从你在 Instagram 上看到的照片到你正在阅读的文字，颜色在我们的数字体验中起着至关重要的作用。但你有没有想过你的屏幕是如何显示这数百万种颜色的？答案在于 RGB 颜色模型。

什么是 RGB？

RGB 代表 Red（红）、Green（绿） 和 Blue（蓝）。它是一种 加色 颜色模型，这意味着它通过将光加在一起来创建颜色。这与我们混合颜料的方式不同，后者是一个减色过程。

在 RGB 模型中：

• 红色
• 绿色
• 蓝色

是光的三原色。通过以各种强度组合这三种颜色，我们可以再现广泛的颜色阵列。

它是如何工作的

想象你在一个黑暗的房间里，有三个聚光灯：一个红色，一个绿色和一个蓝色。

• 如果你打开 红 灯，墙看起来是红色的。
• 如果你添加 绿 灯，重叠区域变成 黄色。
• 如果你将 蓝 灯添加到红灯，重叠区域变成 品红色。
• 如果你混合 绿 和 蓝，你会得到 青色。
• 如果你以全强度打开所有三个灯，它们全部重叠的中心变为 白色。

这就是为什么它被称为“加色”——你从黑色（无光）开始，并添加光来创建颜色。

0 到 255 的范围

在数字计算中，三种颜色（红、绿、蓝）中的每一种通常存储为 8 位整数，这给了它从 0 到 255 的可能值范围。

• 0 意味着没有光（黑暗）。
• 255 意味着最大强度。

因此，颜色由像 (R, G, B) 这样的三元组定义。

• 黑色: (0, 0, 0) –
• 黄色: (255, 255, 0) – 红 + 绿
• 青色: (0, 255, 255) – 绿 + 蓝
• 品红: (255, 0, 255) – 红 + 蓝
• 白色: (255, 255, 255) – 红 + 绿 + 蓝

在下面尝试不同的组合。

RGB vs. CMYK

你可能也听说过 CMYK（青、品红、黄、黑）。主要区别在于它们的使用位置：

如果你在 RGB 中设计某些东西并打印出来，颜色看起来可能会有所不同，因为屏幕发光，而纸张吸光。

在网页设计中使用 RGB

在 Web 开发和设计中，RGB 是定义颜色的标准方式。你经常在 CSS 中看到它：

/* 标准 RGB 语法 */
.my-element {
  background-color: rgb(255, 0, 0); /* 红色 */
  color: rgb(0, 0, 255); /* 蓝色文字 */
}

/* 带有 Alpha（透明度）的 RGB */
.transparent-box {
  background-color: rgba(0, 255, 0, 0.5); /* 半透明绿色 */
}

十六进制代码

十六进制代码（如 #FF5733）只是表示 RGB 值的另一种方式。

• 前两位数字代表红色（FF = 255）。
• 接下来的两位代表绿色（57 = 87）。
• 最后两位代表蓝色（33 = 51）。

结论

RGB 颜色模型是数字颜色的基础。了解红、绿、蓝光如何混合产生光谱，有助于设计师和开发人员创建视觉上令人惊叹的界面。下次你看屏幕时，请记住：这只是三种简单光线的混合！