Skip to content

Color Wheel Harmonies

Run the Color Wheel Harmonies MicroSim Fullscreen
Edit the Color Wheel Harmonies MicroSim on the P5.js Editor

About This MicroSim

The Color Wheel Harmonies MicroSim helps students understand color relationships through interactive exploration. By clicking and dragging around the color wheel, students can select any hue and see how different harmony modes create color palettes that work well together.

How to Use

Selecting Colors

  • Click anywhere on the color wheel to select a base color
  • Drag around the wheel to smoothly change your selection
  • The selector dot shows your current color choice

Harmony Modes

Use the dropdown menu to switch between harmony types:

  1. Complementary - Shows the color directly opposite (180°) on the wheel
  2. Creates maximum contrast and visual tension

  3. Great for making elements stand out

  4. Analogous - Shows two colors adjacent to your selection (±30°)

  5. Creates smooth, harmonious combinations

  6. Found naturally in many settings (sunset colors, foliage)

  7. Triadic - Shows colors 120° apart

  8. Creates vibrant, balanced compositions

  9. Popular in design for dynamic yet balanced palettes

  10. Split-Complementary - Shows two colors adjacent to the complement

  11. High contrast but less tension than complementary
  12. Good for beginners as it's hard to mess up

Information Panel

The right panel displays: - Selected color swatch (large) - HSB and RGB color values - Color name - Harmony color swatches - Description of the current harmony mode

Embedding This MicroSim

You can include this MicroSim on your website using the following iframe:

1
<iframe src="https://dmccreary.github.io/microsims/sims/color-wheel/main.html" height="652px" scrolling="no"></iframe>

Learning Objectives

After using this MicroSim, learners will be able to:

  1. Identify the 12 colors on a traditional color wheel
  2. Understand how color relationships are determined by angular distance
  3. Analyze why certain color combinations feel harmonious or tense
  4. Apply color harmony principles to design choices
  5. Compare the visual effects of different harmony modes

Color Theory Background

The Color Wheel

The color wheel arranges colors in a circle based on their relationships:

  • Primary Colors: Red, Yellow, Blue (cannot be mixed from others)
  • Secondary Colors: Orange, Green, Violet (mixed from two primaries)
  • Tertiary Colors: The six colors between primaries and secondaries

Why Harmonies Work

Color harmonies are based on geometric relationships on the wheel:

Harmony Angle Effect
Complementary 180° Maximum contrast
Analogous 30° Natural flow
Triadic 120° Dynamic balance
Split-Complementary 150°/210° Softer contrast

Suggested Activities

Activity 1: Explore Each Harmony

Select a base color and cycle through all four harmony modes. Describe how the "feel" of the palette changes.

Activity 2: Find Natural Harmonies

Think of natural scenes (sunset, forest, ocean) and use the wheel to identify which harmony mode they represent.

Activity 3: Design Application

Choose a harmony mode and create a simple design (logo, poster concept) using only those colors plus black and white.

Activity 4: Complementary Pairs

Find all six complementary pairs on the wheel. Which pair creates the most visual tension?

Lesson Plan

Grade Level

Middle School (6-8) through High School Art/Design classes

Prerequisites

  • Basic understanding of primary and secondary colors
  • Familiarity with the concept of hue

Duration

15-20 minutes for guided exploration

Procedure

  1. Introduction (3 min): Explain that colors have mathematical relationships based on position on the wheel.

  2. Demonstration (5 min): Show each harmony mode using red as the base color. Discuss the visual effect of each.

  3. Guided Exploration (5 min): Students explore different base colors while you ask guiding questions.

  4. Creative Application (5 min): Students choose a harmony for a hypothetical design project and explain their choice.

Discussion Questions

  • Why do you think complementary colors are used in sports team logos?
  • Which harmony mode would you choose for a relaxing spa website? Why?
  • How do movie posters use color harmony to convey mood?

References

  • Itten, Johannes. "The Art of Color"
  • Albers, Josef. "Interaction of Color"
  • Adobe Color Wheel: https://color.adobe.com