In many math classes we work with vectors. I love to use colors to clarify relationship between various mathematical quantities that we encounter. Therefore it is useful to present how colors can be organized using vectors in the unit cube in $\mathbb{R}^3$.
- All colors are identified in Mathematica (or in the RGB coloring scheme in general) by a vector \[ \displaystyle \begin{bmatrix}x \\ y \\ z\end{bmatrix} \quad \text{with} \quad 0 \leq x \leq 1, \quad \text{and} \quad 0 \leq y \leq 1, \quad \text{and} \quad 0 \leq z \leq 1. \] In other words, Mathematica identifies colors with the points in the unit cube in the $xyz$-space. In this setting the unit cube is called The Color Cube.
- Below is an image of the color cube with 27 colors emphasized.
- Some of the colors emphasized below have common names. For others I tried to find appropriate names.
- Here I adopt following mathematical definitions of dark and light adjectives for colors: For a specific COLOR we define the dark COLOR to be the color which is half-way between COLOR and BLACK, that is the vector corresponding to the COLOR scaled by $1/2$. For a specific COLOR we define the light COLOR to be the color which is half-way between COLOR and WHITE, that is the sum of the vector $(1/2,1/2,1/2)$ and the vector corresponding to the COLOR scaled by $1/2$.
-
In this terminology maroon is just dark red, navy is dark blue, teal is dark cyan, purple is dark magenta, olive is dark yellow, gray is light black, or gray is dark white, salmon is light red, ultra pink is light magenta.
$\displaystyle \begin{bmatrix}0 \\ 0 \\0\end{bmatrix}$ Black $\displaystyle \begin{bmatrix}1/2 \\ 1/2 \\ 1/2\end{bmatrix}$ Gray $\displaystyle \begin{bmatrix}1 \\ 1 \\ 1\end{bmatrix}$ White $\displaystyle \begin{bmatrix}1 \\ 0 \\0\end{bmatrix}$ Red $\displaystyle \begin{bmatrix}1/2 \\ 0 \\0\end{bmatrix}$ Maroon $\displaystyle \begin{bmatrix}1/2 \\ 1/2 \\0\end{bmatrix}$ Olive $\displaystyle \begin{bmatrix}1 \\ 1/2 \\0\end{bmatrix}$ Orange $\displaystyle \begin{bmatrix}1 \\ 1 \\0\end{bmatrix}$ Yellow $\displaystyle \begin{bmatrix}0 \\ 1 \\0\end{bmatrix}$ Green $\displaystyle \begin{bmatrix}0 \\ 1/2 \\0\end{bmatrix}$ Dark Green $\displaystyle \begin{bmatrix}1/2 \\ 1 \\0\end{bmatrix}$ Chartreuse $\displaystyle \begin{bmatrix}0 \\ 1/2 \\ 1/2\end{bmatrix}$ Teal $\displaystyle \begin{bmatrix}0 \\ 1 \\1/2\end{bmatrix}$ Spring Green $\displaystyle \begin{bmatrix}0 \\ 0 \\1\end{bmatrix}$ Blue $\displaystyle \begin{bmatrix}0 \\ 0 \\ 1/2\end{bmatrix}$ Navy $\displaystyle \begin{bmatrix}1/2 \\ 0 \\ 1/2\end{bmatrix}$ Purple $\displaystyle \begin{bmatrix}1 \\ 0 \\ 1\end{bmatrix}$ Magenta $\displaystyle \begin{bmatrix}0 \\ 1 \\ 1\end{bmatrix}$ Cyan $\displaystyle \begin{bmatrix}1/2 \\ 0 \\ 1\end{bmatrix}$ Violet $\displaystyle \begin{bmatrix}0 \\ 1/2 \\1\end{bmatrix}$ Sky Blue $\displaystyle \begin{bmatrix}1/2 \\ 1/2 \\ 1\end{bmatrix}$ Light Blue $\displaystyle \begin{bmatrix} 1 \\ 1/2 \\1\end{bmatrix}$ Ultra Pink $\displaystyle \begin{bmatrix} 1/2 \\ 1 \\1 \end{bmatrix}$ Light Cyan $\displaystyle \begin{bmatrix}1 \\ 0 \\ 1/2 \end{bmatrix}$ Magenta Red $\displaystyle \begin{bmatrix} 1 \\ 1/2 \\ 1/2 \end{bmatrix}$ Salmon $\displaystyle \begin{bmatrix}1 \\ 1 \\ 1/2 \end{bmatrix}$ Light Yellow $\displaystyle \begin{bmatrix}1/2 \\ 1 \\ 1/2 \end{bmatrix}$ Light Green 27 special colors in the Color Cube
Place the cursor over the image to start the animation.
It is important to point out that in the red-green-blue coloring scheme, the following eighteen colors stand out. I present them in six steps with three colors in each step.
-
Step One:
- Black (vector $(0,0,0)$),
- White (vector $(1,1,1)$) and the color between them,
- Gray (vector $(1/2,1/2,1/2)$) which can be considered as dark White;
-
Step Two:
the coordinate colors,
- Red (vector $(1,0,0)$),
- Green (vector $(0,1,0)$),
- Blue (vector $(0,0,1)$);
-
Step Three:
the complementary colors to RGB which are CMY,
- Cyan (vector $(0,1,1)$) absence of Red,
- Magenta (vector $(1,0,1)$) absence of Green,
- Yellow (vector $(1,1,0)$) absence of Blue;
-
Step Four:
the dark RGB colors,
- Maroon (vector $(1/2,0,0)$) is the dark Red,
- Forest (vector $(0,1/2,0)$) is the dark Green,
- Navy (vector $(0,0,1/2)$) is the dark Blue;
-
Step Five:
the dark CMY colors,
- Teal (vector $(0,1/2,1/2)$) is the dark Cyan,
- Purple (vector $(1/2,0,1/2)$) is the dark Magenta,
- Olive (vector $(1/2,1/2,0)$) is the dark Yellow.
-
Step Six:
three (out of total of six) colors between neighbouring RGB and CMY. The logic of our choice here is more complicated. R neighbours with M and Y. G neighbours with C and Y. B neighbours with C and M. It turns out that only three out of these six colors have names.
- Orange (vector $(1,1/2,0)$) is the color in the middle between Red and Yellow,
- Chartreuse (vector $(1/2,1,0)$) is the color in the middle between Green and Yellow,
- Violet (vector $(1/2,0,1)$) is the color in the middle between Blue and Magenta.
Thinking of colors as vectors helps us to understand a transition between two colors.
-
Below is a transition between Teal and Yellow
Place the cursor over the image to start the animation.
Since Teal and Yellow are the heads of particular vectors in the Color Cube, to construct a transition I connected the heads with a line segment. Points on this line segment are the heads of special linear combinations of the vectors representing Teal and Yellow. As an exercise write the linear combinations which are used in the above transition.
- As we have seen at the beginning of this page the vector $\displaystyle \begin{bmatrix}0 \\ 1/2 \\ 1/2\end{bmatrix}$ represents Teal and the vector $\displaystyle \begin{bmatrix}1 \\ 1 \\ 0 \end{bmatrix}$ represents Yellow. What are the vectors representing the transitional colors in the animation above and two animations below? The answer is indicated in the animation above. The moving points colored by transitional colors move along the vector parallel to the vector \[ \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 1/2 \\ 1/2\end{bmatrix}. \] To represent all different points along this vector I scale it by a scalar $s \in [0,1]$, and to start from the head of Teal, I add the teal vector \[ \begin{bmatrix}0 \\ 1/2 \\ 1/2\end{bmatrix} + s \left( \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} - \begin{bmatrix}0 \\ 1/2 \\ 1/2\end{bmatrix}\right) = (1-s)\begin{bmatrix}0 \\ 1/2 \\ 1/2\end{bmatrix} + s \begin{bmatrix}1 \\ 1 \\ 0\end{bmatrix} = \begin{bmatrix} s \\ (1+s)/2 \\ (1-s)/2\end{bmatrix}. \] We can see from the preceding formula that at $s=0$ the point starts at Teal and at the value $s=1$ it reaches Yellow. For values of $s$ between $0$ and $1$ all the points on the line segment between Teal and Yellow are colored. For $s=1/2$ we obtain the color which is exactly half-way between Teal and Yellow.
- The construction in the preceding item is universal. If we are given two vectors $\mathbf{u}$ and $\mathbf{v}$ the formula \[ (1-s) \mathbf{u} + s \mathbf{v} \qquad s \in [0,1] \] represents vectors whose heads are along the closed line segment connecting the heads of $\mathbf{u}$ and $\mathbf{v}.$ The preceding linear combination of vectors $\mathbf{u}$ and $\mathbf{v}$ is called a convex linear combination of two vectors.
-
Two more ways of explore a transition between
Teal and Yellow.
Place the cursor over the image to start the animation.
In the above animation I used the colors from the line segment connecting Teal and Yellow to color the rectangles in the middle of the square.
Above is the unit circle colored using colors from the line segment connecting Teal and Yellow.
An application of an orthogonal projection studied in Linear Algebra is converting a color image to a black&white image. To understand this claim, you first need to understand that colors are in fact vectors in $\mathbb{R}^3,$ not all vectors in $\mathbb{R}^3,$ but only vectors confined to the unit cube \[ [0,1]^3 = \left\{ \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right] \, : \, r, g, b \in \mathbb{R} \right\}. \] Here we use so called RGB color model. I like using RGB triplets with entries between $0$ and $1$, including $0$ and $1$.
All shades of gray are obtained by scaling the vector $\left[\begin{array}{c} 1 \\ 1 \\ 1 \end{array}\right]$ with a scalar $\alpha \in [0,1]$. The orthogonal projection onto the vector $\left[\begin{array}{c} 1 \\ 1 \\ 1 \end{array}\right]$ is given by the formula: \[ \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right] \mapsto \frac{1}{3} \left[\begin{array}{c} r+g+b \\[-2pt] r+g+b \\[-1pt] r+g+b \end{array}\right]. \]
In the animation below, the shades of Gray are on the diagonal of the unit cube joining the corners $(0,0,0)$ (Black) and $(1,1,1)$ (White). For the hundred shades of Gray $(a,a,a)$ with $a \in [0,1],$ I present a polygon of all the colors that are projected to that shade of Gray. The shade of Gray can be identified by the dot in the center of the polygon of colors. I present both a three-dimensional picture in the Color Cube and a two-dimensional orthogonal projection onto the plane which is orthogonal to the vector $\left[\begin{array}{c}1 \\ 1 \\ 1 \end{array}\right].$ Hover the cursor over the image for the animation to start.
Here I explore other transformations of colors using Linear Algebra? I took a small image of me, imported the image into Wolfram Mathematica and did three linear algebra operations on the colors in that picture.
- The first picture from the left is the original picture.
- The second picture from the left is obtained from the original picture by replacing each color vector by its projection onto the white vector: \[ \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right] \mapsto \frac{1}{3} \left[\begin{array}{c} r+g+b \\[-2pt] r+g+b \\[-1pt] r+g+b \end{array}\right]. \]
- The third picture from the left is obtained from the original picture by replacing each color vector by its darkened version: \[ \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right] \mapsto \frac{1}{2} \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right]. \] In fact, a linear algebra definition of a dark color is as follows: A dark version of a color represented by its vector is the color represented by the scaling that vector by $1/2.$ All dark shades of that color are obtained by scaling that vector by a scalar between $0$ and $1.$
- The fourth picture from the left is obtained from the original picture by replacing each color vector by its lightened version, that is by the vector which is a half way between the color vector and white: \[ \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right] \mapsto \frac{1}{2} \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right] + \frac{1}{2} \left[\begin{array}{c} 1 \\ 1 \\ 1 \end{array}\right]. \] In fact, a linear algebra definition of a light color is as follows: A light version of a color represented by its vector is the color represented by the linear combination of that vector and the white vector with coefficients equal to $1/2.$ All light shades of a color are obtained the following formula \[ (1-s) \left[\begin{array}{c} r \\[-4pt] g \\ b \end{array}\right] + s \left[\begin{array}{c} 1 \\ 1 \\ 1 \end{array}\right] \qquad \text{where} \qquad s \in (0,1). \]
The justifications for the definitions in the preceding two items are the pictures below:
