Currently accepting new projects
Website Colour Schemes: How to Pick Colours That Sell
A good website color scheme does three jobs: it makes your business recognisable, it makes text easy to read on a phone in sunlight, and it makes the one button you care about impossible to miss. Here is a simple way to pick colours, with ready palettes by business type and the contrast rules that keep them readable.
What a colour scheme actually has to do
The short answer: Pick one main brand colour, one neutral for backgrounds and text, and one accent used only for buttons and key highlights, roughly in a 60-30-10 split. Choose colours that suit your industry and customers, then check every text and button pair against WCAG contrast: at least 4.5:1 for normal text and 3:1 for large text and buttons.
Colour is not decoration. On a business website it carries information: what is clickable, what is important, what is a warning and what is just background. When colours are picked only because they "look nice", that information gets lost.
Readability
Text must stand out clearly from its background, on cheap phone screens and in bright daylight, not just on a designer's monitor.
Recognition
Customers should connect the colours with your shop board, packaging, visiting card and WhatsApp profile.
Action
One accent colour, saved for buttons and calls to action, tells visitors exactly where to tap.
Mood
Colours set expectations. A clinic, a sweet shop and a law firm should not feel the same.
The 60-30-10 rule, made simple
The easiest way to keep a site calm and clear is to limit how much of each colour you use. Designers often borrow the 60-30-10 idea from interior design:
- 60% neutral
Backgrounds and large areas. Usually white, off-white or a very light tint of your brand colour. This is what keeps pages easy on the eye.
- 30% brand colour
Headers, footers, section backgrounds, icons and headings. This is the colour people remember.
- 10% accent
Buttons, links, badges and the one number you want noticed. If everything uses the accent, nothing stands out.
- Plus one dark text colour
A near-black or deep shade of your brand colour for body text. Pure grey on white is a common mistake: light greys often fail contrast checks.
The split is a guide, not a law. What matters is that the accent stays rare enough to mean "tap here".
Colour palettes by business type
Here are starting palettes we would consider for common Indian small businesses. Each lists background, brand, accent and text colours. The pairs used for text and buttons have been checked for contrast; decorative colours are marked where they should not carry text.
Teal feels clean and calm. White text on the teal passes for buttons; use the amber only for small highlights with dark text on it.
#F0FDFA · #0F766E · #F59E0B · #134E4AWarm red and mustard suit food brands well. A deep red like #B91C1C carries white text comfortably; bright pure red does not.
#FFF7ED · #B91C1C · #F59E0B · #1C1917Navy reads as steady and trustworthy. Keep the gold decorative (lines, icons); it is too light for small white text.
#F8FAFC · #1E3A5F · #B8860B · #475569Plum and blush feel premium without being loud. Use plum for buttons; the rose tone works for large headings and borders.
#FCE7F3 · #6B2E5F · #B76E79 · #2D1B2ECharcoal with a burnt safety orange feels practical and confident. The darker orange keeps white button text readable.
#F3F4F6 · #1F2937 · #C2410C · #111827Deep green, ivory and brass suit traditional brands. Put ivory text on the green; use brass for accents, not body text.
#FAF7F0 · #1F3B2D · #B08D57 · #1C1917Start from your logo if you have one. Pull the main colour from it, then adjust the shade until text and buttons pass contrast, rather than forcing the exact logo colour everywhere.
Contrast and accessibility: the rules that matter
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background. Ratios run from 1:1 (no difference) to 21:1 (black on white). The W3C guidance on contrast sets these levels for AA, the standard most sites aim for:
These are not just for people with low vision. Good contrast helps everyone reading on a budget phone, at low brightness, or outdoors. Here is how some common pairs measure up:
| Text on background | Ratio | Normal text (4.5:1) |
|---|---|---|
| White on deep red #B91C1C | 6.5:1 | Pass |
| White on pure red #FF0000 | 4.0:1 | Fail (large text only) |
| White on teal #0F766E | 5.5:1 | Pass |
| White on bright orange #EA580C | 3.6:1 | Fail (large text only) |
| White on amber #F59E0B | 2.2:1 | Fail |
| Near-black #1C1917 on amber #F59E0B | 8.1:1 | Pass |
| Grey #999999 on white | 2.9:1 | Fail |
| Grey #767676 on white | 4.5:1 | Pass (just) |
Do not rely on colour alone to carry meaning. A red border on a form field should come with a message like "Enter a valid phone number", because some visitors cannot tell red from green.
Check any pair below before you commit to it. The accessibility section of a Google PageSpeed Insights report will also flag low-contrast text on a live site.
Try it: check your own colours
Pick colours or paste hex codes from your brand guide.
Book a free site visit
This is how a paragraph of body text reads in these colours on a phone screen.
Call nowRed, orange and other "risky" colours
You will read advice that certain colours are bad for websites. Usually the colour is not the problem; the context and the contrast are. Red is a good example:
- Sale badges, discount tags and limited-time offers
- Food, sweets and restaurant brands
- Error messages and required-field markers
- A strong brand colour when used in a deep, readable shade
- Bright red sits behind small white text
- It is both the brand colour and the error colour, so errors get missed
- Every heading, button and badge is red, so nothing stands out
- Red and green are the only way to tell two states apart
The same thinking applies to yellow, which is great as a background for dark text and poor as a text colour on white, and to neon greens and pinks, which can work for youth brands in small doses.
How to pick your scheme in five steps
From logo to finished palette
Test on an actual Android phone and an iPhone, outdoors if you can. Screens vary far more than people expect.
I once paid a hefty amount for a template-based website, and the developer had no real sense of UI or colour. It broke on Android and iPhone too. Since then I treat colour as part of usability, and I check every palette on real phones before a site goes live.
Nitish, founder of Biz HoistColour is one part of a wider look. For layout and section ideas, see our website design ideas for small businesses, and for budgeting the whole build, website design cost in India.
Frequently asked questions
How many colours should a website color scheme have?
Usually three to five: one neutral for backgrounds, one dark text colour, one main brand colour, one accent for buttons, and sometimes a second light tint. More than that tends to look messy and makes the important buttons harder to spot.
What is the best colour for a website button?
There is no single best colour. The best button colour is one that contrasts clearly with the page, is not used for much else, and has text on it that meets at least 4.5:1 contrast, or 3:1 if the label is large and bold.
Is red a bad colour for a business website?
No. Red suits sale badges, urgency, food brands and many logos. Problems come from poor contrast, such as small white text on bright red, or from using red so widely that nothing stands out. A deeper red usually solves the contrast issue.
What contrast ratio does WCAG require?
For WCAG level AA, normal text needs at least 4.5:1 contrast against its background and large text (18pt, or 14pt bold) needs at least 3:1. Buttons, icons and form borders also need at least 3:1 against what surrounds them.
Should my website colours match my logo?
They should feel related, so customers recognise you, but they do not have to be identical. It is normal to darken or lighten a logo colour for buttons and text so it stays readable.
Do colours affect SEO?
Not directly. But poor contrast is flagged in accessibility audits such as PageSpeed Insights, and hard-to-read pages make visitors leave sooner, which hurts enquiries even if rankings hold.
Want a colour scheme that is readable and on-brand?
Send us your logo or a few sites you like and we will suggest a palette, check every pair for contrast, and give you a fixed quote within one business day for the build. See how we work on our website development page.
Get a fixed quoteWebsite development
Only to see which pages help and which don’t. Nothing is sold, nothing is used for advertising, and declining changes nothing about how the site works. More in our privacy policy.