Website Color Schemes: Choose Colours That Fit Your Brand
Website color schemes work when every colour has a job: a primary, a secondary, one loud accent and neutrals. Hold the proportions near sixty, thirty and ten, then check contrast against the WCAG threshold. Seed Light starts from the colour the business already owns.
Most web design color schemes fail for a thoroughly boring reason. Nobody ever decided what each colour in them was actually for.
You end up with six colours, no rule at all about where any of them go, and a fresh argument every single time a new section gets built.
Good website color schemes are built from roles rather than from taste. This guide covers the roles each colour plays, the proportions that keep a page calm, and the readability check that disqualifies a palette before anybody falls in love with it.
Key Takeaways
- Four roles, not six colours. Primary, secondary, accent, neutral.
- Neutrals do most of the work. Around sixty percent of the page.
- The accent appears rarely. Used twice, it stops meaning anything.
- Contrast is a published threshold. 4.5 to 1 on body text at level AA.
- Colour meaning is not fixed. Context and culture move it.
What Website Color Schemes Actually Are
A website color palette is a short set of colours with assigned jobs rather than a mood board, not a collection of shades you liked together.
The distinction shows the first time somebody builds a new page. A set of shades gives them nine options and no instruction, so every section becomes a fresh argument.
Website color schemes that work are almost always smaller than the ones that do not.
Four roles cover almost every site. The primary is the colour people associate with the brand.
The primary is the colour people associate with the brand. The secondary supports it without competing.
Hover and pressed states are worth deciding at the same time, since they are usually invented later by whoever builds the first button.
The accent is loud, rare, and reserved only for the thing you want clicked. The neutrals are your backgrounds and body text.
Give every colour a job and the design questions answer themselves. Nobody has to decide what colour a new section should be.
If you cannot name the job a colour does, the palette does not need it. That rule alone takes most sets down to four.
Why Colour Psychology Is a Weak Place to Start
Every colour guide opens with meanings. Blue for trust, green for calm, red for urgency.
The tidy version is wrong in a specific way. Colour has no fixed meaning, and the same shade reads differently depending on what it is attached to.
The research that does exist is narrower than the summaries suggest. Saturation and brightness change the signal as much as the hue does, so a washed out red and a vivid one are not the same message.
Green reads as organic on a food label, as safety on a dashboard and as money in banking. Culture moves it further again.
Industry convention is the stronger force in practice. Clinics, banks and law firms converge on similar palettes because customers expect it, and breaking that is a decision rather than an accident.
What does predict a response is fit. A palette that suits the business and the audience works, and one that contradicts them does not, whatever the colour chart says.
Competitor palettes are worth looking at for a different reason. Knowing the neighbourhood tells you what will read as familiar and what will read as new.
Use meanings as a tiebreaker between two workable options. They are a poor way to generate the options.
How to Choose Website Colors
Three steps, and the last one disqualifies more website color schemes than taste ever does.
1. Start from what you already own
Any brand colors website work starts from what exists rather than from a blank canvas.
You almost certainly have a primary colour already, in a logo or on a vehicle or a sign.
Start there rather than from a blank page, because brand colors website visitors already recognise are worth more than a better shade nobody has seen. A website that contradicts the van outside is a branding problem rather than a design one.
Then choose a neutral canvas. White, off white, a light grey, and a near black for text. Pure black is harsher on screen than most people expect.
Pick the near black deliberately as well. A very dark grey with a hint of the brand hue reads warmer than pure black and still passes contrast comfortably.
Add one secondary that sits beside the primary without fighting it, then one accent that is deliberately loud.
Two neutrals is usually enough for backgrounds, plus the text colour. A third tends to arrive because somebody needed a divider and reached for a new grey.
That is four decisions. Resist adding a fifth colour until a real page has failed without it.
2. Split the page roughly sixty, thirty, ten
The proportions matter more than the individual colours do, and this is the one design convention here worth following closely.
About sixty percent neutral. Backgrounds, body text, the quiet majority of every screen.
About thirty percent secondary. Section blocks, cards, panels and the quieter parts that organise a page into readable chunks.
About ten percent accent. Buttons and links, and nothing else.
Ten percent is far less than it sounds. On a long page it can mean two buttons and a handful of links, and that scarcity is the whole point.
The split also tells you where to put effort. If sixty percent of the page is neutral, the neutrals deserve more attention than the colour everybody argues about.
It is a guide rather than a measurement, and the useful part is the shape. Most struggling palettes are using the brand colour at sixty percent and wondering why the page feels loud.
3. Check it is readable before you commit
This is the step that disqualifies colours, so it belongs before the emotional investment rather than after.
WCAG success criterion 1.4.3 asks for a contrast ratio of at least 4.5 to 1 between text and its background, at level AA.
Large text gets 3 to 1, where large means at least 18 point or 14 point bold.
Logos are exempt from the requirement, so a brand colour that fails as body text can still appear in the mark itself without a problem.
The thresholds are exact and are not rounded, so a computed 4.499 to 1 fails.
Placeholder text, disabled buttons and form hints are the ones that get missed, because they are already the lowest contrast elements on any page.
Run every pairing you actually intend to ship. White on the primary, body text on each background, and the link colour on every surface it appears on.
Palette Fixes That Work Right Now
Five changes you can make to an existing site this week. None of these web design color schemes fixes needs a redesign.
- Count your accents. If there are three, you have none.
- Soften pure black. A near black reads better and still passes.
- Check your button pairing. Brand colours fail white text often.
- Measure your proportions. Screenshot a page and look at the balance.
- Name every colour by role. Primary outlives Forest Green.
Tools for Building a Palette
| Tool | What it settles |
|---|---|
| A contrast checker | Whether a text pairing meets the WCAG threshold, before it ships |
| A tint and shade generator | Lighter and darker steps of a colour you have already chosen |
| A colour blindness simulator | Whether two of your colours collapse into one for some readers |
| Design tokens in your build | Colour kept in one place, so changing it is an edit rather than a project |
A good website color palette survives all four of these checks rather than just the first.
The simulator is the one most people skip. Red and green used to mean different things can read identically, and nothing in a design file warns you.
Tokens are the one that saves the most time later. A palette kept in one place can be adjusted in an afternoon, and one hardcoded across a site cannot.
Generators expand a decision rather than make one. Feed them the colour you already own.
Common Colour Scheme Mistakes
- Too many colours. Every extra one is a decision on every page.
- Brand colour everywhere. At sixty percent it stops being a signal.
- Three competing accents. Nothing draws the eye any more.
- Checking contrast last. Found late, it forces a redesign.
- Starting from a meanings chart. Context moves the meaning anyway.
- Testing only on white. Dark sections change every answer.
FAQs
How many colours should a website use?
Four roles rather than four favourites. A primary, a secondary, one accent and a set of neutrals covers nearly every site. If you cannot name the job a colour performs on the page, the palette does not need to carry it at all.
What is the 60-30-10 rule?
A rough proportion for how much of a page each role occupies. Around sixty percent neutral for backgrounds and body text, thirty percent secondary for sections and cards, and ten percent accent for buttons and links. It is a guide rather than a measurement.
What contrast do website colours need?
WCAG success criterion 1.4.3 asks for at least 4.5 to 1 between text and background at level AA, and 3 to 1 for large text of 18 point or 14 point bold. The thresholds are exact, so a computed 4.499 to 1 fails rather than rounding.
Does colour psychology really work?
Not as a tidy set of rules. Colour has no fixed meaning, and context and culture change how the same shade reads. What predicts a response is whether the palette fits the brand and the audience, so treat meanings as a tiebreaker.
Should my website match my brand colours?
Start from them, because a site that contradicts your signage and vehicles creates confusion rather than interest. If a brand colour cannot carry white text, keep it and give the button role to something else rather than abandoning the colour.
Conclusion
Website color schemes get easy once every colour in them has a job to do, and website color schemes get difficult the moment one does not.
Start from the primary you already own, add a neutral canvas, one supporting colour and one loud accent.
Hold the proportions somewhere near sixty, thirty and ten across the page, then check every text pairing against the published threshold before anybody commits.
Leave the meanings chart until you are choosing between two options that already work.
Done in that order, the palette survives a rebrand, a dark mode and a new designer.
If you would rather hand it over, see how we approach web design.
