RGB、YUV、HSV和HSL区别和关联

Answer 1

从我们最常见的RGB颜色出发，RGB分别对应着 Red（红）、Green（绿）、Blue（蓝），也就是我们平时所说的三原色，调整这三种颜色的比例，可以搭配出所有的色彩。这时你可能就要问了，YUV、HSV、HSL也能描述所有色彩啊，为啥RGB是最常用的捏？这就要回归到现实了，现实里显示器显像时，每一个像素点后面对应着 3个发光二极管，这3个二极管可以分别发出 红、绿、蓝 三种颜色，因此绝大部分人所能接触的颜色只与RGB有关系。RGB（红绿蓝）是依据人眼识别的颜色定义出的空间，可表示大部分颜色。但在科学研究一般不采用RGB颜色空间，因为它的细节难以进行数字化的调整。它将色调，亮度，饱和度三个量放在一起表示，很难分开。它是最通用的面向硬件的彩色模型。该模型用于彩色监视器和一大类彩色视频摄像。

YUV 多出现在音视频合成领域，音视频合成领域要求在表达同样内容时，争取占用更少的空间。同个视频，YUV空间要比RGB空间描绘省下来一半的空间消耗（YUV4:2:0）。YUV（也称：YCbCr）：Y表示明亮度，UV的作用是描述影像色彩及饱和度。主要的采样格式有 YUV4:2:0（最常用）、YUV4:2:2 和 YUV4:4:4 ，也就是说 RGB 主要用于屏幕图像的展示，而 YUV 多用于采集与编码。YUV 和 RGB 相互转换的公式为：

HSV（HSB） 和 HSL，可以发现 RGB 主要为硬件显示器服务，YUV 主要为音视频编解码服务，这么说下来和色彩最亲密的设计师该用哪种颜色呢？他们也有自己行业特别关注的颜色，主要使用 HSV 和 HSL。可以发现 HSV 和 HSL 在字面意思上是一样的：在原理和表现上，HSL 和 HSB 中的 H（色相）完全一致，但二者的 S（饱和度）不一样， L 和 B （明度）也不一样。HSV 对用户来说是一种 直观的颜色模型，我们可以从一种纯色彩开始，即指定色彩角H，并让V=S=1，然后我们可以通过向其中加入黑色和白色，来得到我们需要的颜色。例如：要得到深蓝色：V=0.4，S=1，H=240度。

HSV和HSB代指的是同一种颜色空间算法。下面是 Photoshop 和 Affinity Designer 的拾色器。两者分别使用了 HSB 和 HSL 颜色模型。两个拾色器都是 X 轴表示饱和度，越往右，饱和度越高；Y 轴表示明度，越往上明度越高。先看 Photoshop 的 HSB 颜色模型拾色器，如下图所示，HSB 的 B（明度）控制纯色中混入黑色的量，越往上，值越大，黑色越少，颜色明度越高。HSB 的 S（饱和度）控制纯色中混入白色的量，越往右，值越大，白色越少，颜色纯度越高。接下来看 Affinity Designer 的 HSL 颜色模型拾色器。如下图所示，Y 轴明度轴，从下至上，混入的黑色逐渐减少，直到 50% 位置处完全没有黑色，也没有白色，纯度达到最高。继续往上走，纯色混入的白色逐渐增加，到达最高点变为纯白色，明度最高。

文章首发： 问我社区。关注一下成本不高，错过干货损失不小。 ↓↓↓