Itten Color Wheel: Basics, Applications, and Tips

  • Media
  • Learn
  • Itten Color Wheel: Basics, Applications, and Tips
Itten Color Wheel: Basics, Applications, and Tips

The Itten Color Wheel is a visual tool developed by Swiss artist, theorist, and Bauhaus educator Johannes Itten (1888–1967) to demonstrate relationships between colors and create harmonious color combinations. Itten extensively studied the impact of color on human perception, significantly influencing modern design and art.

Try our color wheel in action - Gradients.app color wheel

How the Itten color wheel works

The Itten Color Wheel comprises 12 segments, including three primary, three secondary, and six tertiary colors.

Itten color wheel
Itten color wheel

Primary Colors

Primary colors are red (#FF0000), blue (#0000FF), and yellow (#FFFF00). These fundamental colors cannot be created by mixing other shades; they serve as the basis for generating all other colors.

The primary colors of the Itten circle
The primary colors of the Itten circle

Secondary Colors

Secondary colors are orange (#FFA500), green (#008000), and violet (#800080). They are formed by mixing two primary colors:

  • Yellow (#FFFF00) + red (#FF0000) = orange (#FFA500);
  • Yellow (#FFFF00) + blue (#0000FF) = green (#008000);
  • Blue (#0000FF) + red (#FF0000) = violet (#800080).
The secondary colors of the Itten circle
The secondary colors of the Itten circle

Tertiary Colors

Tertiary colors are six shades obtained by mixing a primary color with a neighboring secondary color:

  • Yellow-orange (#FFD700);
  • Red-orange (#FF4500);
  • Red-violet (#C71585);
  • Blue-violet (#8A2BE2);
  • Blue-green (#20B2AA);
  • Yellow-green (#ADFF2F).
The tertiary colors of the Itten circle
The tertiary colors of the Itten circle

Color Schemes and Their Applications

The Itten Color Wheel is used to select harmonious color combinations. The main schemes include:

Complementary Combination

Utilizing colors opposite each other on the wheel, such as red (#FF0000) and green (#008000). This combination creates high contrast and dynamism, frequently used in advertising and user interfaces to attract attention.

Complementary Combination
Complementary Combination

Analogous Triad

Combining three adjacent colors on the wheel, such as yellow (#FFFF00), yellow-orange (#FFD700), and orange (#FFA500). This provides smooth, harmonious transitions and is ideal for interiors that require coziness and calmness.

Analogous Triad
Analogous Triad

Classic Triad

Using three colors evenly spaced around the wheel, such as red (#FF0000), blue (#0000FF), and yellow (#FFFF00). This combination creates a balanced and vibrant palette popular in logos and branding.

Classic Triad
Classic Triad

Tetradic Combination

Combining four colors forming a rectangle or square on the wheel, for example, red (#FF0000), green (#008000), blue (#0000FF), and orange (#FFA500). It allows the creation of rich and diverse combinations frequently used in fashion and packaging design.

Tetradic Combination
Tetradic Combination

Tips for Working with Itten Color Schemes

  • Use one main color and several complementary colors to create a harmonious design.
  • Avoid using a large number of colors at the same time to avoid a sense of overwhelm.
  • Use contrasting combinations to emphasize important elements in the composition.
  • Colors should contrast with each other.
  • Avoid a lot of saturated colors - it can tire the viewer.

Understanding and correctly applying the Itten Color Wheel enables designers, artists, and creative professionals to create expressive, aesthetically pleasing, and harmonious color palettes for any project.

Related articles

Color Models: RGB, CMYK, HSB, and LAB
Color Models: RGB, CMYK, HSB, and LAB
Warm and Cool Colors: How They Affect Our Perception
Warm and Cool Colors: How They Affect Our Perception
How to Choose Font Color: Tips for Better Readability
How to Choose Font Color: Tips for Better Readability
What is a Gradient and What Types Exist
What is a Gradient and What Types Exist

Hello,
nice to see you!

Forgot Password?

Enter the email address you used when you joined and we’ll send you instructions to reset your password.

Create
a new account

Password mismatch

Introducing Mesh Gradients

We've added a mesh gradient generator and a new mesh library for you to enrich with your gradients. Now you can create beautiful abstract gradients, download them, copy their CSS codes, save them in your personal dashboard, and add them to the public library.

We will soon add a radial gradient generator!

Mesh Gradients