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

## Leave a Reply

You must be logged in to post a comment.