Leaves are not green and the sky is not blue. Color is made from waves of light being reflected or absorbed by surfaces. If all wavelengths in the visible spectrum are absorbed we see black. The wavelengths reflected we perceive as color. But even these waves of light are without color until they pass through our eyes to our brain. Apparently the human eye can see about 10 million colors but not everyone sees color the same.
Different color systems have been developed to help us create color in predictable ways. Although each has 3 primary colors, these change depending on what the color is made from. Colors are made by mixing either:
Computer screens, TVs, cameras and scanners all generate color from light, adding red, green and blue to make white. This is additive color. This system goes back to experiments in the 19th century on color vision and color photography where red, green and blue filters were used to separate different wavelengths. This idea came from how our eyes perceive color through 3 different kinds of receptor cones which are sensitive to either blue (long), red (middle) or green (short) wavelengths.
All electronic color is expressed in numerical terms using RGB values (0-255) or hexidecimal (0-9, a-f) although it's impossible to be sure the colors you choose will look exactly the same in all contexts. Different operating systems calibrate color display differently and printers create colors using inks. If accurate color reproduction is important to you then you need to learn more. The International Color Consortium works to standardized color across different platforms.
The Color Wheel
Isaac Newton was the first person to place colors in a circle after his experiments showed that light contained all the colors of a rainbow. This 12 step color wheel is based on the RYB color system used by artists when mixing paints, although the RGB wheel is only slightly different. The essential properties of color are hue, saturation and brightness. Understanding these terms will improve how your create and manipulate color, and your ability to discuss color with clients and designers.
Hue
Hues are pure color, color wheel colors and what we mean when we say orange, blue or green. Since they're determined by the wavelength of the color as light they can be mapped across a spectrum from 0° to 359°.
A hue at its most intense will have 100% saturation and 100% brightness.
Hue is a great place to start when choosing colors in design.
Saturation
Saturation shows the intensity and purity of a color. Colors with low saturation are dull and are created by adding grey while the levels of black and white (brightness) stay the same. Grey has 0% saturation.
Use saturated colors to bring a sense of fun and friendliness to your instruction but in small, rather than large, amounts.
Use saturated colors to attract attention to key information, headings or action items like buttons and navigation.
Saturated colors can highlight titles and headings, since these will be scanned and not read like chunks of text.
Avoid placing 2 highly saturated colors next to each other. They will compete for attention and may increase visual fatigue.
Place dull colors next to intense colors to increase their intensity.
For a more unified look combine different colors with similar levels of saturation.
Use dull colors to tone down instruction that is conservative or serious.
For a more conservative look use one color and vary the levels of saturation.
Brightness
Brightness is the level of lightness or darkness in a color. White is 100% brightness, black is 0%. When paints are lightened they're called tints or pastels, when darkened they're called shades. Pastels have high brightness levels with saturation creating the hue's intensity. Any color that is 100% brightness and 0% saturation will be white.
Light colors advance, dark colors recede. The illusion of perspective is created by using light and dark colors.
Dark colors make good backgrounds for lighter text headings. Small pieces of text that will be scanned rather than read do not require the same degree of high contrast to increase readability.
Pastel backgrounds can be used to chunk information together, without sacrificing the levels of contrast needed for readability.
Use pastels for a calming or more open effect.
Dark colors add mood, intrigue or seriousness but an overly dark design can feel oppressive.
To make a pastel decrease the saturation and increase brightness.
To make a dark shade increase the saturation and decrease brightness.
Brightness is also called value.
To open a link in a new window: PC = Control Click. Mac = Command Click
Color Picker Activity
We all use color pickers to choose colors but who truly understands how they work? Use this quick online color picker to see how colors change when you change the levels of:
H: Hue
S: Saturation
B: Brightness
R: Red
G: Green
B: Blue
Are you able to figure out how to make brown?
Wikipedia's Sortable Lists of Colors
These pages below are a great way to reinfoce the above concepts. Try sorting the colors by hue, saturation and brightness-value. Also by percentages of red, green or blue.
