面向开发者的色彩简述

RGB

十六进制代码

两千多年来，包括亚里士多德和艾萨克·牛顿在内的许多杰出科学家都研究过颜色的概念。亚里士多德发展出了我们认为已知的第一个颜色理论，探讨了人类如何运用感官来体验颜色。他认为颜色是由天体通过光线从天上传递下来的，并且相信所有颜色都是明暗（或白色和黑色）的混合。直到17世纪，艾萨克·牛顿才开始利用阳光和棱镜进行实验，从而展现出可见光谱，也就是我们现在所熟知的自然界中的彩虹和课堂上的色轮。

我们感知颜色的能力源于眼中的感光“锥细胞”，它们利用颜色检测分子让我们能够看到可见光谱中的波长。基于这类锥细胞的颜色感知比三种分别对红、绿、蓝敏感的锥细胞要复杂得多。关于颜色视觉在感受器层面和神经层面的运作机制，目前存在不同的理论。为了便于探讨，我将采用三色理论，即这三种颜色可以组合成人类能够感知的所有颜色。

尽管RGB颜色模型和理论早于数字时代，但它仍然是我们在电视和电脑显示器等电子设备上显示颜色的主要模型。RGB模型独具特色，它属于“加色模型”而非“减色模型”。之所以称之为加色模型，是因为我们通过混合不同色调的“加色原色”（红、绿、蓝）来创建不同的颜色。使用这种模型，我们用于与网络交互的设备屏幕上的像素最初都是黑色的。我们使用代码来表示红、绿、蓝三原色的比例，从而生成所需的颜色。

我们还使用 RGB 模型作为两种主要的 CSS 颜色规范方法（RGB 和十六进制代码）的基础。这两种方法都使用不同的属性来表示红色、绿色和蓝色的强度，从而显示特定的颜色。我将演示如何使用这两种方法告诉浏览器我们想要显示千禧粉，以及如何将它们从十六进制代码转换为 RGB 值。

RGB

我们可以通过学习如何在 CSS 中使用 RGB 技术来表示颜色，从而开始了解设备如何解读颜色代码。使用 RGB 方法，我们可以传递三个介于 0 到 255 之间的独立参数值。每个值分别代表我们想要返回的红光、绿光和蓝光的强度，从而确定颜色。以下是代码示例：

RGB(redVal, greenVal, blueVal);

如果我们想要显示深蓝色，我们需要将红色和绿色的值都设置为最低值 0，将蓝色的值设置为最高值 255。您可以在这里看到一个使用此 RGB 值在所有 p 标签中显示深蓝色文本的 CSS 实现示例：

p {
color: RGB(0, 0, 255);
}

虽然我们可以通过分别传入红色、绿色或蓝色的值，并将其他颜色的值设为 0 来创建单独的红色、绿色或蓝色，但我们需要将它们以不同的色调混合才能创建其他颜色。为了得到千禧粉，我们需要传入红色值为 0 251、绿色值为 1 159、蓝色值为 1 的值164，如下所示：

RGB(251,159,164);

十六进制代码

十六进制代码是十六进制代码的简称，也是开发人员最常用的颜色指定方法。我们可以把这六个字母数字字符看作三对，分别代表红色、绿色和蓝色的色调。这样理解可能更容易：

#RRGGBB

这些代码代表特定的颜色，是二进制代码更易于理解的版本。与我们使用 RGB 方法类似，我们需要能够使用介于 00和 1之间的值来表示红色、绿色和蓝色的强度255。正如您从上面的图示中看到的，我们只有两个字符可以用来表示。这就是为什么我们使用字母数字代码的原因——为了能够表示最多三个数字。由于我们最多只能99使用两位数字格式，所以我们开始使用字母字符（直到 F）来表示大于 1 的数字9（例如 A = 10，B = 11……F = 15）。您可能已经认出这就是所谓的 16 进制系统，它使用 16 个字符（0-9 和 AF）。

开发者可能熟悉的几个常见十六进制代码是白色(#FFFFFF)和黑色(#000000)。由此我们可以推断，十六进制代码表示 00 到 FF 之间的一系列值，其中 00 对应于最低的颜色强度，FF 对应于最高的颜色强度。基于此，我们可以将十六进制代码转换为 RGB 值，反之亦然。让我们来看一下千禧粉的十六进制代码(#FB9FA4)，并逐步推导出之前看到的 RGB 值。在这个十六进制代码中，红色值为 0 FB，绿色值为 1 9F，蓝色值为 1 A4，即：

#FB9FA4

我们首先计算FB红色值，将第一个字符的值F在十六进制系统中评估为 15，然后将其转换为十进制，因为 RGB 使用的是十进制。我们通过将第一个字符F的值15乘以15 来实现这一点，这样就完成了一半！接下来，我们将评估第二个字符的值，我们知道它在十六进制系统中等于15，并将其与第一个字符的值相加，得到总和 15 。16240B11240251

我们可以用第二个值重复此操作9F，通过评估9并9乘16以来返回值144。我们将十六进制值F或15加到，144总共得到159。

最后一个值，，A4以相同的方式计算。十六进制值A或10乘以，16得到总和为160。我们加上，4得到总和为164。我们可以看到，这些值(251,159,164)与我们之前用于实现千禧粉的 RGB 值相同。