Color as Vectors


RGB Color Model

In computer graphics colors are usually represented with the RGB color model. Using this model any color can be described in terms of how much red, green and blue it contains. This color model is useful because it reflects the way that computer monitors deal with colors. In a monitor each pixel is composed of a red, green and blue component and by tweaking the ratio of red green and blue we are able to produce any color pixel. In the RGB color model each color is uniquely identified with a triple of numbers (red, green, blue) where each component can range from 0-255.

For example the color red would be represented as (255, 0, 0) and yellow as (255, 255, 0). The reason why the values can range from 0-255 is that when colors are stored at the hardware level one byte is used to store the intensity of each of the red, green and blue diodes for each pixel. Since a byte is 8 bits, a byte can store \(2^8=256\) distinct values, and the range from 0-255 stores 256 distinct values.

HEX Representation of RGB

One of the more popular methods to encode a color using the RGB model is through a 6 digit hex number. The first two digits of the hex number correspond to the red component, the next two for the green, and the last two for the blue.

\( \#ABCDEF \mapsto (AB,CD,EF) \)

For example, the hex number #FF00FF represents the RGB color (FF, 00, FF), when the hex is changed to decimal we get the result (255, 0, 255) which corresponds to the color cyan. Since in each digit in the hexadecimal system can have 16 vales, 0-F a two digit hex number can store \(16^2 = 256 \) distinct values, just what we need for the RGB model.

Check out W3School section on HEX for more details.

Normalized RGB

Another version of the RGB color model is the normalized RGB color model. This model works just like the regular RGB model except that the triple (reg, green, blue) has the values of its components restricted from 0-1. To translate from regular RGB to normalized simply divide each component by 255.

For example to translate the the color cyan (255,0,255) normalized RGB we divide each component by 255 \( (\frac{255}{255}, \frac{0}{255}, \frac{255}{255}) \) = (1, 0, 1).

In OpenGL colors are specified with the normalized color model.

RGB Colors as Vectors

Viewed from the context of linear algebra these rgb colors can be viewed as belonging to a finite vector space. Because we keep track of three numbers r, g and b to uniquely identify a color we can view these colors as a vector living in a three dimensional space. Each axis, which we generally think of as x, y, and z corresponds to red, green, and blue respectively. The three primary colors red, green and blue form a basis for this space and as such any color can be expressed as a linear combination of this basis.

touch_appTry it Yourself

Use the sliders below to visualize where each RGB color lands in our color space. You can also specify colors with their hex, RGB, and normalized RGB representation. The program below will automatically translate any color to its hex, RGB and normalized RGB representation.

Color Pickercolor_lens
HEX
RGB
Normalized