Picking a palette: one primary, one accent, honest neutrals

Colour is where many small business websites go wrong, and usually not because someone chose ugly colours. The trouble is that they chose too many, or gave them no clear jobs. A logo blue, a seasonal orange, a green from the old brochure and a purple that came with a template all end up competing on the same page, and the result feels busy even when each colour is pleasant on its own.

A simple structure solves most of this: one primary colour, one accent colour, and a set of honest neutrals. It sounds restrictive. In practice it is freeing, because every colour decision has an obvious answer.

The three roles

The primary colour carries your identity

Your primary colour is the one people should associate with you. Often it comes from an existing logo or sign. It appears in key places: the header, headings or highlights, illustrations, perhaps a band of colour behind an important section.

What it should not do is appear everywhere. A primary used on every element stops being distinctive and starts being wallpaper.

The accent colour signals action

Your accent colour has one main job: to show people where to click or what to notice. It belongs on primary buttons, important links, active states and small highlights such as a "new" label.

The accent works because it is rare. If your booking button is the only thing on the page in a warm coral, the eye finds it immediately. If the same coral also appears in three decorative shapes and a heading, the button loses its pull.

The accent should contrast clearly with the primary. If your primary is a deep teal, an accent in a warm amber or coral stands apart. A slightly lighter teal does not.

Some sites use the primary colour for buttons and have no separate accent, which is perfectly fine when the primary is strong enough to stand out against everything else. The principle remains the same: one colour reserved for action.

Neutrals do most of the work

Neutrals are your greys, off-whites and near-blacks. They make up the background, body text, borders, dividers, secondary text and card surfaces. On a well-designed page, neutrals cover the large majority of the surface, and that is exactly what lets the primary and accent have impact.

Why "honest" neutrals

Pure grey, mixed from equal parts red, green and blue, can look cold and lifeless next to a coloured brand. Honest neutrals are greys with a very slight tint taken from your primary colour, so they feel related to it.

For a brand with a deep green primary, the background might be a white with the faintest hint of green, the borders a light grey that leans slightly green, and the body text a very dark grey with a touch of the same hue. Nobody looking at the page would call these colours green. They would simply sense that the page holds together.

For a warm brand, such as one built around terracotta, the neutrals can lean slightly warm: cream instead of stark white, and warm charcoal instead of cool grey.

A practical tip: avoid pure black for body text on a white background. A very dark grey is gentler on the eyes over long passages, while still giving strong contrast.

Building the palette step by step

1. Start with your primary. If you have a logo colour, begin there. If not, pick a hue that suits the mood of your business: calm, energetic, earthy, crisp.
2. Check it works as a colour on screen. Logo colours chosen for print sometimes look dull or garish on a screen. You may need a slightly adjusted web version.
3. Create a few shades of the primary. A darker shade for hover states and text on light backgrounds, a lighter tint for subtle backgrounds. Three to five steps is plenty.
4. Choose an accent. Look for a hue that clearly differs from the primary. Opposites or near-opposites on the colour wheel are a reliable starting point. Make one or two shades for hover and pressed states.
5. Build the neutrals. Aim for roughly six to ten steps from near-white to near-black, all slightly tinted towards your primary.
6. Add functional colours only if needed. Forms usually need a red for errors and perhaps a green for success. Keep these for their functional purpose so they keep their meaning.

Assigning colours to jobs

Once you have the palette, write down where each colour goes. This is the part most people skip, and it is what keeps a site consistent over time.

• Page background: lightest neutral.
• Card or panel background: white or the next neutral step.
• Body text: darkest neutral.
• Secondary text (captions, dates): a mid-dark neutral that still reads clearly.
• Borders and dividers: a light neutral.
• Headings: darkest neutral, or the deepest shade of the primary.
• Primary buttons and key links: accent.
• Secondary buttons: outlined in the primary or a dark neutral.
• Brand moments (header band, feature section background): primary.

Example in words

Picture a small yoga studio. The primary is a muted sage green taken from its existing sign. The accent is a soft but clear terracotta. The neutrals lean slightly warm: an off-white background, light stone-coloured borders and a warm charcoal for text.

On the home page, a wide band of sage sits behind the opening section. Headings are charcoal. The single "Book a class" button is terracotta, and it is the only terracotta on the screen. Timetable cards sit on white with stone borders. The effect is calm and coherent, and the one action that matters is impossible to miss.

Mistakes to avoid

• Using the accent decoratively. Every decorative use weakens its signal.
• Too many brand colours. If your existing brand has five colours, choose one to lead on the website and keep the others for occasional use.
• Forgetting contrast. A beautiful pale primary may not work as a text colour or button background. Check contrast before committing.
• Untinted greys. Default greys can make a warm brand feel clinical.
• Colour as the only signal. Do not rely on colour alone to convey meaning; pair it with text, icons or shape so everyone can understand it.

Your palette checklist

• One primary colour, with three to five shades.
• One accent colour reserved mainly for actions.
• Six to ten neutrals, gently tinted towards the primary.
• Functional colours for errors and success, used only for those purposes.
• A written list of which colour does which job.
• Contrast checked for text and buttons.

A restrained palette does not make a site dull. It makes every colour choice mean something, and that is what lets a small business look confident.