ITTEN CONTRAST

Hue

Create direct, clear visual tension through hue differences between pure colors.

7 Contrasts
Generates visual demos from your project palette; click a card to switch the main demo
Preview
Place the selected contrast relationship in UI, poster and information hierarchy to check results

About Itten's Seven Color Contrasts

Interactive guide to Itten's seven color contrasts: hue, light-dark, warm-cool, complementary, simultaneous, saturation, and quantity. With live visual examples. Each contrast type comes with a live interactive example — adjust the parameters and watch the effect change, which sticks better than reading theory alone.

Useful for designers building up color theory fundamentals from scratch, or for walking a team through the reasoning behind a color decision using the interactive demos directly.

Common questions

  • What are Itten's seven color contrasts? Johannes Itten's contrasts of hue, light-dark, warm-cool, complementary, simultaneous, saturation, and quantity — a foundational framework for using color deliberately.
  • Why does color theory still matter for digital design? These contrasts explain why a palette feels balanced or jarring, helping you make faster, more confident color decisions instead of guessing.
  • Which contrast is most useful for UI? Light-dark contrast (for readability and hierarchy) and quantity contrast (for proportion) carry the most weight in interface work.