facebook google plus twitter
Webucator's Free Color Theory Tutorial

Lesson: Terminology

Welcome to our free Color Theory tutorial. This tutorial is based on Webucator's Color Theory course.

Color can be described by the everyday objects that are considered "mainstream" due to a long-standing association that evolves in every culture and generation. Therefore, defining the audience is important in planning a successful project. Although color choice can be considered arbitrary and something of personal choice, in this course we learn there are rules and terminology associated with choosing the proper colors for each project. In this lesson, we will define and cite examples of many terms commonly used in color theory.

Lesson Goals

  • Define and understand basic terms.
  • Explore color options in popular software.

Color Wheel

Color wheels show the relationship between all of the colors. They are represented in easy-to-understand methods and arrangements. Regardless of your design knowledge or project type, you will find a color wheel to help you understand the relationship between all of the colors.

List of online color wheels:

Color wheels are created for every type of medium and may be found online. If you are new to color theory/design, it is a good idea to explore these various wheel options. Professionals may also find them helpful as they may help trigger a new idea!Color WheelFull 12-Color Wheel

Primary Color

Pure color, cannot be mixed. As shown in the image below, the primary colors are red, blue, and yellow.

Primary colors have been part of our lives since our first years of school as we learned to mix paint colors in art class. They are the base of other colors.

Primary Color WheelPrimary Color Wheel

Secondary Color

Colors created by mixing two primary colors. The three secondary colors are shown in the image below as green, violet, and orange. To mix these colors, blend the following:

  • Green - yellow and blue in equal parts.
  • Violet - red and blue in equal parts.
  • Orange - red and yellow in equal parts.

Secondary Color WheelSecondary Color Wheel

Tertiary Color

Colors created by mixing a primary and a secondary color. The six tertiary colors are shown in the image below. They are mixed by combining the following colors:

  • Blue violet - combine blue and violet in equal parts.
  • Blue green - combine blue and green in equal parts.
  • Yellow green - combine yellow and green in equal parts.
  • Yellow orange - combine yellow and orange in equal parts.
  • Red orange - combine red and orange in equal parts.
  • Red violet - combine red and violet in equal parts.

Tertiary  Color WheelTertiary Color Wheel

Explore a Live Color Wheel

Duration: 15 to 25 minutes.

In this exercise, you will open either a Photoshop or Illustrator file to explore the basic 12-color wheel. Open terminology/Exercises/colorWheel12.ai or terminology/Exercises/colorWheel12.psd

  1. Using the Layers Panel Windows > Layers (F7), toggle the different layers to explore the different color groups (primary, secondary, and tertiary).

Solution:

  1. Open terminology/Demos/colorWheel12.ai.
  2. Open the Layers Panel. Click Windows > Layers.Window Layers
  3. Show and hide various layers.Show and Hide Layers
  4. Close the file without saving it.

Saturation

Saturation can be defined as the degree of purity and brightness within a color. Using photo-editing software, such as Photoshop, you may adjust an image to increase or decrease the saturation level.

Adjusting the saturation of an image using Photoshop.

  1. Open Photoshop (or any photo editor).
  2. Open terminology/Demos/colorPicture.jpg.
  3. On the Layers panel, choose to create a new Hue/Saturation Hue/Saturation Icon adjustment layer.Hue/Saturation on Layers Panel
  4. Take a moment and try out a few alterations and note the changes in the image. Always use caution as we are trusting our human eyes and the monitor to make adjustments. This image may look very different to another person on another monitor.
  5. Adjust for less saturation.Saturation Adjustment 2013 Tracy Berry
  6. Adjust for more saturation.Saturation Adjustment
  7. To make sure we are not altering the image too much, I like to use a tool that adjusts based on the math, instead of my eyes. For example, you may use image variations if you have the Windows version of Photoshop (if you are using the Mac version, please skip this section as there is not an equivalent option in your version. You may have the option if you are able to launch Photoshop in 32-bit mode on your Mac OS):
    1. Select the background layer in the layers panel and hide the Hue/Saturation layer.
    2. Click Image > Adjustments > Variations.Image Adjustments Variations
    3. Click the Saturation radio button.Saturation Radio Button
    4. Notice the More Saturation preview has many blue areas. These show too much saturation and the implied suggestion is to click the opposite, Less Saturation to even out the image and make the best print possible.More Saturation
    5. Click the Less Saturation and then click OK.Less Saturation
    6. Save the image as "PicnicIslandForPrint.psd" and close the image.

Hues and Shades

Hues

Hues are often defined as the purest form of a color. There are 12 that are considered to be the purest and most vivid. The three primary colors red, blue, and yellow. The three secondary colors green, violet, and orange. The six tertiary colors: blue violet, blue green, yellow green, yellow orange, red orange, and red violet.

Shades

hue + blackShades

Tints

hue + whiteTints

Tones

hue + grayTones

Exploring Shades and Tints Using Adobe Illustrator

To explore shades and tints in Adobe Illustrator, do the following:

  1. Open Illustrator (or any photo editor you may have).
  2. NOTE: If you do not have Illustrator, the directions below may differ based on your product.
  3. Open terminology/Demos/colorWheel12.ai.
  4. On the Windows menu, click Color Guide.Color Guide
  5. Choose Shades form the Color Harmony drop-down.Shades in Color Harmony Drop-down
  6. Take a moment and explore other Color Harmony options.
  7. Close the file with out saving changes.

Value of the Hue

The value of a hue describes the light or darkness of a hue. If values are close, meaning if they are very similar to our human eye, images blend together. If values are very different (greater contrast), parts of the image that are most different will "pop". Using the image terminology/Demos/abby.jpg, we will show a sample of value.

  1. Open terminology/Demos/abby.jpg in Photoshop.
  2. Click on Image > Adjustments > Hue/Saturation.Image Adjustments Hue Saturation
  3. Move the Lightness slider to -70.Hue/Saturation Dialog Box
  4. Move the Lightness slider back to 0. Click OK.Hue/Saturation Dialog Box
  5. Close the image without saving changes.

When the hues are at the dark end of the spectrum, the subject of the image is hard to determine and everything blends together.Cat in Dark Hues 2013 Tracy Berry

When the hues are at the light end of the spectrum, the subject of the image is easy to determine, the cat "pops" and is easy to recognize as the subject of the image.Cat in Light Hues 2013 Tracy Berry

Colors

Neutral Colors

Neutral colors, although they are often thought of as as the absence of color, often have a slight bit of color to them.Neutral ColorsSample of neutral colors created in Adobe Photoshop

Warm Colors

Warm colors are used to add a level of energy to a project. Be aware that these colors might often elicit a very strong emotion.Warm ColorsColor Guides from Adobe Illustrator

Cool Colors

Cool colors are used to add a calm and relaxing vibe to a project. These colors are considered soothing and give a peaceful emotion.Cool ColorsColor Guides from Adobe Illustrator

Monochromatic Colors

Monochromatic colors use a single hue and use a variety of shades and tints to achieve a color palette. They are used to create a minimal, yet impact-full design that will draw attention to key areas.Monochromatic ColorsColor Guides from Adobe Illustrator

Color Scheme

Color schemes are the culmination of all of the colors that will be used in a project organized in a way that is most beneficial to all involved. We will explore color schemes in the next lesson. By the end of the course, you will be able to build interactive color schemes.

Color Scheme

Color schemes are the culmination of all of the colors that will be used in a project organized in a way that is most beneficial to all involved. We will explore color schemes in the next lesson. By the end of the course, you will be able to build interactive color schemes.

Explore a Color Using Photoshop

Duration: 15 to 25 minutes.

In this exercise, you will open either a Photoshop or another photo editor to explore color using colorPicture.jpg.

  1. Open Photoshop (or any photo editor).
  2. Open terminology/Exercises/colorPicture.jpg.
  3. On the Layers panel, choose to create a new Color Balance Color Balance Icon adjustment layer.

Solution:

  1. Open Photoshop (or any photo editor).
  2. NOTE: If you do not have Photoshop, the directions below may differ based on your product.
  3. Open terminology/Exercises/colorPicture.jpg.
  4. On the Layers panel, choose to create a new Color Balance Color Balance Icon adjustment layer.Color Balance from Layers Panel
  5. Take a moment and try out a few alterations and note the changes in the image. Always use caution as we are trusting our human eyes and the monitor to make adjustments and this image may look very different to another person on another monitor.
  6. To remove a "red" tint, adjust the Tone: Shadows and add more Cyan (value -35) this cancels out the red. Color Balance in Properties
  7. Explore on your own.
  8. Close the file without saving.