Color Theory Basics for Designers

The Color Wheel

The traditional color wheel (derived from Isaac Newton's 1666 prism experiments and formalized by Johannes Itten in 1961) arranges the visible spectrum into 12 hues organized in three tiers:

• Primaries: red, yellow, blue — the three hues that can't be mixed from others
• Secondaries: orange, green, purple — each mixed from two primaries
• Tertiaries: red-orange, yellow-orange, yellow-green, blue-green, blue-purple, red-purple — each a primary mixed with an adjacent secondary

Six Color Harmony Rules

1. Monochromatic

One hue at multiple lightness and saturation levels. Safe, cohesive, sometimes boring. Best for minimalist UIs and editorial layouts.

2. Analogous

Three hues adjacent on the color wheel (e.g. yellow, yellow-orange, orange). Warm and harmonious, low contrast. Great for nature imagery and landing pages with a unified mood.

3. Complementary

Two hues opposite on the wheel (e.g. blue and orange). High contrast, maximum visual energy. Used in sports branding, movie posters, and call-to-action buttons. Next steps: find complementary colors from an image, build complementary palettes from photos, or apply the pairs in photography.

4. Split-complementary

One base hue plus the two hues adjacent to its complement. Softer than pure complementary but still high-contrast. Good for brands that want energy without harshness.

5. Triadic

Three hues evenly spaced around the wheel (e.g. red, yellow, blue). Balanced and vibrant. Common in children's brands and playful product design.

6. Tetradic (double-complementary)

Four hues forming a rectangle on the wheel. Rich and complex but requires careful balance to avoid visual chaos. One color should dominate; the others support.

HSL: The Practical Color Model

Designers and developers should think in HSL (hue, saturation, lightness) rather than hex:

• Hue (0–360): the color itself. 0 = red, 120 = green, 240 = blue.
• Saturation (0–100%): how pure vs grey the color is. 0% = neutral grey, 100% = fully saturated.
• Lightness (0–100%): how light or dark. 0% = black, 50% = pure hue, 100% = white.

To build tints and shades in a design system, keep hue and saturation constant and vary only lightness. This is how Tailwind's blue-50 through blue-900 system works.

Warm vs Cool Colors

• Warm: reds, oranges, yellows. Feel energetic, inviting, active. Used to draw attention (CTAs, error states, food brands).
• Cool: greens, blues, purples. Feel calm, trustworthy, cerebral. Used for fintech, healthcare, enterprise SaaS.
• Neutral: greys, beiges, whites, blacks. The connective tissue of any palette.

A well-balanced palette usually includes at least one warm, one cool, and several neutrals — which is exactly why image-derived palettes (where nature already balances warmth and coolness) tend to feel so cohesive.

Applying Color Theory with PhotoTones

The Vibrant.js algorithm that PhotoTones uses already bakes color theory into its output. Every extracted palette automatically includes:

• A vibrant dominant color (high saturation, medium lightness)
• A dark vibrant shade for contrast
• A light vibrant tint for backgrounds and highlights
• A muted neutral for body text and subtle UI
• A dark muted for deep backgrounds
• A light muted for subtle surfaces

That's the skeleton of a production-ready palette — 6 colors with distinct semantic roles, ready to map to a design system.

Free vs PhotoTones Pro

PhotoTones is free forever — extract 6 colors per image with hex, RGB, and HSL copy, plus a 50% resolution composite JPEG download. PhotoTones Pro ($7/month) adds a WCAG contrast grid, light/dark theme CSS, and extended 12-color palettes for design systems.

FAQ