作为一名前端开发人员，我们时常会接触到RGB，但YUV的话，可能大部分同学都没有了解过。其实RGB和YUV都是应用比较广泛的颜色空间。今天，我们来详细的了解一下RGB和YUV。

RGB

RGB是我们平时遇到最多的颜色空间。使用RGB表示的每种颜色都是由红光、绿光、蓝光组合而成的。对于使用RGB存储的图片，我们分别使用R、G、B三个分量来表示红光、绿光、蓝光，每个分量占每个分量8bit，并且三个分量依次排列存储，表示一个像素。

RGB.png

上图中，图像数据以R > G > B的排列顺序进行存储，这个排序并不是绝对的，也有可能是以B > G > R的顺序进行存储。

RGB常常用于图像的存储，并且十分简单。但是在视频领域中，RGB就不那么常见了。我们知道，视频其实是由一张张连续的图片序列组成的，我们假设有一个1080p（1920 * 1080）分辨率、帧率为30帧的视频，如果不对视频进行压缩，并且使用RGB进行存储的话，仅仅一分钟的视频就能达到 （ 1920 * 1080 * 8 * 30 * 60 ）bit （约等于27G）。这明显是不现实的，所以我们需要对视频数据进行压缩。

但由于RGB的三个分量是存在相关性的，这不利于我们对数据进行压缩编码。所以我们需要一种数据相关性没那么强的颜色空间，我们接下来要介绍的YUV，就是这么一种颜色空间。

YUV

YUV同样使用三个分量来存储数据，他们分别是

• Y：用于表示明亮度（Luminance或Luma）；
• U： 用于表示色度（Chrominance或Chroma）；
• V：用于表示色度（Chrominance或Chroma）；

Y其实就是我们常说的灰度值，是图片的总体轮廓，而U和V则用于描述色彩颜色和颜色饱和度。

image.png

上面的第一张图片为YUV图片的原图，下面的图片分别为只有Y分量、只有U分量、只有V分量数据的图片。可以看到只有Y分量的图片能够看清楚图片的轮廓，但图片是黑白的。

YUV的类型

常见的YUV有YUV444，YUV422，YUV420，不同类型之间的主要区别是使用了不同的方式进行U、V分量的采样。

image.png

如上图所示，其中实心黑点表示像素点的Y分量，空心圆圈表示采用该像素点的UV分量。

YUV444

YUV444中每个Y分量分别对应一个U分量和一个V分量。

image.png

YUV422

YUV422中每两个Y分量共用一个U分量和一个V分量。

image.png

YUV420

YUV420中每撕个Y分量共用一个U分量和一个V分量。

image.png

我们可以清楚的看到，在存储一张2 * 2像素的图片时，YUV444需要 12 * 8 bit，

image.png

YUV422需要 8 * 8 bit，

image.png

而YUV420则只需要 6 * 8 bit。

image.png

YUV444存储的数据量与RGB相同，但YUV422和YUV420却只需要存储RGB的数据量的 2/3 和 1/2 。

YUV的存储方式

YUV有packed（打包）和 planar（平面）两种存储方式。

• packed ：packed格式是先连续存储所有的Y分量，然后依次交叉储存U、V分量；
• planar：planar格式也会先连续存储所有的Y分量，但planar会先连续存储U分量的数据，再连续存储V分量的数据，或者先连续存储V分量的数据，再连续存储U分量的数据；

每种YUV类型都会有多种存储方式，接下来我们来解析一下比较常用的YUV422和YUV420。

YUV422

• YU16：也叫I422或YUV422P，每两个Y分量共用一个U分量和一个V分量，以planar方式进行存储，先连续储存Y分量，再连续存储U分量，最后连续储存V分量。

image.png

• YV16：也叫I422或YUV422P，每两个Y分量共用一个U分量和一个V分量，以planar方式进行存储，先连续储存Y分量，再连续存储V分量，最后连续储存U分量。

image.png

• NV16：也叫YUV422SP，每两个Y分量共用一个U分量和一个V分量，以packed方式进行存储，先连续储存Y分量，再以U、V的顺序交叉存储U分量和Y分量。

image.png

• NV61：也叫YUV422SP，每两个Y分量共用一个U分量和一个V分量，以packed方式进行存储，先连续储存Y分量，再以V、U的顺序交叉存储U分量和Y分量。

image.png

YUV420

• YU12：也叫I420或YUV420P，每四个Y分量共用一个U分量和一个V分量，以planar方式进行存储，先连续储存Y分量，再连续存储U分量，最后连续储存V分量。

image.png

• YV12：也叫I420或YUV420P，每四个Y分量共用一个U分量和一个V分量，以planar方式进行存储，先连续储存Y分量，再连续存储V分量，最后连续储存U分量。

image.png

• NV12：也叫YUV420SP，每四个Y分量共用一个U分量和一个V分量，以packed方式进行存储，先连续储存Y分量，再以U、V的顺序交叉存储U分量和Y分量。

image.png

• NV21：也叫YUV422SP，每四个Y分量共用一个U分量和一个V分量，以packed方式进行存储，先连续储存Y分量，再以V、U的顺序交叉存储U分量和Y分量。

image.png

YUV的优势

1. 便于压缩编码。RGB表示的每种颜色都是由红光、绿光、蓝光组合而成的，我们分别使用R、G、B三个分量来表示红光、绿光、蓝光，每个像素的三个分量之间存在着相关性。所以通常会把RGB转换成YUV进行压缩。
2. 数据量相对RGB来说更小。前面我们有分析过，同样分辨率的图像，YUV444存储的数据量与RGB相同，但YUV422和YUV420却只需要存储RGB的数据量的 2/3 和 1/2 。
3. 能够兼容老式黑白电视。Y分量单独显示是其实就是黑白图像，因此YUV由彩色转黑白只需要去除UV相关的数据就可以了。

YUV与RGB之间的转换

虽然一般的视频编码都会使用YUV，但由于大多是的采集设备都是使用RGB的，所以YUV与RGB之间的转换是十分常见的。

YUV与RGB之间的转换是存在标准的，常见的标准有ITU-R BT.601（标清）、ITU-R BT.709（高清）、ITU-R BT.2020（超高清）。不同的标准有不同的准换公式，同时还要区分不同的Color Range。

Color Range用于指定RGB分量的取值范围，可分为Full Range（取值范围为0~255）和Limited Range（取值范围为16~235）

BT.601, which is the standard for SDTV.

• RGB > YUV

Y = 0.299R+0.587G+0.114B
V = 0.713(R−Y)=0.500R−0.419G−0.081B
U = 0.564(B−Y)=−0.169R−0.331G+0.500B

• YUV > RGB

R = 1.164Y+1.596V-0.871;
G = 1.164Y-0.813V-0.391U+0.529;
B = 1.164Y+2.018U-1.0729;

BT.601，Full Range

• RGB > YUV

Y = 0.299 * R + 0.587 * G + 0.114 * B 　　　
V = -0.169 * R - 0.331 * G + 0.500 * B
U = 0.500 * R - 0.439 * G - 0.081 * B

• YUV > RGB

R = Y + 1.400V - 0.7
G = Y - 0.343U - 0.711V + 0.526
B = Y + 1.765U - 0.883

BT.709, which is the standard for HDTV.

• RGB > YUV

Y = 0.0627 + 0.183 * R + 0.614 * g + 0.062 * b
U = 0.5 - 0.101 * R - 0.339 * g + 0.439 * b
V = 0.5 + 0.439 * R - 0.399 * g - 0.040 * b

• YUV > RGB

R = 1.164Y + 1.739V - 0.97
G = 1.164Y - 0.213U - 0.533V + 0.301
B = 1.164Y + 2.112U - 1.129