Transforming Colors
andColor Schemes
Colors as Numbers (Again!)
We've seen that colors can be represented by vectors. Usually the vectors have three components: red, green, and blue.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]
3D Transforms
Last week, the matrices we saw were linear transformations of 2 dimensional space (a flat plane).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.
Start with the Identity
We'll find each transformation matrix by starting with the identity:$$ \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.
Increasing/Decreasing Colors
To adjust the amount of a certain color in an image, we change the 1 in the corresponding row.$$ \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.
Increasing/Decreasing Colors
To adjust the amount of a certain color in an image, we change the 1 in the corresponding row.$$ \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.
Increasing/Decreasing Colors
To adjust the amount of a certain color in an image, we change the 1 in the corresponding row.$$ \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.
Interchanging Two Colors
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}$$
Interchanging Two Colors
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}$$
Interchanging Two Colors
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}$$
Greyscale
Making every entry of a row in our matrix equal to the same value between 0 and 1 will make every color a shade of grey.$$ \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.
Greyscale
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}$$
Greyscale
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}$$
Sepia
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}$$
Color Palettes
We can use transformations to find aesthetically pleasing color palettes. One simple way to do this is to choose any base color in RGB format, then rearrange the numbers into different positions of the vector to find coordinating colors:[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.
HSL Revisited
More interesting palettes can be made using trigonometry, and using a different style of writing our numbers.We'll use HSL format, which stands for Hue, Saturation, and Lightness.
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.
HSL Revisited
The hue of a color is represented by an angle, which tells us where we want to land on a color wheel.
HSL Revisited
The hue of a color is represented by an angle, which tells us where we want to land on a color wheel.
Complementary Schemes
A complementary scheme involves only two colors, directly opposite each other on the color wheel:
Split Complementary Schemes
A split complementary scheme involves only three colors, each usually chosen to be 150 degrees from the base color:
Analogous Schemes
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 analogous
Analogous Schemes
To find coordinating colors, we can choose any angle to add to our base hue.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%)
Gradients
Color gradients are analogous schemes, but usually with a very small angle added each time.
Example: Starting with hsl(118, 34%, 60%) and ending with hsl(258, 34%, 60%), with 10 added to the hue at each step:
Polygonal Schemes
Another scheme involves choosing a (regular, convex!) polygon to fit on the color wheel. Choose the colors where its vertices fall.This type of color scheme is called polygonal.
Polygonal Schemes
Polygonal schemes have special names, like triadic, square, and pentagonal, that reflect how many vertices we have.
Tetradic Schemes
A tetradic scheme is similar to a polygonal scheme, but always using a rectangle:
Combining Schemes
A combination of schemes is also possible. Often, two analogous colors and one complementary color are chosen for each base color, to create a four color palette.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.
Monochromatic Schemes
If we keep the hue as is, but change lightness and saturation, we get a monochromatic 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%)
Yet Another Applet
This applet lets you create different types of color schemes based on HSL color descriptions. When you find a palette you like, you can have the colors listed in several formats.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.