Select Page

This Color Theory 101 is a practical guide for designers to help them understand better this complex and so important subject. This article is not too technical, we’re going to study colors in an applicable way, talking about how do they work, color characteristics, additive and subtractive color, color harmonies and resources.

COLOR AND LIGHT
We can say that color is basically a matter of light. Without light there’s no color. So, how does it work and how can we see colors? First, white light contains all the visible spectrum colors. It means that these colors together, with the same intensities, make the white. The light from the sun, for example, is a white light. We can see that it’s made from all the colors in the rainbow, when the sunlight is decomposed.
Take a look below at how the light and colors work:
color-and-light

– The white light from the sun reaches the object.
– All the colors are absorbed, except the red.
– The red is the color that we see.
HUE, SATURATION AND BRIGHTNESS
There are three main characteristics that can define color: Hue, Saturation and Brightness. The hue is the color itself, as you can see the variations in the image below. The saturation refers to the amount of color that distances it from the gray (a grayscale image, for example, is fully unsaturated). The brightness refers to the amount of black or white in the color. This is how the HSB system works, based on these values to create any color.
hue-sat-brightness
ADDITIVE AND SUBTRACTIVE COLOR
We can work with these two color models, each one, for its own purposes. The additive model is based on mixing the light, while the subtractive model is based on mixing the pigments. In a simple way, we work with the additive model (RGB) when preparing contents to be displayed on tv, internet, mobile or any light source. When working for printing, we work with the subtractive model (CMYK).
rgb1 cmyk1
Notice something interesting: the mixing of RGB creates CMY colors, while the mixing of CMY creates RGB colors. And again, the mixing of light colors creates white and the mixing of pigment colors create black.
rgb2 cmyk2
COLOR WHEEL
The color wheel is the circular organization of colors according to hue. This representation is based on the primary colors (according to the standard color wheel: RYB) and shows the mixing between them.
The image shows a simple color wheel that will guide us when talking about color harmonies. Attention to the primary, secondary and tertiary colors in different sizes.
color-wheel
COLOR HARMONIES
Let’s see some of the combinations that we call harmonies. They tend to compose a good combination, but, of course, any project has its particularities.
Complementary Colors
The complementary color makes a high contrast layout, use carefully.
complementary


Double Complementary
double-complementary
Double Complementary
split-complementary


Analogous
The analogous harmony has a low contrast and makes a softer pallete.
analogous


Analogous with complementary
analogous-with-complementary


Tetrad
tetrad


Triad
triad


WARM AND COOL COLORS
We can separate colors in warm and cool. The warm colors are the ones close to orange, red and yellow. The cool ones are next to blue, violet and green. The image shows the “line” between them. Adding warm colors make the layout more cozy, happy and vibrant, while using cool colors make it more cold, serious and formal.
warm-and-cool

RESOURCES AND TOOLS

Colour Lovers
Community for color inspiration
colour-lovers
Kuler
Adobe’s tool for creating and sharing color palettes
kuler
Color Blender
Create color palettes online
color-blender
Color Jack (Studio , Galaxy and Sphere)
Three different tools for creating color schemes
color-jack
Colourmod
DHTML color picker
colourmod
Color scheme designer
Color palette genarator according to various harmonies
color-scheme-designer
Color Schemer
An application that works suggesting combinations for you
color-schemer
Daily Color Scheme
Every day with a new beautiful color scheme
daily-color-scheme
Color Combos
Browse through lots of combinations from the library
color-combos

Colorblind Web Page Filter

See any website as a color-blind person would see it

colorblind-filter

Easy RGB
Create color harmonies based on RGB values
easy-rgb
ColorZilla
Firefox add-on for designers, with handy tools
colorzilla
LINKS
How to use color in logo design
Color perception
What’s your favorite colour
Test your Color IQ