Color Spaces and Models

What is a Color Space ?

A Color Space describes a specific range of colors along with brightness/luminance. Its primary function is to reproduce color data, primarily depends on the color space a display screen/an image support. Ideally it is recommended to select a color space prior to content production as it has increasingly become a key component of a content preparation workflow. Think of a color space as a mathematical representation of colors. 

All display panels/screens in Smartphones, Televisions, Monitors etc. display colors at the pixel level. Each pixel contains 3 subpixels which are Red, Green and Blue.

So what is a Color Model then ?

A Color Model is a mathematical construct that describes how colors are to be represented - as a list of numbers or color components. These two terms - color spaces and models are used interchangeably.

Created by International Commission on Illumination the CIE color space is probably the first math based definition of a color space. The CIE XYZ color space is a mathematical representation of perceived human color vision however does not describe all the complexities or granular details of human color vision.

Let us now discuss a few popular Color Models

• RGB

• CMYK

• Y'UV

RGB Color Model

This is an additive color model, its primary colors - Red, Green and Blue are added in numerous ways to reproduce a broad gamut of colors. This is the color model found in our display devices.

Our display devices/screens emit light thus the more color you add the brighter it gets. If you put together all colors you get a bright white color reproduction.

CMYK Color Model

This is a subtractive color model, you would see this used in print material - Tshirts, Posters, Billboards etc. Pigment/Color absorbs light. CMYK refers to Cyan, Magenta, Yellow and Key(Black). Since paper has a white/bright background as its natural color we are able to create black color by mixing all colors of this color model which is unlike the RGB model which is additive and involves light.

The primary colors of paint are Red, Yellow and Blue. Try mixing these in an equal amount and you will get Black. This is subtractive mixing.

Y'UV Color Model

This color model and its family are natively used in Video. The Y' component describes brightness/luminance, U and V components describe color/chrominance. This color model was used in Analog Color Television as well. The biggest advantage of this color space is its ability of separating luminance from chrominance which allows for Chroma Subsampling.

Chroma Subsampling is encoding color data at a reduced resolution in comparison to brightness data. It is a way of sharing color data across a number of pixels. Since a human eye is much more sensitive to changes in light/brightness compared to color most modern day imaging systems sample the color data. This reduction in resolution for color data is largely imperceptible to a human eye allowing for compression/reduction in file sizes. Chroma Subsampling has been described using the 4:x:x model from its early days(more about this in a later blog). Refer the snapshot below.

Note : Lossy WebP image format forces 4:2:0 Subsampling which can result in an inaccurate representation of colors is certain situations - Red as a background to text etc. You could enable the sharp YUV option when encoding WebPs to reduce the impact, it performs gamma correction to avoid desaturation of colors but may still yield mixed results. So you need to be careful when switching formats or selecting the level of Chroma Subsampling.