Colour is the first thing users feel and the last thing designers should improvise. The right palette builds trust, guides attention and passes accessibility standards; the wrong one makes even brilliant functionality look amateur. This guide covers the harmony rules, the famous 60-30-10 split, and the contrast numbers your text must hit.
1. Why Colour Decisions Are Business Decisions
Users form an impression of a website in about 50 milliseconds — before reading a single word — and colour drives most of that judgement. Consistent, harmonious colour signals competence; clashing, arbitrary colour signals carelessness. Colour also steers behaviour: the eye lands on the highest-contrast element first, which is why your call-to-action button should hold the palette's most distinctive hue. In interface design, colour is not decoration — it is navigation.
2. Colour Harmony: Four Schemes That Always Work
- Monochromatic: Variations of one hue in different tints and shades. Foolproof and calm — ideal for dashboards and productivity tools.
- Analogous: Three neighbours on the colour wheel (blue, blue-violet, violet). Naturally cohesive, low tension, common in wellness and finance brands.
- Complementary: Opposites on the wheel (blue and orange). High energy and strong contrast — use the secondary colour sparingly for accents and CTAs.
- Triadic: Three evenly spaced hues. Vibrant but risky; let one dominate and demote the other two to supporting roles.
"A palette is a hierarchy, not a rainbow: one colour leads, a few support, and everything else politely stays neutral."
3. The 60-30-10 Rule: Structure Beats Taste
Interior designers gave interface designers a gift: allocate roughly 60% of the visual field to a dominant neutral (your background), 30% to a secondary brand colour (cards, navigation, illustrations), and 10% to an accent reserved for actions (buttons, links, highlights). The ratio works because it mirrors how we process any scene — mostly calm context with a few points of deliberate focus. Palettes fail when every element competes at accent volume; if everything shouts, nothing is heard.
4. Accessibility: Contrast Is Law, Not Preference
WCAG 2.1 sets hard minimums: normal text needs a contrast ratio of at least 4.5:1 against its background, large text 3:1, and interactive elements should remain clearly distinguishable. Around 300 million people live with some form of colour-vision deficiency, so never encode meaning in colour alone — pair error red with an icon, success green with a tick. The good news: accessible palettes often convert better for everyone, because high-contrast interfaces are simply easier to use. Test every combination with the built-in WCAG checker in our colour palette generator before committing.
5. Building a Dark-Mode Palette (the Trap Most Designers Miss)
Dark mode is not inverted light mode. Pure black backgrounds create harsh halation around white text; rich dark greys (#0d1117 territory) are kinder. Saturated accent colours that look perfect on white often vibrate painfully on dark surfaces — desaturate them by 10–20%. Shadows nearly disappear on dark themes, so elevation is communicated with lighter surface tints instead. And re-run every contrast check: ratios that passed on light mode fail constantly after inversion. Glass effects behave differently too — our glassmorphism guide covers translucent surfaces on dark backgrounds in detail.
6. From Palette to System: Design Tokens
A palette becomes professional when it becomes a system. Instead of scattering hex codes through your CSS, define tokens once — --color-primary, --color-surface, --color-accent — and reference them everywhere. One edit then rethemes the entire site, dark mode becomes a swap of token values, and no page drifts off-brand. Teams that skip tokens end up with forty near-identical greys and a redesign cycle that never ends. Start tokens on day one; future you will be grateful.
7. Build Your Palette in Minutes
Open the Colour Palette Generator, pick a base hue and harmony scheme, and get a complete, contrast-checked palette with hex codes ready to paste into your CSS. It runs entirely in your browser. Then apply the palette to real components: frosted cards with the glassmorphism generator, organic backgrounds with the blob generator, and depth with the box shadow tool.
Frequently Asked Questions
Q: How many colours should a website palette have?
Five to seven functional colours is plenty: a background neutral, a surface tint, a primary brand colour, a secondary, an accent for actions, plus semantic colours (success, warning, error). More colours usually means less consistency.
Q: What contrast ratio do I need for accessibility?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA raises that to 7:1. Check every text/background pair — guessing is how sites end up unreadable.
Q: Is pure black (#000000) a good background for dark mode?
Usually not. Pure black creates harsh contrast and visible halation around light text. Very dark greys like #0d1117 or #121212 feel softer and are the standard across major design systems.
Q: How do I choose a call-to-action colour?
Pick the hue in your palette most distant from the background and surrounding elements — often the complementary colour. The CTA should be the single highest-attention element on the page, used nowhere else.