Color Theory
The principles governing how colours relate, combine, and evoke psychological responses.
Plain English
Colour theory explains why some colour combinations feel harmonious and others feel jarring. The most useful concepts for UI work: complementary colours (opposite on the colour wheel — creates contrast and energy), analogous colours (adjacent — harmonious and calm), and the rule that cool colours (blue/green) recede while warm colours (red/orange) advance. In practice, most UI design uses one dominant neutral and one accent — not complex colour harmonies.
Technical
The HSL (Hue, Saturation, Lightness) model is the most useful for UI work because it maps directly to how designers think: pick a hue, reduce saturation for muted tones, adjust lightness for tints and shades. Colour harmony models: complementary (180° apart), analogous (30° apart), triadic (120° apart), split-complementary (150° apart on one side). For accessible UI: a brand's full-saturation colour is rarely accessible as text — use darker shades for text and lighter for backgrounds.
Live Demo
Complementary
High contrast, energetic
Analogous
Harmonious, calm
Triadic
Vibrant, balanced
Color relationships determine the emotional tone of a design.
Usage
✓ Good usage
Use a medium blue (#2563EB) as the primary accent on a cool grey neutral scale — the analogous hue relationship creates a coherent, calm professional palette.
✗ Bad usage
Combining a bright red accent, a green success state, a blue link colour, and an orange warning all at full saturation — four competing hues create visual chaos.
Recommended values
- Most UIs need only: 1 neutral scale + 1 primary accent + semantic colours
- Brand colour at full saturation: use for icons, accents, borders — rarely as text
- For text: always use a dark shade of the hue (600–900 stop)
- Analogous schemes (adjacent hues) feel calmer than complementary
- Warm accent on cool neutral: high energy. Cool accent on warm neutral: sophisticated.
Common mistakes
- Using the brand's primary colour at full saturation for body text — fails contrast and feels aggressive.
- Mixing warm and cool neutrals (e.g. warm beige background with cold blue-grey cards) — they fight each other.
- Choosing accent colours for aesthetics without checking accessibility contrast.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Build the palette on one hue family: cool grey neutrals with a blue accent. All decorative colour uses the same hue rotated slightly (analogous). Reserve complementary hues for semantic states only (error = red, success = green).