As a front-end developer, we often come into contact with RGB, but YUV is probably unknown to most students. In fact, RGB and YUV are widely used color space. Today, we’ll take a closer look at RGB and YUV.

RGB

RGB is the most common color space we encounter. Each color represented in RGB is a combination of red, green, and blue light. For the images stored in RGB, we use R, G and B components to represent red light, green light and blue light respectively, and each component occupies 8bit of each component, and the three components are stored in sequence to represent a pixel.

In the figure above, image data is stored in the order of R > G > B, which is not absolute and may be stored in the order of B > G > R.

RGB is often used for image storage and is very simple. But in the video world, RGB is less common. As we know, video is actually composed of a sequence of consecutive pictures. Let’s assume that we have a 1080p (1920 * 1080) resolution video with a frame rate of 30 frames. If the video is not compressed and stored in RGB, Just one minute of video is (1920 * 1080 * 8 * 30 * 60) bit. This is obviously unrealistic, so we need to compress the video data.

However, as the three COMPONENTS of RGB are correlated, it is not conducive to data compression and coding. So we need a color space that’s less correlated, and YUV, which we’re going to introduce, is one of those color Spaces.

YUV

YUV also uses three components to store data, which are

  • Y: used for Luminance or Luma;
  • U: Used for Chrominance (Chroma);
  • V: used for Chrominance (Chroma);

Y is the general outline of the image, while U and V are used to describe the color and color saturation.

The first picture above is the original picture of YUV image, and the pictures below are respectively those with only Y component, U component and V component data. You can see that only the Y component of the image makes the outline of the image clear, but the image is black and white.

The type of YUV

Common YUVs include YUV444, YUV422 and YUV420. The main difference between different types is that they use different methods to sample U and V components.

As shown in the figure above, the solid black dot represents the Y component of the pixel, and the hollow circle represents the UV component of the pixel.

YUV444

Each Y component in YUV444 corresponds to a U component and a V component.

YUV422

YUV422 has a U component and a V component for every two Y components.

YUV420

Each Y component in YUV420 shares a U component and a V component.

We can clearly see that when storing a 2 by 2 pixel image:

  • YUV444 requires 12 * 8 bits,

  • YUV422 requires 8 * 8 bits,

  • The YUV420 requires only 6 * 8 bits.

YUV444 stores the same amount of data as RGB, but YUV422 and YUV420 only need to store 2/3 and 1/2 of the amount of DATA in RGB.

Storage mode of YUV

YUV has packed and planar storage modes.

  • Packed: Packed format is that all Y components are stored consecutively, and then U and V components are stored alternately.
  • Planar: The planar format also stores all the Y components consecutively, but Planar stores the U components consecutively and then the V components consecutively, or the V components consecutively and then the U components consecutively;

Each YUV type can be stored in several ways, so let’s take a look at the more common ones, YUV422 and YUV420.

YUV422

  • YU16: also called I422 or YUV422P, each two Y components share a U component and a V component, planar storage, first store the Y component continuously, then store the U component continuously, and finally store the V component continuously.

  • YV16: also called I422 or YUV422P, each two Y components share a U component and a V component, planar storage, first store the Y component continuously, then store the V component continuously, and finally store the U component continuously.

  • NV16: also called YUV422SP, every two Y components share one U component and one V component, and are stored in a Packed manner. First, Y components are stored continuously, and then U and Y components are stored in a sequence of U and V.

  • NV61: also called YUV422SP, each two Y components share one U component and one V component, and are stored in a Packed manner. The Y components are stored continuously first, and then the U components and Y components are stored in the order of V and U.

YUV420

  • YU12: also called I420 or YUV420P, each of the four Y components share a U component and a V component, planar storage, first store the Y component consecutively, then store the U component consecutively, finally store the V component consecutively.

  • YV12: also called I420 or YUV420P, each of the four Y components share a U component and a V component, planar storage, first store the Y component continuously, then store the V component continuously, and finally store the U component continuously.

  • NV12: also called YUV420SP, each of the four Y components share one U component and one V component, which are stored in a Packed way. The Y components are stored continuously first, and then the U and Y components are stored in the order of U and V.

  • NV21: also called YUV422SP, every four Y components share one U component and one V component, and are stored in a Packed way. The Y components are stored continuously first, and then the U and Y components are stored in the order of V and U.

The advantage of YUV

  1. Easy to compress coding. Each color represented by RGB is a combination of red light, green light and blue light. We use R, G and B components to represent red light, green light and blue light respectively. There is correlation between the three components of each pixel. So RGB is usually converted to YUV for compression.
  2. The amount of data is smaller than RGB. As we have analyzed before, YUV444 stores the same amount of data as RGB for images of the same resolution, but YUV422 and YUV420 only need to store 2/3 and 1/2 of the AMOUNT of DATA in RGB.
  3. Compatible with old black and white TVS. Y component displayed alone is actually a black and white image, so YUV from color to black and white only need to remove uV-related data.

Conversion between YUV and RGB

Although YUV is generally used for video coding, conversion between YUV and RGB is very common because most acquisition equipment uses RGB.

There are standards for conversion between YUV and RGB, common standards are ITU-R BT.601 (standard definition), ITU-R BT.709 (high definition), ITU-R BT.2020 (ultra high definition). Different standards have different quasi-conversion formulas, but also to distinguish different Color Range.

Color Range Specifies the value Range of the RGB components. The Range can be Full Range (0 255) and 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.500BCopy the code
  • YUV > RGB
R = 1.164 + 1.596 V - 0.871 - Y; G = 1.164-0.813 V - 0.391 Y U + 0.529; B Y = 1.164 + 2.018 U - 1.0729;Copy the code

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 * BCopy the code
  • YUV > RGB
R = Y + 1.400V-0.7g = Y-0.343U-0.711V + 0.526B = Y + 1.765U-0.883Copy the code

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 * bCopy the code
  • YUV > RGB
R = 1.164Y + 1.739V-0.97g = 1.164Y-0.213U-0.533V + 0.301b = 1.164Y + 2.112U-1.129Copy the code