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.
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
The U-V matrix colors change depending on how bright the Y value is. The higher the Y value, the brighter the colors.
Y = 0
Y = 0.5
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.
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.
To calculate the Y value for RED we have a look at the following table, 0 = 0%, 1 = 100%.
| RGB | Y % | Y value |
| R = 1 | x 30% | = 0.3 |
| G = 0 | x 60% | = 0 |
| B = 0 | x 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.
Now have a look at GREEN
| RGB | Y % | Y value |
| R = 0 | x 30% | = 0 |
| G = 1 | x 60% | = 0.6 |
| B = 0 | x 10% | = 0 |
| TOTAL Y | = 0.6 |
And next is BLUE
| RGB | Y % | Y value |
| R = 0 | x 30% | = 0 |
| G = 0 | x 60% | = 0 |
| B = 1 | x 10% | = 0.1 |
| TOTAL Y | = 0.1 |
What about YELLOW?
| RGB | Y % | Y value |
| R = 1 | x 30% | = 0.3 |
| G = 1 | x 60% | = 0.6 |
| B = 0 | x 10% | = 0 |
| TOTAL Y | = 0.9 |
In this case you add 0.3 and 0.6 and get 0.9 on the Y channel.
CYAN
| RGB | Y % | Y value |
| R = 0 | x 30% | = 0 |
| G = 1 | x 60% | = 0.6 |
| B = 1 | x 10% | = 0.1 |
| TOTAL Y | = 0.7 |
and finaly MAGENTA
| RGB | Y % | Y value |
| R = 1 | x 30% | = 0.3 |
| G = 0 | x 60% | = 0 |
| B = 1 | x 10% | = 0.1 |
| TOTAL Y | = 0.4 |
I hope this has helped you understand how the YUV values corespond to a color.
© 2011 Nikolai Waldman
2013/05/08
