Understanding YUV values

Understanding YUV values

YUV is one of those colorspaces that it not very easy to understand. RGB is easy to understand as well as HSL when you play around with it for a while, but YUV isn’t. I will try to explain how it works. The graphs aren’t 100% accurate, but you will get the idea.

YUV is built up out of 3 components:

Y – luminance (brightness)
U and V – chrominance (color)

The Y component is a telling how bright the picture is.
Y = 0 – black
Y = 0.5 – grey
Y = 1 – white

So far it’s pretty easy. Now let’s look at the color components, U and V. U and V are a matrix of colors as you can see in the picture below.

600px-YUV_UV_plane

When we are working in a grey-scale from black to white, then the U and V component are in the middle U = 0 and V = 0 as you can see in the example below where you see 100 % WHITE.

Y = 1, U = 0 and V = 0

Y-U-V_00007

The U-V matrix colors change depending on how bright the Y value is. The higher the Y value, the brighter the colors.

600px-YUV_UV_plane_Y0_100_percent

Y = 0

600px-YUV_UV_plane_Y0.5_100_percent

Y = 0.5

600px-YUV_UV_plane_Y1_100_percent

Y = 1

As you can see in the image below, YUV colorspace can not reprecent all colors available in RGB colorspace. The square inside are the two axis for U and V.

FullColor-vs-YUV

The conversion from RGB to YUV looks something like this:

Y = 0.299 x R + 0.587 x G + 0.114 x B
U =  -0.147 x R – 0.289 x G + 0.436 x B
V = 0.615 x R – 0.515 x G – 0.100 x B

The reason why I wrote “something” is because there are a lot of different versions for converting RGB to YUV. The above are the correct values for NTSC.

Let’s simplify this a bit and focus on the Y formula.

red contains 30% of the Y value
green contains 60% of the Y value
blue contains 10% of the Y value

This is pretty much how sensitive the eye is for these different colors.

Instead of looking at the U and V formulas have a look at the following diagrams.
The place where the grey line crosses the circle are the U and V values. In this case it’s for 100% RED.

YUV_00001

To calculate the Y value for RED we have a look at the following table, 0 = 0%, 1 = 100%.

RGBY %Y value
R = 1x 30%= 0.3
G = 0x 60%= 0
B = 0x 10%= 0
TOTAL Y= 0.3

There is 100% red, this will add 0.3 to the Y value. There is no green or blue, so they wont add anything to the Y value. The total therefor is Y = 0.3

In the following diagram you see the values we found for RED.

Y-U-V_00001

Now have a look at GREEN

YUV_00002

RGBY %Y value
R = 0x 30%= 0
G = 1x 60%= 0.6
B = 0x 10%= 0
TOTAL Y= 0.6

Y-U-V_00002

And next is BLUE

YUV_00003

RGBY %Y value
R = 0x 30%= 0
G = 0x 60%= 0
B = 1x 10%= 0.1
TOTAL Y= 0.1

Y-U-V_00003

What about YELLOW?

YUV_00004

RGBY %Y value
R = 1x 30%= 0.3
G = 1x 60%= 0.6
B = 0x 10%= 0
TOTAL Y= 0.9

In this case you add 0.3 and 0.6 and get 0.9 on the Y channel.

Y-U-V_00004

CYAN

YUV_00005

RGBY %Y value
R = 0x 30%= 0
G = 1x 60%= 0.6
B = 1x 10%= 0.1
TOTAL Y= 0.7

Y-U-V_00005

and finaly MAGENTA

YUV_00006

RGBY %Y value
R = 1x 30%= 0.3
G = 0x 60%= 0
B = 1x 10%= 0.1
TOTAL Y= 0.4

Y-U-V_00006
I hope this has helped you understand how the YUV values corespond to a color.

© 2011 Nikolai Waldman

Leave a Reply