Like any vector, these colors can be changed by matrices.

Example:

$$ \begin{bmatrix}0&1&0\\1&0&0\\0&0&1\end{bmatrix}\begin{bmatrix}255\\20\\100\end{bmatrix} = \begin{bmatrix}20\\255\\100\end{bmatrix} $$ This matrix interchange the first two numbers in the vector.

$$ \begin{bmatrix}0&1&0\\1&0&0\\0&0&1\end{bmatrix}\begin{bmatrix}255\\20\\100\end{bmatrix} = \begin{bmatrix}20\\255\\100\end{bmatrix} $$ This matrix interchange the first two numbers in the vector.

[255, 20, 100]

[20, 255, 100]

Since colors have three parts (r, g, and b), the matrices that change them are 3 dimensional transformations. These are the same matrices that change the space we live in.

$$ \begin{bmatrix}1&0&0\\0&1&0\\0&0&1\end{bmatrix}$$

Any changes in the first row will effect red, the second row effects green, and the third effects blue.

$$ \begin{bmatrix}1&0&0\\0&1&0\\0&0&1\end{bmatrix} \Rightarrow \begin{bmatrix}2&0&0\\0&1&0\\0&0&1\end{bmatrix} $$ increases the amount of red.

$$ \begin{bmatrix}1&0&0\\0&1&0\\0&0&1\end{bmatrix} \Rightarrow \begin{bmatrix}1&0&0\\0&0.5&0\\0&0&1\end{bmatrix} $$ decreases the amount of green.

$$ \begin{bmatrix}1&0&0\\0&1&0\\0&0&1\end{bmatrix} \Rightarrow \begin{bmatrix}3&0&0\\0&1&0\\0&0&0.8\end{bmatrix} $$ increases red and decreases blue.

Swap red and green:

$$\begin{bmatrix}0&1&0\\1&0&0\\0&0&1\end{bmatrix}$$

$$\begin{bmatrix}0&1&0\\1&0&0\\0&0&1\end{bmatrix}$$

Swap red and blue:

$$\begin{bmatrix}0&0&1\\0&1&0\\1&0&0\end{bmatrix}$$

$$\begin{bmatrix}0&0&1\\0&1&0\\1&0&0\end{bmatrix}$$

Swap green and blue:

$$\begin{bmatrix}1&0&0\\0&0&1\\0&1&0\end{bmatrix}$$

$$\begin{bmatrix}1&0&0\\0&0&1\\0&1&0\end{bmatrix}$$

$$ \begin{bmatrix}0.5&0.5&0.5\\0.5&0.5&0.5\\0.5&0.5&0.5\end{bmatrix}$$

The value we choose for each row will enhance the parts of the image that used to be that color.

This matrix brightens any areas that were red, and darkens green and blue:

$$ \begin{bmatrix}0.7&0.7&0.7\\0.1&0.1&0.1\\0.2&0.2&0.2\end{bmatrix}$$

$$ \begin{bmatrix}0.7&0.7&0.7\\0.1&0.1&0.1\\0.2&0.2&0.2\end{bmatrix}$$

This matrix darkens any areas that were red, and brightens green:

$$ \begin{bmatrix}0.1&0.1&0.1\\0.6&0.6&0.6\\0.3&0.3&0.3\end{bmatrix}$$

$$ \begin{bmatrix}0.1&0.1&0.1\\0.6&0.6&0.6\\0.3&0.3&0.3\end{bmatrix}$$

This is the official Microsoft sepia filter matrix:

$$ \begin{bmatrix}0.393&0.349&0.272\\0.769&0.686&0.534\\0.189&0.168&0.131\end{bmatrix}$$

$$ \begin{bmatrix}0.393&0.349&0.272\\0.769&0.686&0.534\\0.189&0.168&0.131\end{bmatrix}$$

[60, 100, 210]

[100, 210, 60]

[210, 60, 100]

Since there are \(3! = 6\) ways to arrange the three numbers of our base color, we can make a palette of up to 6 colors this way.

We'll use HSL format, which stands for

Saturation and lightness are both numbers ranging from 0 to 100, indicating a percentage. Larger values make an image brighter and more colorful, smaller numbers make for darker or less vibrant images.

A *complementary scheme* involves only two colors, directly opposite each other on the color wheel:

A *split complementary scheme* involves only three colors, each usually chosen to be 150 degrees from the base color:

To find coordinating colors, we can choose any angle to add to our base hue (without changing saturation or lightness), and keep adding the same value until we get all the colors we need.

This type of color scheme is called*analogous*

This type of color scheme is called

The larger the angle we add each time, the bigger the difference in our colors.

Example: Adding 60 each time with base hue 80:

hsl(80, 60%, 50%)

hsl(140, 60%, 50%)

hsl(200, 60%, 50%)

hsl(260, 60%, 50%)

hsl(320, 60%, 50%)

Example: Starting with hsl(118, 34%, 60%) and ending with hsl(258, 34%, 60%), with 10 added to the hue at each step:

This type of color scheme is called

For even more choices, saturation and lightness can be adjusted for each of these four colors, making an even bigger (yet coordinating) palette.

This applet lets you build a combination scheme.

hsl(80, 20%, 25%)

hsl(80, 20%, 50%)

hsl(80, 20%, 75%)

hsl(80, 40%, 25%)

hsl(80, 40%, 50%)

hsl(80, 40%, 75%)

hsl(80, 60%, 25%)

hsl(80, 60%, 50%)

hsl(80, 60%, 75%)

hsl(80, 80%, 25%)

hsl(80, 80%, 50%)

hsl(80, 80%, 75%)

The first color in the list is the base color. Move your mouse over that block to change it and generate a brand new palette.