Colour is one of the first things visitors notice about a website, and it shapes how they feel about your brand before they read a single word. A thoughtful colour scheme looks professional and stays readable; a careless one feels amateurish and can even make your content inaccessible. This guide shows you how to choose colours with confidence.
Why Colour Matters in Web Design
Colour does more than decorate — it communicates. It sets mood, signals personality, guides attention and reinforces brand identity. Blues feel trustworthy and calm; warm reds and oranges feel energetic; greens suggest growth and nature. The colours you choose send a message before your visitor consciously processes anything else on the page.
Start With Colour Theory Basics
You don't need a design degree, just a few foundational ideas. The colour wheel organises hues and reveals relationships that naturally look good together:
- Complementary — opposite colours (like blue and orange) create high contrast and energy.
- Analogous — neighbours on the wheel (like blue, teal and green) feel harmonious and calm.
- Monochromatic — shades of a single colour look clean and cohesive.
- Triadic — three evenly spaced colours balance variety with harmony.
The 60-30-10 Rule
A reliable formula for balanced design is 60-30-10: roughly 60% of your design uses a dominant (usually neutral) colour, 30% a secondary colour, and 10% an accent for calls to action and highlights. This proportion keeps a palette from feeling chaotic and ensures your most important elements — like buttons — stand out exactly where you want them to.
Choose a Practical Palette
Most effective websites use a small, disciplined palette: one or two primary brand colours, a couple of neutrals (often shades of grey for text and backgrounds), and one accent colour for action elements. Resist the urge to use many colours — restraint almost always looks more professional. To pick exact shades and grab their hex codes, use our free Color Picker.
Don't Forget Backgrounds and Gradients
Backgrounds set the stage for everything else. Subtle gradients have become a popular way to add depth without clutter. If you want to experiment, our CSS Gradient Generator lets you create smooth gradients and copies the ready-to-use CSS, so you can drop them straight into your site.
Accessibility: The Step Most People Skip
A beautiful palette is worthless if people can't read your text. Colour contrast between text and its background is essential for readability — and for users with visual impairments, it's the difference between usable and unusable. Light grey text on a white background might look elegant to you but be invisible to many visitors. Always check your combinations with our Color Contrast Checker, which tells you whether your colours meet accessibility standards.
Test Your Colours in Context
Colours behave differently depending on what surrounds them and how much area they cover. A shade that looks great as a small swatch can feel overwhelming as a full background. Before committing, apply your palette to a real mock-up — headers, body text, buttons and links — and view it on both desktop and mobile screens. What matters is how the scheme works together, not how each colour looks alone.
Common Colour Mistakes
- Too many colours competing for attention.
- Poor contrast that hurts readability and accessibility.
- Pure black on pure white, which can feel harsh — slightly softened tones are easier on the eyes.
- Ignoring brand consistency, so the site doesn't match your logo or other materials.
- Trend-chasing at the expense of timeless readability.
Final Thoughts
A great website colour scheme balances personality with clarity. Start with simple colour theory, follow the 60-30-10 rule, keep your palette small, and never sacrifice readability for style. Build and refine your palette with our free Color Picker and CSS Gradient Generator, then confirm it's accessible with the Color Contrast Checker — and your design will look polished and work for everyone.