Which Colors Should I Use for My Website and Why?

Choose website colours by deciding what each colour has to do before deciding what it should look like. A palette is a set of roles — background, body text, primary action, borders, error, success — and every role has a job and a contrast requirement. Pick the roles, satisfy the requirements, then make it attractive within what is left.

Doing it the other way round, starting from a mood board, is why so many sites end up with a beautiful palette that fails on a phone in daylight and has no colour left to make a button stand out.

Start with roles, not with colours

A working palette is smaller than most people expect. You need roughly this:

That is around a dozen values. Sites that struggle usually have either far more — a palette that grew by accident, where nothing reads as significant — or far fewer, typically two brand colours stretched across every job until the primary action colour is also the heading colour and the link colour, at which point nothing stands out.

The rule that matters most

Reserve one colour for the primary action and use it for nothing else. If your button colour also appears in headings, icons, decorative shapes and the footer, it has stopped meaning "click this". Scarcity is what makes a call to action visible, not saturation.

Contrast is a requirement, not a preference

This is the part most colour advice skips, and it is the part with actual rules.

WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal body text against its background, and 3:1 for large text — roughly 24px, or 19px bold and above.

Separately, non-text contrast requires 3:1 for interface components and meaningful graphics — button edges, form field borders, focus indicators, icons that carry meaning. This is the requirement most often missed, and it is why pale-grey form borders on white are a genuine accessibility failure rather than a stylistic choice.

Where sites fail in practice

• Light grey body text on white. Reads as refined on a calibrated monitor; unreadable on a phone outdoors.
• Placeholder text as a label. Placeholders are usually low contrast by default, and they vanish when typing starts.
• Text over photographs. Contrast varies across the image. Needs a scrim, an overlay, or a solid panel.
• Disabled states nobody can read. Disabled controls are exempt from contrast rules, which is not a reason to make them invisible.
• Focus indicators removed. Deleting the focus outline because it is "ugly" makes the site unusable by keyboard. Restyle it; never remove it.

Never let colour carry meaning alone

WCAG requires that colour is not the only means of conveying information. Around one in twelve men has some form of colour vision deficiency, most commonly red-green.

Practically: a red border on an invalid field needs accompanying text. A green tick needs a label. Chart series need labels, patterns or direct annotation rather than a colour-only legend. Links inside body text need something beyond colour — underlines remain the most reliable option, and removing them from in-content links is a persistent and avoidable mistake.

Building the palette

Start with the neutrals

Most of your site is neutral: backgrounds, text, borders. Getting these right does more for how a site feels than the brand colour does.

Pure grey tends to read as unconsidered. A neutral biased very slightly toward your brand hue — a warm grey with an orange brand, a cool grey with a blue one — makes the whole page feel intentional. The shift should be subtle enough that nobody notices it directly.

Build a ramp of five to seven neutrals from lightest surface to darkest text, and check that adjacent steps are distinguishable while the extremes clear 4.5:1.

Then the primary action colour

Choose it against two constraints: it must reach 4.5:1 with its own label text, and it must be visibly distinct from every neutral and from your status colours.

Avoid the trap of a primary colour that clashes with error red or success green — a red-orange primary next to a red error state makes both harder to read correctly. If your brand colour is close to a status colour, use a different shade for actions and keep the brand colour for brand moments.

Then status colours

Red, amber and green are conventional for error, warning and success, and convention is worth keeping because people already know it. Adjust the specific shades to sit comfortably with your palette, but do not get clever with the mapping — a site that uses purple for errors is being original at the user's expense.

Then, and only then, the accent

An accent is optional. Add one if the design genuinely needs an extra emphasis level; skip it if not. Most palettes that feel chaotic have two or three accents doing overlapping jobs.

Colour schemes that work

Three approaches account for most successful sites.

The consistent principle is unequal distribution. Roughly 60% dominant neutral, 30% secondary, 10% accent. Palettes fail when their colours are used in equal amounts, because nothing recedes and so nothing advances.

What colour psychology can and cannot tell you

Colour associations are real but far weaker and far more context-dependent than most articles on this topic imply. The often-repeated claims — blue means trust, red creates urgency, green means growth — come largely from marketing folklore rather than replicated research, and they vary substantially by culture, by individual, and by what surrounds the colour.

What is reasonably defensible:

• Context beats hue. Red means error in a form, sale in retail, and celebration at a wedding in much of Asia. The surrounding meaning dominates.
• Convention is real. Because red commonly signals errors on the web, using it for errors is genuinely easier to understand. That is learned convention, not innate psychology.
• Category expectations exist. Sectors develop visual norms. Meeting them signals belonging; breaking them signals difference. Either can be right — it is a positioning decision.
• Contrast beats colour choice. A button's visibility comes from standing out against its surroundings, not from being a particular hue.

Treat colour psychology as a tiebreaker between options that are already accessible and on-brand, never as the reason for a decision. Anyone promising a specific conversion lift from a button colour is selling something.

Dark mode is part of the palette now

Many people browse with a system-level dark preference, and a site that ignores it either looks jarring or, worse, half-inverts and becomes unreadable.

The important point: dark mode is not an inversion. Flipping every value produces harsh, glaring results. Design it as a second set of values for the same roles.

• Use a dark grey rather than pure black — around #12–#1A range. Pure black with white text produces uncomfortable halation.
• Reduce saturation. Colours that look right on white appear to glow on dark.
• Re-check every contrast ratio. Passing in light mode guarantees nothing in dark.
• Use elevation through lighter surfaces rather than shadows, which barely register on dark backgrounds.

Implement by defining colours as tokens — CSS custom properties — set once for light and redefined under prefers-color-scheme: dark. If a colour is hard-coded anywhere in your stylesheet rather than referenced through a token, that is the element that will break in the other mode.

Brand colours versus interface colours

A brand palette and a website palette are related but not identical, and conflating them causes real problems.

Brand colours are chosen for recognition across print, signage, packaging and screen. Interface colours are chosen to make a screen usable. A brand colour with poor contrast is perfectly acceptable on a billboard and unacceptable as body text.

The resolution is a tiered palette: brand colours used at brand moments — logo, key headings, large graphic areas — and a derived interface palette with accessible variants for text, actions and states. Most mature design systems hold both, with the interface values derived from the brand values rather than identical to them.

If your brand palette makes an accessible website genuinely impossible — two low-contrast pastels and nothing else — that is a brand problem rather than a web problem, and it is one of the more legitimate triggers for a rebrand.

A method you can follow

1. List the roles your site needs from the table above.
2. Build a neutral ramp, biased slightly toward your brand hue.
3. Choose one primary action colour and reserve it exclusively.
4. Add conventional status colours.
5. Check every text-on-background pair against 4.5:1, and large text against 3:1.
6. Check borders, focus rings and meaningful icons against 3:1.
7. Confirm nothing relies on colour alone to convey meaning.
8. Define a dark variant for every role and re-check all ratios.
9. Implement as tokens, never as hard-coded values.
10. Test on a real phone, outdoors, and on a cheap uncalibrated monitor.

Keep the finished palette documented somewhere the whole team can see — role, value, and what it is for. A palette that exists only inside one designer's file gets diverged from within the first month of anyone else touching the site.

Step ten catches more real problems than the previous nine combined. Designers work on good displays in controlled light; most visitors do not. The same reasoning applies to everything about reading a site on a phone.

Colour and imagery

Photography is part of your palette whether you plan it or not. A page with a carefully restrained set of colours and a stock photo full of unrelated saturated hues does not read as restrained.

Two practical measures. Establish rough rules for imagery — a consistent treatment, a tolerance for saturation, a preference for images with usable negative space — so photographs sit inside the palette rather than fighting it. And never place text directly over an unmodified photograph: contrast varies across the image, so what passes over the dark corner fails over the bright centre. Use a gradient scrim, a solid panel, or move the text out of the image entirely.

The same applies to illustrations, icons and charts. Anything that ships colour should draw from the defined tokens, or it becomes a second, undocumented palette.

How to test a palette

Checking contrast pair by pair in a browser tool is slow and easy to skip, which is why it usually is skipped. Build the check into the work instead.

• Contrast checking in the design tool. Most design software has plugins that report ratios as you work, which catches problems while they are still cheap to change.
• Browser DevTools. Chrome's element inspector shows the contrast ratio for any text node and flags failures directly in the colour picker.
• Automated audits. Lighthouse's accessibility section catches contrast failures across a page in one pass. It will not catch everything — meaning conveyed by colour alone needs human judgement — but it removes the mechanical work.
• Greyscale test. View the page desaturated. If the primary action stops being findable, it was relying on hue rather than contrast, and it will be weak for anyone with a colour vision deficiency.
• The daylight test. A real phone, outdoors, at half brightness. Nothing else exposes low-contrast text as quickly.

Run the greyscale and daylight tests before launch and after any palette change. They take minutes and consistently find things automated tools rate as passing.

Mistakes worth avoiding

Choosing the palette before the content. You cannot judge a palette without knowing how much text there is and what needs emphasis.

Too many colours with jobs that overlap. If two colours mean roughly the same thing, one of them is noise.

Using the brand colour for everything. Brand consistency is not the same as brand saturation.

Judging colour only on the largest screen. Colour relationships change when a full-bleed section becomes a small block on a phone.

Letting the palette grow without a decision. Most cluttered palettes were never designed — they accumulated, one campaign colour and one third-party widget at a time. Periodically audit what colours actually appear in your stylesheet against what you intended, and remove the ones no longer doing a job.

Low-contrast calls to action. A pale button on a pale background is the most expensive aesthetic decision available, and it shows up directly in landing page best practices as lost conversions.

Frequently asked questions

How many colours should a website use?

Around a dozen defined values covering roles rather than a count of "colours" — two or three surfaces, two or three text values, one primary action with its states, one or two borders, four status colours, and optionally one accent. Fewer roles than that and one colour ends up doing several jobs; many more and nothing reads as significant.

What contrast ratio do I need?

At least 4.5:1 for normal body text, 3:1 for large text (roughly 24px, or 19px bold), and 3:1 for interface components and meaningful graphics such as button edges, input borders and focus indicators. Those are WCAG 2.2 minimums, not targets to aim just above.

Is colour psychology real?

Weakly, and far less reliably than commonly claimed. Associations vary by culture, individual and context, and most of the specific claims circulated online trace to marketing folklore rather than replicated research. Learned web conventions — red for errors, green for success — are genuinely useful. Use psychology as a tiebreaker between accessible options, never as a reason.

Should my website use my exact brand colours?

Use them for brand moments, and derive accessible variants for text, buttons and states. Brand colours are selected for recognition across many media; interface colours must additionally meet contrast requirements on screen. A tiered palette holding both is the normal solution.

Do I need a dark mode?

If a meaningful share of your audience browses with a dark system preference, yes — and the cost is low if colours are defined as tokens from the start. Design it as a second set of values rather than inverting the light palette, and re-check every contrast ratio, because passing in one mode says nothing about the other.

Where to start

Take your current site and check three things: the contrast of your body text, the contrast of your form field borders, and whether your primary action colour appears anywhere it should not. Those three account for most of the practical damage a palette can do, and all three are fixable without a redesign.

If the palette is being rebuilt as part of a wider design project, that work sits inside our website design services — colour is decided alongside type and layout rather than chosen in isolation, because none of the three works independently.