Color Spaces
The RGB method to represent colors is an example of a colorspace. It’s one of many methods that stores colors. Another colorspace is grayscale.
As the name entails, all images in the grayscale colorspace are black and white, and you only need to save one value to describe its color.
The downside of RGB is that it’s not very intuitive for humans to visualize.
For example, what color do you think an RGB of [0, 104, 55] produces?
Taking an educated guess, you might say a teal or skyblue-ish color, which is completely wrong. Turns out it’s the dark green you see on this website!
Two other more popular color spaces are HSV and YUV.
HSV, which stand for Hue, Saturation and Value, is a much more intuitive way to describe colors. You can think of the parts this way:
Hue as “Color”
Saturation as “How full is this color”
Value, as the “Brightness”
In this color space, if you found yourself looking at unknown HSV values, it’s much easier to imagine what the color looks like based on the values.
The difference between RGB and HSV are pretty easy to understand, at least once you look at this image:
YUV is another popular color space, because it’s what TVs use.
YUV Colorspace
YUV colorspace is a bit unusual. The Y component determines the brightness of the color (referred to as luminance or luma), while the U and V components determine the color itself (the chroma). Y ranges from 0 to 1 (or 0 to 255 in digital formats), while U and V range from -0.5 to 0.5 (or -128 to 127 in signed digital form, or 0 to 255 in unsigned form). Some standards further limit the ranges so the out-of-bounds values indicate special information like synchronization.One neat aspect of YUV is that you can throw out the U and V components and get a grey-scale image. Since the human eye is more responsive to brightness than it is to color, many lossy image compression formats throw away half or more of the samples in the chroma channels to reduce the amount of data to deal with, without severely destroying the image quality.
Blending: As mentioned before, each color has an alpha value that indicates transparency. However, when you’re creating an image, each pixel has exactly one color.
So how do you assign a pixel if it has a background color and a “semi-transparent” color on top of it?
The answer is alpha blending. The color on top uses a formula and its alpha value to blend with the color behind it. Here you treat alpha as a float between 0 and 1:
NewColor = TopColor * TopColor.Alpha + BottomColor * (1 - TopColor.Alpha)
This is the standard linear interpolation equation.When the TopColor.Alpha is 1, NewColor is equal to TopColor. When TopColor.Alpha is 0, NewColor is equal to BottomColor. Finally, when TopColor.Alpha is between 0 and 1, NewColor is a blend of TopColor and BottomColor.
A popular optimization is to use premultiplied alpha. The idea is to premultiply TopColor byTopColor.alpha, thereby saving that multiplication in the formula above. As trivial as that sounds, it offers a noticeable performance boost when iterating through millions of pixels to perform blending.
