在之前的文章中，我们讨论过色彩模型和色彩空间，以及它们之间的重要区别。本文中，我们将深入了解两种很受欢迎的色彩模型 —— HSV（或 HSB）和 HSL —— 并探索它们在实践中的差别、优势和劣势。

在我们开始前，我需要做一个快速的免责声明：HSV 和 HSB 在亮度的算法上有些许差别。但值得注意的是，许多软件程序将 HSV 和 HSB 用作可互换的术语，并以同样的方式执行这两种模型。因此，在实践中，这两者之间没有区别。就本文而言，我们将其视为可互换使用的表达；若你想了解更多内容，可下划到文末查看快速解释。

HSV 和 HSL

HSV/HSB 和 HSL 常常分别以锥体和双锥体来表示。

在 HSV/HSB 模型中，锥体表示了从纯白到纯黑的色彩范围，色相则沿着锥体的圆周变化。饱和度值从中心点（白色）向锥体外围增长，最饱和的色彩就在外缘上。

在 HSL 模型中，双锥体表示了从白到黑的相同色彩范围，色相则沿着双锥体的圆周变化。饱和度值从中心点向双锥体外围增长，同样，最饱和的色彩就在外缘上。

虽然两者听起来很类似，但其中有一些需要考虑到的关键差别。

HSV/HSB 色彩模型

HSV/HSB 色彩模型 —— 即色相（Hue）、饱和度（Saturation）、明度（Value），或色相（Hue）、饱和度（Saturation）、亮度（Brightness）—— 以三个维度来表示色彩：

●色相：色相是色彩在色轮上的位置，以0°-360°来衡量。

●饱和度：饱和度代表色彩的纯度。饱和度越高，色彩就显得越纯。饱和度以0%-100%来表示。在 HSV/HSB 色彩模型中，0%饱和度以白色来表示。

●明度/亮度：明度/亮度表示色彩的明亮程度。明度或亮度维度以0%-100%来表示。百分比越低，色彩就越暗；百分比越高，色彩才最为纯粹。

HSL 色彩模型

HSL 色彩模型 —— 即色相（Hue）、饱和度（Saturation）、亮度（Lightness） —— 虽类似 HSV/HSB 色彩模型，但存在几个关键差异：

●色相：色相仍是色彩在色轮上的位置，以0°-360°来衡量。

●饱和度：饱和度仍代表色彩的纯度，以0%-100%来表示。在 HSL 色彩模型中，0%的饱和度以中灰来表示。

●亮度：亮度表示色彩的明亮程度。亮度越高，色彩就显得越明亮。亮度以0%（黑）-100%（白）来表示。

实例

HSL 模型的一大优势在于它提供了一种非常直观的操纵色彩的方式。比如，要创造一种色彩较暗的版本，你只需降低其亮度值。为了让一种色彩变得更浓烈，你可以增加其饱和度值。同理，要得到白色，你只需单独增加亮度，不动饱和度。

这是它跟 HSV/HSB 模型的主要差别之一：（在 HSV/HSB 模型中）要获得白色，你首先需要把明度/亮度调到最大，然后将色彩去饱和。

让我们一起来看这些线框锥体和双锥体，便于我们以可视化的方式弄明白每种模型的不同分量如何交互来定义色彩。

要获得纯红，在 HSV/HSB 色彩模型中，我必须把饱和度和明度/亮度都调到最大（H:0；S:100；V/B:100）。而在 HSL 色彩模型中，我必须把亮度值停在一半的位置才能得到那种颜色最纯的状态（H:0；S:100；L:50）。

那现在我换一种颜色，要得到纯白呢？

在 HSV/HSB 模型中，我已经把明度/亮度调到最大了。但如我们之前所见，我们可以把饱和度降到0%。那样做肯定是可行的，尽管它没有 HSL 色彩模型那么直观。在 HSL 模型中，亮度处于50%，而若我想得到白色，我只需将亮度调到最高的100%，不用去动饱和度控制。

总结

总之，色彩模型的选择取决于用户的具体需求以及他们所做的工作类型。虽然两者都是 RGB 色彩模型的不同表达形式，并且能让你得到相同的色彩，但我个人认为，HSL 色彩模型更直观。话虽如此，用两种模型进行实验可以助你更好地理解它们的原理，以及哪种更适合你的具体需求。总的来说，对色彩理论和色彩模型有良好的理解对于任何从事色彩工作的人而言都是极其重要的。

*HSV 和 HSB 是非常类似的色彩模型，这两个术语常互换使用。但是，这两种模型在亮度的算法上有一个潜在的差别。

在 HSV 模型中，亮度值（V）是基于 RGB 分量的最大值。这意味着，一个色彩的亮度是由该色彩的红、绿、蓝分量中的最高值决定的。

在某些 HSB 模型版本中，亮度值（B）是基于 RGB 分量平均值来计算的，而不是基于最大值。这意味着，一个色彩的亮度由该色彩的红、绿、蓝分量的平均值决定。

出处：Tobia Montanari，CSI

翻译：LorianneW | 盖雅翻译小组

您可能对一下内容感兴趣：

初学者指南：色彩模型 VS 色彩空间