Skip to main content
PerfectPalette
PerfectPalette HelpLearn
Back to app

Learn

The Learn section provides interactive educational content about color science, theory, and design best practices. Navigate to Learn in the main navigation.

Available articles

Color Harmony

Understand how colors relate to each other on the color wheel. Explore harmony modes interactively:

  • Complementary (opposite hues)
  • Analogous (adjacent hues)
  • Triadic (three evenly spaced hues)
  • Square Tetrad (four hues at 90° intervals)
  • Rectangular Tetrad (two complementary pairs with unequal spacing)
  • Split Complementary
  • Monochromatic (single hue with varying lightness/saturation)

Hue, Value & Chroma

Understand the three independent dimensions that define every color:

  • Hue — The color family (0-360° spectral position)
  • Value (Lightness) — How bright or dark (0% black to 100% white)
  • Chroma — How vivid or muted (0 gray to maximum saturation)
  • Interactive playground with three OKLCH sliders
  • Perceptual uniformity comparison: OKLCH vs HSL
  • sRGB gamut boundary visualization
  • Monochromatic scale builder

Color Modes

Compare different color models and when to use each:

  • RGB — Screen display
  • HSL / HSB — Intuitive editing
  • CMYK — Print production
  • LAB / LCH — Perceptual uniformity
  • OKLCH — Modern perceptual model
  • Pantone — Standardized spot colors

Color Science

Dive deeper into the science behind color:

  • CIE XYZ color space
  • Spectral color and wavelengths
  • IPT and ICtCp perceptual models

Color Psychology

Learn how colors influence emotion and behavior:

  • Color-emotion associations
  • Trust, urgency, and purchasing signals
  • The 60-30-10 rule for balanced color usage
  • Cognitive biases related to color perception

Perception & Context

Understand how context changes how we see color:

  • Lighting conditions
  • Dark vs. light mode differences
  • Simultaneous contrast illusions
  • The "Is it blue or gold?" phenomenon

Color Variations

Master the building blocks of color adjustment:

  • Shades (adding black)
  • Tints (adding white)
  • Tones (adding gray)
  • Hue rotation
  • Temperature shifting

Glossary

Quick reference for essential color theory terms:

  • 41 curated terms across 6 categories: Fundamentals, Variations & Adjustment, Perception & Context, Relationships & Harmony, Accessibility & Implementation, UI & Design Systems
  • Each term includes a definition, plain explanation, practical example, and connections to palette design
  • "Start here" terms — hue, saturation, lightness, complementary, contrast ratio — highlighted for beginners
  • Browse by category or alphabetically
  • Every term links to related glossary entries and Learn articles

Undertones

Discover the subtle secondary color hidden beneath a color's surface:

  • Mass tone vs undertone — The dominant color vs the subtle color family lurking beneath
  • Revealing undertones — Use white, gray, black, and complementary backgrounds to expose hidden color casts
  • Undertones in neutrals — How grays, whites, and beiges carry warm or cool undertones
  • Undertone harmony — Why matching undertones matters for cohesive palettes
  • Programmatic detection — Using OKLCH chroma reduction to identify a color's mathematical undertone

Contrast & WCAG

Learn the accessibility standards that matter:

  • How contrast ratios are calculated
  • AA level — 4.5:1 for normal text, 3:1 for large text
  • AAA level — 7:1 for normal text, 4.5:1 for large text
  • Font size requirements for each level

Accessibility & CVD

Design for everyone:

  • Types of color vision deficiency (protanopia, deuteranopia, tritanopia, achromatopsia)
  • How to simulate CVD
  • Inclusive design strategies — using shape, pattern, and labels alongside color