Website colour palette ideas taken from the business itself
The best source for a website's colours is usually something the business already owns: the paint on the shopfront, the product itself, the packaging, the uniform. Pull one strong colour from there for actions, build five quiet neutrals around it, and check every text pairing for contrast. Here's how, with examples.
Why palettes from generators look borrowed
Palette tools produce harmonious sets of five swatches, and harmony is not the hard part. The hard part is deciding what each colour is for. A palette of five equally loud colours gives you no way to signal what matters, so pages built from them end up with coloured headings, coloured cards and coloured buttons all competing. It also has no connection to the business, so a visitor who walks past the shop never sees the same colours online.
Starting from the business fixes both, which is why the website colour palette ideas below begin with a material rather than a swatch. It gives you one colour with a reason behind it, and it pushes the rest of the palette towards neutrals that let that colour do its job.
Where to look
- The shopfront or sign. Paint colours are chosen to be seen from across a street, which makes them good action colours.
- The product. Roasted coffee, glazed stoneware, a plant's leaves, a fabric swatch. Photograph it in daylight and sample the mid-tones, not the highlights.
- Packaging and print. Bags, boxes, menus, business cards. If customers already recognise them, reuse the colour.
- The place. A coastal town's sea and slate, a city brick, a valley's moss. Useful for neutrals as much as for accents.
- The logo, if it was designed with care. If it wasn't, don't let it dictate the whole site.
Give every colour a role
A working website palette has fewer colours than people expect, and each has a job. A useful set of roles:
- Ground
- The page background. Rarely pure white; a slightly warm or cool off-white feels more considered.
- Surface
- Cards, panels and form fields, one small step away from the ground.
- Text
- Near-black on light grounds, near-white on dark ones.
- Muted
- Secondary text such as captions and dates. This is the colour most likely to fail contrast, so check it first.
- Line
- Borders and dividers, often the text colour at low opacity.
- Action
- Buttons, links, focus outlines and selected states. Only things that respond to a click.
- On-action
- The text colour that sits on an action-coloured button.
The first five are neutrals tinted towards the action colour or the business's materials. That's the main difference between a palette that feels designed and one that feels assembled: the greys aren't neutral greys, they lean slightly warm or cool to agree with everything else.
Worked examples
| Business | Source | Ground and text | Action colour |
|---|---|---|---|
| Bakery | Flour, crust, a tomato-red awning | Warm cream ground, dark crust-brown text | The awning red, used only on order buttons |
| Coffee roaster | Roasted beans, kraft bags | Kraft-tinted off-white, near-black text | A deep green from the bag labels |
| Physiotherapy clinic | Treatment room, clinic signage | Cool white ground, graphite text | A calm blue or teal from the sign |
| Ceramics studio | Glazes, unglazed clay | Oatmeal ground, warm charcoal text | A single glaze colour, such as iron red or celadon |
| Florist | Stems, wrapping paper | Pale paper ground, deep leaf text | One flower colour that photographs well |
In each case the photographs carry most of the colour. The palette's job is to sit quietly behind them and make the one action colour easy to find. For the reasoning behind keeping that action colour for actions alone, see how to choose an accent colour.
Check the pairings
Before you settle, test four pairings: text on ground, muted text on ground, text on surface, and on-action text on the action colour. Body text needs a contrast ratio of at least 4.5:1 under WCAG 2.2 level AA, and buttons and borders that identify controls need 3:1 against what's around them. Warm, sampled colours often land just short, so you may need to darken the action colour a step for the light theme and lighten it for the dark one. Colour contrast for websites explains the thresholds in detail.
How Anticode's palettes are built
Each of Anticode's seven design systems ships with its own palette in exactly these roles, in a light and a dark version. Editorial, for instance, is ink on paper: a warm off-white ground, near-black text and a deep blue action colour. Technical is amber on graphite; Organic is sage and clay. You can switch the action colour to red, orange, gold, green, teal, blue, pink or black, and each has a lighter variant for dark themes.
If none of the eight matches your shopfront, you can tune individual colour tokens, such as the ground or the action colour, to your own values in the code editor (Pro mode), which keeps changes to the :root colour tokens. Anticode won't sample a palette from your logo or photographs for you, and once you've changed a colour by hand, checking its contrast is your job. The checks still run on whatever you end up with.
Questions people ask
How many colours should a website have?
One action colour plus five or six neutrals covers most sites. A second accent can work if it has a separate, clear job, such as a sale badge.
Should my website use my logo colours?
Use them if they were chosen with care and pass contrast. If the logo is bright or pale, use its colour for small accents and pick a deeper shade for buttons and links.
Is a white background a bad idea?
No, but a slightly tinted off-white often feels warmer and makes the surface colour easier to distinguish. Pure white with pure black text can feel harsh on screens.
Can I bring my brand colours to Anticode?
Yes. Pick the closest action colour or design system, then set individual colour tokens to your brand's values and check contrast.