Color Theory

The Color Wheel

color_wheel
The first color wheel was created by Sir Isaac Newton in 1666 after he saw light refracted through a prism. In the image below, you can see an illustration portraying what it looks like when white light is refracted through a prism.

dark_side_of_the_moon
A well-known image of a beam of white light being refracted into its component colors. Originally featured as the cover image for Pink Floyd’s “Dark Side of the Moon” album.

When light is refracted through a prism, it is separated into a spectrum of individual colors. They are, in this order:

-Red
-Orange
-Yellow
-Green
-Blue
-Indigo
-Violet

You can remember them using the mnemonic ROY G BIV.

For this course, we will not worry too much about distinguishing between the colors Blue and Indigo. But just know that they both exist in the spectrum of visible light.


Types of Colors

We have three different types of color:


Red, Blue, and Yellow.

Primary colors are the three colors that cannot be formed by mixing any other colors. All other colors derive from mixing these three.

color_wheel_primary


Green, Orange, and Violet

Secondary colors are formed by mixing different pairs of the three primary colors.

color_wheel_secondary


Red-Orange, Yellow-Orange, Blue-Green, Yellow-Green, Blue-Violet, Red-Violet

Tertiary colors are formed by mixing one primary and one secondary color.

color_wheel_tertiary



Basics of Color Theory

Color Quality

Hue – Distinct color identity

hue_exampleSaturation – How rich or how dull is it?

color_saturation

Value – Light or Dark?

color_value

Temperature – Warm or Cool?

color_temperature

Color Harmony

Harmony creates a sense of order and balance within a composition. When choosing a color scheme, you want to consider the themes, associations, and feelings those combinations may evoke in a user/viewer/reader.

Color Schemes

There are many types of color schemes:


Any three colors that are side-by-side on a 12-part color wheel.

color_analogous

 

color_analogous1color_analogous2

color_analogous3

color_analogous4


Any two colors that are directly opposite of each other on a 12-part color wheel. Such as Yellow-Purple, Blue-Orange, Red-Green

color_complimentary

color_complimentary1

color_complimentary2

color_complimentary3


Nature can offer examples of colors that work well together, and also signify certain things like danger.

color_natural1color_natural2

color_natural3

color_natural4


A triadic color scheme uses colors that are evenly spaced around the color wheel.

color_triad


The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.

color_split_complementary


The rectangle or tetradic color scheme uses four colors arranged into two complementary pairs.

color_rectangle


The square color scheme is similar to the rectangle, but with all four colors spaced evenly around the color circle.

color_square


Color Context

Certain color combinations can be distracting and potentially disorienting for viewers.

In the example below, the color red feels bright and alive on top of black but appears duller on top of white. It’s confusing and lifeless on top of brown, but brilliant on top of the green-blue.

color_context1

In the example below, the same rectangle appears to be two different colors when laid on top of different color backgrounds.

color_context2


Beware of Optical Illusions!

Optical Illusions can be inadvertently created by placing combinations of certain colored shapes or lines together. These illusions can be distracting and even disorienting to the user. They should only be used when they connect specifically to the content of what you are designing.

optical_illusion1

In the above example, you can see how the groups of shapes appear to slide back and forth as your eyes scan across them.

color_illusion1In the above example, the grey lines between the rows of alternating black and white boxes appear to be slanted. They are, in fact, parallel to each other.

color_illusion2In the above example, light grey dots appear at the intersections of the black lines even though they aren’t there.color_illusion3In the example above, the white dots appear white when you focus on them. But the dots surrounding those dots appear to turn black when they are out of focus.

 

Next: Color Psychology