A website colour scheme is a short list of decisions: one base colour, one accent, a set of neutrals and a few status colours. Most sites that look "off" have too many colours doing the same job, or an accent that appears everywhere and so means nothing. The method below keeps the theory to what changes the result on screen, and it is the same one our designers in Islamabad use when a client arrives with a logo and nothing else.
What makes a good website colour scheme?
A good website colour scheme is one where every colour has a job and the visitor can tell, without thinking, what is a heading, what is body text and what can be clicked. Prettiness comes second. A scheme passes that test when it has:
- A dominant neutral for backgrounds (white, off-white, or a very dark grey for dark sites).
- One base or primary colour that carries the brand: header, headings, key sections.
- One accent colour kept for actions, so it reads as "click here" wherever it appears.
- Text colours with enough contrast to read comfortably on a phone in daylight.
- Status colours for success, warning and error that do not clash with the accent.
If you can describe your scheme in that shape, it will work. If you need more than two hues before you reach the neutrals, it usually will not.
Warm, cool and neutral colours on a website
Warm colours (red, orange, yellow) feel active and pull the eye forward, which is why they suit buttons, offers and food brands. Cool colours (blue, green, purple) feel calmer and recede, which is why so many finance, health and technology sites lean on blue. Neutrals (white, greys, black, beige) carry the structure and should cover most of the screen.
The useful pattern is a cool or neutral base with one warm accent, or the reverse. This site is an example: white backgrounds, navy (#233269) for the header, headings and links, and orange (#f04b05) for buttons. The contrast in temperature is what makes the buttons stand out, not their size.
How to choose a website colour scheme in five steps
1. Choose the base colour
Start from the brand. If you already have a logo colour, that is your base. If you do not, decide what the business should feel like before you open a palette tool; our guide on whether brand colour matters and how to choose it covers that decision. Then look at three or four competitors and avoid landing on the exact blue they all use.
2. Build tints and shades
From the base, generate a scale of lighter and darker steps, typically from a near-white tint to a near-black shade. Light tints become section backgrounds and hover states; dark shades become text, borders and footer backgrounds. One hue with around ten steps covers most of a site. Tailwind's default palette is a good model of what a usable scale looks like, and the online colour tools list covers generators that build one for you.
3. Pick one accent for actions
Choose a colour that clearly differs from the base, often its complement or a warmer neighbour. Use it for primary buttons, active states and perhaps links, and nowhere decorative. If the accent also appears in icons, dividers and illustrations, visitors stop reading it as a signal.
4. Set the neutrals and status colours
Pick a background, a slightly darker surface for cards and alternate sections, a border grey, and two or three text colours (main, muted, faint). Pure black text on pure white is harsh on large screens; a near-black with a hint of your base hue looks finished. Add green, amber and red for success, warning and error, adjusted so they sit comfortably beside your accent.
5. Test it on real pages
Apply the scheme to a home page, a long text page and a form before signing it off. Colours that look balanced as swatches often look heavy across a full-width header, and muted greys that look elegant in a palette can be unreadable as form labels. Check it on a phone outdoors, too.
What is the 60-30-10 rule in web design?
The 60-30-10 rule is a proportion guide borrowed from interior design: about 60% of what the visitor sees is the dominant neutral, 30% is the primary colour and its tints, and 10% is the accent. It is a starting point, not a measurement, but it stops the two most common problems: a primary colour flooding every section, and an accent so frequent it loses its pull.
| Share | Role | Where it appears |
|---|---|---|
| About 60% | Dominant neutral | Page background, cards, large content areas |
| About 30% | Primary and its tints | Header, footer, headings, section bands, links |
| About 10% | Accent | Primary buttons, active tabs, key highlights |
On content-heavy sites such as blogs and documentation, the neutral share goes higher still. On a landing page for a single offer, the primary can take more room, as long as the accent stays rare.
Which colour harmony works best for websites?
Colour harmonies describe how hues relate on the colour wheel. All of them can work; some are easier to keep under control on a screen full of text.
| Harmony | What it is | On a website |
|---|---|---|
| Monochromatic | Tints and shades of one hue | Calm and easy to get right; needs a contrasting accent for buttons |
| Analogous | Neighbouring hues, such as blue and teal | Harmonious; risk is low contrast between elements |
| Complementary | Opposite hues, such as navy and orange | Strong button contrast; keep one side dominant |
| Split complementary | One hue plus the two beside its complement | More variety than complementary, still balanced |
| Triadic | Three evenly spaced hues | Playful; hard to manage across many pages |
For most business sites, a monochromatic base with a complementary accent is the safest choice: one hue does the structure, the opposite hue does the actions.
Colour contrast: making the scheme readable
Contrast is where most attractive schemes fail. The Web Content Accessibility Guidelines (WCAG 2.2) set three rules worth designing to from the start:
- Normal body text needs a contrast ratio of at least 4.5:1 against its background (criterion 1.4.3).
- Large text (24px regular, or about 18.7px bold) and interface parts such as input borders and icons need at least 3:1 (criteria 1.4.3 and 1.4.11).
- Colour must not be the only way information is shown: an error field needs a message or icon, not just a red border (criterion 1.4.1).
Our own orange shows why you check every pairing. White text on #f04b05 measures 3.68:1, fine for a large bold button label but below 4.5:1 for small text. A deeper step of the same orange, #cf3f02, reaches 4.81:1. Many brand colours behave like this: use the brand colour for surfaces and large text, and a darker shade of it for anything small.
Website colour scheme examples by business type
There is no correct colour for an industry, and copying the category leader makes you look like them. These are common starting points our designers discuss with clients, not rules.
| Business | Common base | Accent that works | Watch out for |
|---|---|---|---|
| Law, finance, consultancy | Navy or deep green | Gold, warm orange | Looking identical to every bank |
| Healthcare and clinics | Soft blue or teal | Coral or green | Clinical coldness; add warm photography |
| Restaurants and food | Warm neutral or charcoal | Red, orange, mustard | Too much red tiring the eye |
| Construction and trades | Charcoal or dark blue | Safety yellow or orange | Yellow text on white (fails contrast) |
| Fashion and beauty | Black, white, beige | One muted brand tone | Low-contrast grey text |
| Software and SaaS | White with a blue or violet primary | A bright contrasting accent | Generic gradients that look like every other startup |
Real examples help more than tables. Our WooCommerce build for Frankfurter Kaffeerösterei and the Bear Cave pet store show a brand palette carried across a full online store, from product grids to checkout. For how large brands settle their palettes, see the brand colours of five well-known companies.
Do you need a dark mode colour scheme?
Most visitors now have a dark setting on their phone, but a dark version of your site is optional. If you build one, do not simply invert the palette. Use a very dark grey rather than pure black for the background, lighten the primary so it still passes contrast, and reduce saturation on large coloured areas, which glow on dark screens. Test both versions against the same contrast rules.
Common website colour mistakes
- Using the accent colour decoratively, so buttons no longer stand out.
- Light grey body text that looks refined on a designer's monitor and is unreadable on a budget phone.
- Text over photos with no overlay, so contrast changes with every image.
- A different blue on every page because colours were picked by eye rather than from a defined set.
- Red and green as the only difference between two states, which colour-blind visitors cannot tell apart.
- Choosing the scheme before the photography, then finding the two fight each other.
If several of these sound familiar, the wider checklist in UI design mistakes to stop making is worth a read too.
Turn the scheme into design tokens
Once the scheme is agreed, name each colour by its role (background, surface, primary, accent, text, muted, border, success, error) and define it once, as variables in Figma and as CSS custom properties or Tailwind theme values in code. A later rebrand then becomes a handful of edits instead of a hunt through every page, and designers and developers stop debating which of three similar hex codes is the real one.
Sources
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2, success criteria 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast (w3.org/TR/WCAG22)
- Contrast ratios for the godesign.pk palette calculated with the WCAG relative luminance formula
Common questions
- How many colours should a website use?
- One primary colour, one accent and a set of neutrals for backgrounds, borders and text, plus green, amber and red for status messages. Each of those can have lighter and darker steps. Sites that use more than two or three distinct hues usually look unplanned.
- What is the 60-30-10 rule in web design?
- It is a proportion guide: about 60% of the screen in a dominant neutral, 30% in the primary colour and its tints, and 10% in an accent kept for actions. It keeps pages calm and makes calls to action easy to spot. Treat the numbers as a guide rather than a measurement.
- Should the button colour be the brand colour?
- Only if it contrasts strongly with the rest of the page and passes contrast with its label text. Often the brand colour works better as the primary for headers and headings, with a contrasting accent used for buttons.
- What is the best background colour for a website?
- For most business sites, white or a very light off-white, because it keeps text contrast high and lets photography carry colour. Light tints of the brand colour work well for alternating sections. Dark backgrounds suit some creative and technology brands but need more care with text contrast.
- How do I choose website colours if I have no brand colours yet?
- Decide on the brand colours first, because the website is where they will be seen most. Choose a base that fits how the business should feel, check it against competitors, then add a contrasting accent and neutrals. A palette generator can help once you have the base.
- What contrast ratio does website text need?
- WCAG 2.2 asks for at least 4.5:1 for normal body text and 3:1 for large text and interface elements such as input borders and icons. A free contrast checker will measure any pair of colours. Check muted greys and text on coloured buttons, as these fail most often.
- Do I need a dark mode version of my website?
- No, it is optional for most business sites. If you add one, use a dark grey background rather than pure black, lighten the brand colours so they still pass contrast, and test both versions properly rather than inverting the palette.
