Colour is the single most immediate communicator of brand personality. Before anyone reads your headline, they've processed your colour choices. Yet most non-designers approach colour selection through a combination of personal preference and guesswork — which is why so many websites and brands look slightly off without anyone being able to say exactly why.
The good news: building a solid colour palette doesn't require a design degree. It requires understanding a handful of principles and having the right tools to extract, test, and apply colours systematically.
The 60-30-10 Rule: Your Starting Framework
The 60-30-10 rule is the most practical colour distribution framework for non-designers: 60% of your design uses your dominant colour (usually a neutral), 30% uses a secondary colour, and 10% uses your accent colour. This ratio creates visual balance without randomness. It works for web design, brand identity, interior design, and print.
The 4 Types of Colour Relationships
Monochromatic
One hue in multiple tints (lighter) and shades (darker). Safe, cohesive, but can feel flat without careful lightness variation. Best for minimal, sophisticated brands.
Complementary
Two colours directly opposite on the colour wheel (e.g. blue and orange). High contrast, energetic, attention-grabbing. Common in sports brands and calls-to-action. Use the secondary sparingly — it's a contrast tool, not a background.
Analogous
Three to five colours adjacent on the colour wheel (e.g. yellow, yellow-green, green). Harmonious and natural. Found frequently in nature photography and eco brands. Very easy to get wrong — desaturate one or two colours to prevent muddiness.
Triadic
Three colours equally spaced on the colour wheel (e.g. red, yellow, blue). Vibrant, balanced, harder to use. Works well when one colour dominates and the other two appear sparingly as accents.
Extracting Palettes From Reference Images
One of the most reliable methods for non-designers: find a photograph, illustration, or artwork whose mood matches what you want your brand to convey. Extract the dominant colours from that image. Nature photography is particularly effective — evolutionary colour harmony means naturally occurring colour combinations almost always work.
Accessibility: Colour Contrast Requirements
WCAG 2.1 requires a contrast ratio of at least 4.5:1 between text and background for normal text (AA standard), and 3:1 for large text. This isn't just a legal consideration for many projects — it's also a readability issue that affects conversion rates. Light grey text on white, or saturated colour-on-colour combinations, frequently fail these ratios and make content harder to read for everyone.
- Dark text on light backgrounds is safer than the reverse for body copy
- Saturated colours (e.g. bright red on bright blue) almost always fail contrast checks
- Add 20-30% luminance difference as a minimum rule of thumb before running a formal check
- Never rely on colour alone to communicate information — add text labels or patterns for colour-blind users
Building a Practical 5-Colour Palette
- Choose your primary brand colour — the one that represents your core personality
- Derive 2–3 tints of that colour (lighter versions) for backgrounds and hover states
- Choose a secondary colour for CTAs and highlights — ideally complementary or strongly contrasting
- Add a neutral (near-white for backgrounds, near-black for text)
- Optionally add a semantic colour for status (green for success, red for error)
Competitive Palette Analysis
Before finalising your palette, look at your 3–5 closest competitors. If every player in your industry uses blue, going teal or deep green immediately differentiates you at a glance. Palette extraction tools let you quickly audit competitor websites for their colour systems.