颜色模型：RGB、HSV、HSL

本节从计算机图形（网页、图像）的角度，提供关于 RGB、HSV 和 HSL 颜色模型的入门信息。还提供颜色简介，以支持主要讨论。

“颜色”指的是人脑对窄带波长光的组合的主观解释。此外，到达眼睛的波长取决于光源中的波长以及光反射物体所吸收的波长。对于大多数网页开发者来说，幸运的是，显示器以相当一致的方式生成自己的光，这简化了颜色处理。

原色

原色的概念基于以下事实：任何颜色都可以通过将三种颜色与白色和黑色组合来创建。然而，由于颜色可以直接生成（例如，通过显示器）或通过反射生成（例如，通过油漆），因此对哪组颜色是“原色”有多种定义。实际上，有三组原色。

传统颜色

艾萨克·牛顿在 1672 年用红色、黄色和蓝色描述了颜色，作为原色。这种颜色方案通常被称为“画家颜色”，并且至今仍在广泛使用。不幸的是，这种原色选择是不准确的，并非所有颜色都可以使用这三种颜色生成。

减色法颜色

这种颜色方案通常被称为“印刷颜色”，从白光如何从表面反射的角度来看待颜色；产生的颜色是“减去”白色后的结果。原色是青色、黄色和品红色。在印刷中，这三种颜色通常与黑色组合使用，形成 CMYK 模型（黑色被称为“K”，以避免与蓝色混淆）。减色法颜色通过让光线反弹并吸收某些波长来累加形成其他颜色；它们需要外部光源。如果所有减色法颜色混合在一起（例如，将大量油漆或染料混合在一起），它们将形成黑色。

加色法颜色

这种颜色方案从将原色加在一起的角度来看待颜色，这就是显示器的工作原理。原色是红色、绿色和蓝色。使用这种方法最常见的例子是使用 RGB 模型来制作任何颜色的像素的屏幕或显示器。如果您仔细观察旧的 CRT 电视或电脑显示器，当屏幕打开时，很容易看到这三种颜色的条带。新的 LCD 屏幕也可以显示，但更难看到。加色法原色本身就是光源。覆盖整个可见光谱的电磁波源（例如，太阳）将呈现白色。

色相

色相，或“纯色”，是两种原色的组合，其中一种原色处于最大强度。关于色调、阴影和色度的讨论将使这个概念更加清晰。

在本文档的剩余部分，“颜色”将以一般意义使用，“色相”将用于描述纯色。

色环

大脑对颜色的解释的一个有趣的方面是，它以圆形的方式看到颜色之间的关系。色环是一种工具，它提供所有可能色相之间关系的视觉表示。原色以相等的（120 度）间隔排列在圆圈周围。（注意：色环通常描绘“画家颜色”原色，这会导致与加色法颜色不同的色相集。）

次色和补色

次色（严格来说是色相）是通过将两种原色都以最大强度添加形成的。在色环上，这些颜色位于每对原色之间（60 度）的中间。次色是青色、黄色和品红色。请注意，这些与减色法或印刷原色相同。

色相的补色是色环上与其相对（180 度）的色相。每种原色的补色都是一种次色。使用加色法，将色相与其补色以相等比例混合会产生白色。

通常，颜色的补色是具有补色色相且具有相同色调和阴影的颜色的补色。将一种颜色与其补色以相等比例混合会产生灰色阴影。

色调、色相、色度

以下讨论使用一个涉及三个投影仪指向屏幕上同一个点的插图。每个投影仪都可以生成一种原色。每个投影仪的“强度”是“匹配的”，并且可以从零到最大强度进行调整。（注意：“强度”在此处与 RGB 颜色模型的意义相同。匹配每个原色的强度的主题超出了本书的范围。）请参见 RGB 部分的示例。

色调

色调是通过“使色相变暗”产生的。画家将其称为“添加黑色”。在我们的插图中，一个投影仪设置为最大强度，第二个设置为零到最大强度之间的某个强度，第三个设置为零。这会产生色相。通过将每个投影仪的强度设置降低到其初始设置的相同分数来完成变暗。

在色调示例中，完全变暗色相会导致所有三个投影仪都设置为零强度，从而产生黑色。

色相

色相是通过“使色相变亮”产生的。画家将其称为“添加白色”。在我们的插图中，一个投影仪设置为最大强度，第二个设置为零到最大强度之间的某个强度，第三个设置为零，从而产生色相。“变亮”是通过将每个投影仪的强度设置从其初始设置增加到最大强度的相同分数来完成的。

在色相示例中，请注意第三个投影仪现在正在贡献。完全变亮色相会导致所有三个投影仪都设置为最大强度，从而产生白色。

加色法模型的一个奇怪属性与色相和色相的总强度有关。如果一个投影仪的最大强度为 1，则原色具有 1 的组合强度。次色具有 2 的总强度。白色具有 3 的总强度。因此，补色具有比原色更大的总强度。此外，色相或“添加白色”会增加色相的总强度。HSL 模型在设计中解决了这个问题。

色度

色调是一个通用术语，通常由画家使用，指的是降低色调的“色彩度”的效果；画家将其称为“添加灰色”。请注意，灰色不是颜色，甚至不是一个单一的概念，而是指黑色和白色之间所有范围的值，其中三种原色的强度相等。由于更具体的术语在不同的颜色模型中具有冲突的定义，因此此处使用通用术语色调。因此，阴影使色调偏向黑色，调色使色调偏向白色，而色调使色调偏向灰色。从技术上讲，阴影和调色是色调的特殊情况，就像黑色和白色从技术上讲是灰色的阴影一样。

就投影仪示例而言，色调表示将两台投影仪设置为产生色调。接下来，第三台投影仪的强度发生变化以产生调色。最后，所有三台投影仪的强度以相同的比例降低，类似于阴影。这保留了所得颜色的关系，以原始色调为基础，但三个投影仪中的任何一个都没有处于全强度状态。眼睛感知结果为色调的饱和度较低或灰色的版本。

选择颜色模型

没有哪种颜色模型比另一种颜色模型“更好”。通常，颜色模型的选择取决于外部因素，例如图形工具或根据CSS2 或 CSS3 标准指定颜色的需要。以下讨论仅描述模型如何运行，重点在于色调、阴影、调色和色调的概念。

RGB

RGB 模型对颜色的方法很重要，因为它

直接反映了“真彩色”显示的物理特性
大多数图形工具都支持它，即使它们更喜欢其他颜色模型
它是网页 CSS2 标准中指定特定颜色的唯一方法。请注意，CSS 现已发展为一系列名为 CSS 4 的模块，但为了方便、代码的向后兼容性和熟悉性，RGB(A) 颜色定义以及生成的 CSS 代码可能更容易使用。

在该模型中，颜色通过指定红色、绿色和蓝色的强度级别来描述。每种颜色的典型强度值范围（0-255）基于取一个具有 32 位的二进制数并将其分解为四个字节，每个字节八位。八位可以保存一个值从 0 到 255。第四个字节用于指定颜色的“alpha”（或不透明度）：这有时会导致所谓的“RGBA”，其中包含 alpha 通道；如果未定义，则假定不透明度为 100%。当具有不同颜色的层叠加在一起时，不透明度就会起作用。如果顶层中的颜色不完全不透明（alpha < 255），则来自底层颜色的颜色会“透射”，产生混合颜色。

在 RGB 模型中，色调通过指定一种颜色为全强度（255），第二种颜色为可变强度，第三种颜色为零强度（0）来表示。

以下提供了一些示例，使用红色作为全强度颜色，使用绿色作为部分强度颜色；蓝色始终为零

红色	绿色	结果
255	0	红色 (255, 0, 0)
255	128	橙色 (255, 128, 0)
255	255	黄色 (255, 255, 0)

阴影是通过将每种原色的强度乘以 1 减去阴影系数来创建的，阴影系数的范围为 0 到 1。阴影系数为 0 对色调没有影响，阴影系数为 1 会产生黑色

新强度 = 当前强度 * (1 - 阴影系数)

以下提供了使用橙色的示例

0	0.25	0.5	0.75	1.0
(255, 128, 0)	(192, 96, 0)	(128, 64, 0)	(64, 32, 0)	(0, 0, 0)

调色是通过修改每种原色来创建的：增加强度，以便强度与全强度（255）之间的差减少调色系数，调色系数的范围为 0 到 1。调色系数为 0 不会有任何影响，调色系数为 1 会产生白色

新强度 = 当前强度 + (255 - 当前强度) * 调色系数

以下提供了使用橙色的示例

0	0.25	0.5	0.75	1.0
(255, 128, 0)	(255, 160, 64)	(255, 192, 128)	(255, 224, 192)	(255, 255, 255)

色调是通过同时应用阴影和调色来创建的。执行这两个操作的顺序无关紧要，但存在以下限制：当对阴影执行调色操作时，主颜色的强度会变成“全强度”；也就是说，主颜色的强度值必须用 255 代替。

以下提供了使用橙色的示例

	0	0.25	0.5	0.75	1.0
0	(255, 128, 0)	(192, 96, 0)	(128, 64, 0)	(64, 32, 0)	(0, 0, 0)
0.25	(255, 160, 64)	(192, 120, 48)	(128, 80, 32)	(64, 40, 16)	(0, 0, 0)
0.5	(255, 192, 128)	(192, 144, 96)	(128, 96, 64)	(64, 48, 32)	(0, 0, 0)
0.75	(255, 224, 192)	(192, 168, 144)	(128, 112, 96)	(64, 56, 48)	(0, 0, 0)
1.0	(255, 255, 255)	(192, 192, 192)	(128, 128, 128)	(64, 64, 64)	(0, 0, 0)

与 RGB 不同，HSV 和 HSL 中每个属性的值范围是由各种工具和标准任意定义的。请务必确定值范围，然后再尝试解释值。例如，色调值通常从 0 到 360 不等，但 Windows 7^® 中包含的“画图”在其 HSL 模型中使用 0 到 239 的范围。因此，许多工具中的色调为 120 表示“绿色”，而在画图中则表示“青色”。

在 CSS 中写入这些值的格式可能会有所不同：您可以使用 (X, Y, Z) 模型，也可以使用称为十六进制值的定义颜色，其中红色、绿色和蓝色的量使用两位十六进制数定义。十六进制数使用标准的十进制数字 0 到 9 以及 A–F 来表示十六进制数。例如，上面的 (255, 128, 0) 颜色也可以写成 #ff8000 ，而 (0, 0, 0) 可以写成 #000000 。

HSV

HSV 或 HSB 模型根据色调、饱和度和明度（亮度）来描述颜色。这种方法不适用于 CSS，而是倾向于使用 HSL（见下文）。

色调直接对应于颜色基础部分中的色调概念。使用色调的优势在于

可以轻松识别色轮周围色调之间的关系
可以轻松生成阴影、调色和色调，而不会影响色调

饱和度直接对应于颜色基础部分中的调色概念，不同之处在于，完全饱和不会产生调色，而零饱和会产生白色、灰色的阴影或黑色。

明度直接对应于颜色基础部分中的强度概念。

纯色是通过指定具有全饱和度和明度的色调来产生的
阴影是通过指定具有全饱和度和部分明度的色调来产生的
调色是通过指定具有部分饱和度和全明度的色调来产生的
色调是通过指定色调和部分饱和度和明度来产生的
白色是通过指定零饱和度和全明度来产生的，无论色调如何
黑色是通过指定零明度来产生的，无论色调或饱和度如何
灰色的阴影是通过指定零饱和度和部分明度来产生的

HSV 的优点是，其每个属性都直接对应于基本颜色概念，这使得它在概念上很简单。HSV 的感知缺点是，饱和度属性对应于调色，因此饱和度较低的颜色具有越来越高的总强度。由于这个原因，CSS3 标准计划支持 RGB 和 HSL，但不支持 HSV。

HSL

HSL 模型根据色调、饱和度和亮度（也称为亮度）来描述颜色。（注意：HSL 中饱和度的定义与 HSV 中的定义大不相同。）该模型具有两个突出的特性

从黑色到色调到白色的过渡是对称的，并且仅通过增加亮度来控制
- 阴影和调色由单个值（亮度）控制
降低饱和度会过渡到取决于亮度的灰色阴影，从而保持相对恒定的总强度
- 色调由单个值（饱和度）控制

上述特性导致 HSL 被广泛使用，特别是在 CSS3 颜色模型中。与 HSV 一样，色调直接对应于颜色基础部分中的色调概念。使用色调的优势在于

可以轻松识别色轮周围色调之间的关系
可以轻松生成阴影、调色和色调，而不会影响色调
您可以额外添加 alpha 通道信息以实现不透明度，因此您有时会看到它被称为“HSLA”或“HSL(A)”。

亮度结合了颜色基础部分中的阴影和调色概念。假设饱和度为满，亮度在中点值（例如 50%）处为中性，并且色调显示为未修改。当亮度低于中点时，它具有阴影效果。零亮度产生黑色。当亮度高于 50% 时，它具有调色效果，并且全亮度产生白色。

当饱和度为零时，亮度控制着最终的灰色阴影。值为零仍然产生黑色，而完全的亮度仍然产生白色。中间值会产生“中间”的灰色阴影，RGB 值为 (128,128,128)。

随着饱和度的降低，它会产生参考色调的色调，这些色调会汇聚到由亮度决定的灰色阴影。这使得总强度保持相对恒定。以下示例使用红色、橙色和黄色色调，亮度为中间值，饱和度逐渐降低。显示了最终的 RGB 值和总强度。

1.0	.75	.5	.25	0
(255, 0, 0), 256	(224, 32, 32), 288	(192, 64, 64), 320	(160, 96, 96), 352	(128, 128, 128), 384
(255, 128, 0), 384	(224, 128, 32), 384	(192, 128, 64), 384	(160, 128, 96), 384	(128, 128, 128), 384
(255, 255, 0), 512	(224, 224, 32), 480	(192, 192, 64), 448	(160, 160, 96), 416	(128, 128, 128), 384

请注意，加色法的物理性质阻止了该方案完全有效，除非色调介于主色调和副色调之间。但是，降低饱和度产生的色调的总强度比单纯的色调（如 HSV 中的色调）更接近。

HSL 可以写成色轮上的单个数字，后面跟着色调、饱和度和亮度值，例如 hsl(120, 100%, 50%); （绿色）、 hsl(120, 100%, 75%); （浅绿色）、 hsl(120, 100%, 25%); （深绿色）。

命名颜色

最后要说明的是定义颜色的第三种方法，即使用专门选择的命名颜色。一些预定义的英语术语被标准化为 CSS 颜色。这种跨供应商定义某些颜色的尝试与早期尝试制作“网络安全”颜色重叠，这些颜色是网站开发人员可以合理地预期在不同操作系统、网络浏览器、显示器等上显示相同的颜色。当然，在不同的设备上，没有颜色会完全相同，但命名颜色（尤其是来自 CSS 1 的颜色）可以预期会非常相似。

CSS 1 颜色

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

CSS 2.1 颜色

orange

CSS 3 颜色

aliceblue
antiquewhite
aquamarine
azure
beige
bisque
blanchedalmond
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan （aqua 的同义词）
darkblue
darkcyan
darkgoldenrod
darkgray/darkgrey
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray/darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray/dimgrey
dodgerblue
firebrick
floralwhite
forestgreen
gainsboro
ghostwhite
gold
goldenrod
greenyellow
grey （gray 的同义词）
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgray/lightgrey
lightgreen
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray/lightslategrey
lightsteelblue
lightyellow
limegreen
linen
magenta （fuchsia 的同义词）
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
oldlace
olivedrab
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
skyblue
slateblue
slategray/slategrey
snow
springgreen
steelblue
tan
thistle
tomato
turquoise
violet
wheat
whitesmoke
yellowgreen

CSS 4 颜色

rebeccapurple

在 CSS 4 中，您还有 transparent 和 currentcolor 选项，后者用于保持相对一致性。

另请参阅

色彩理论