Website color schemes: 13 palettes by business type

A website color scheme works best as one strong primary, a family of neutrals and one accent used sparingly. In 13 AI site and app plans, every palette had that shape, 11 used warm cream, sand or paper neutrals, and the primary followed the business: six teals, five of them by the water, two terracotta clays for ceramics.

Where the palettes come from

Each OneCraft plan includes a design direction, and one of its lines is the palette: a primary, neutrals, an accent and how surfaces use them. The table reads those lines from OneCraft’s development project on 21 October 2026, one plan per business and job type, the latest completed pipeline run: 11 websites and 2 apps. Colour names are the planner’s own words; several plans also gave the primary in OKLCH, such as a deep sea teal near lightness 0.38 to 0.42 and hue 200.

The caveats shape the result. n is 13. The briefs were written by the team, and many describe businesses on the coast, which explains the teals. None of the briefs gave brand colours, so the planner chose from place and mood. All ran on one environment, and the planner changed during the week.

The shape every palette shared

One primary. Buttons, links and one coloured band per page use it. Most plans named a deep shade, deep sea teal, deep sage, deep ink blue, which keeps white text on a primary button readable.

Neutrals that carry the page. 11 of 13 plans chose warm neutrals, cream, sand or paper, for backgrounds and cards. Only the running club and the cleaning staff app chose cool neutrals, both businesses selling energy or efficiency rather than calm.

One accent. Terracotta, coral, apricot, amber, wheat gold, sea blue or sage, used for small touches: a sticker badge, an icon, a progress bar. No plan named more than one.

Light surfaces with one strong band. Every plan described light surfaces, and several added a single dark or primary band per page, a teal band, a dark ink band, a dark crust band, to break the scroll and frame a call to action.

How the primary followed the business

• Mostly by the water, teal (6). Two Fremantle harbour yoga plans, a pilates studio by the harbour in Newcastle, a Noosa river kayak hire and a Geelong waterfront running club, pushed toward navy, plus a Brisbane dog hotel whose warm teal green is the one not tied to water.
• Calm and growing, green (3). A sage for a calm Fitzroy yoga studio, a leafy green for a cheerful dog walker, and a deep green for a cleaning company called Greenway.
• Made from earth, clay (2). Both ceramics businesses chose terracotta clay; their accents went back to the sea, sea blue and sea glass sage.
• Made in a kitchen, brown (1). A crust brown for the sourdough course, with wheat gold.
• Editorial, ink (1). A deep ink blue for a branding agency that wanted its site to read like a magazine.

Building your own scheme

1. Start from what you already have. A logo colour or shopfront colour becomes the primary. If you have none, take it from your place or product, as these plans did.
2. Pick warm or cool neutrals to match the mood: warm for calm, crafted and hospitable, cool for crisp, technical and fast.
3. Choose one accent with clear contrast to the primary, for small elements only.
4. Test contrast. Text must meet WCAG’s 4.5 to 1 against its background; accents rarely pass as text on white. See website accessibility basics.
5. Define dark mode as the same roles. A darker neutral family and a lighter primary, not a new palette. The dark mode website page shows the result.

These schemes become design tokens in the site’s code: shadcn/ui, which OneCraft websites are built with, reads them as CSS variables for background, foreground, primary, accent and the rest. What shadcn/ui is and what Tailwind CSS is explain how. For the theory of a palette, read what a colour palette is; for the fonts these plans paired with their colours, font pairings for websites; and to have a palette proposed from your own brief, the AI website builder. A web app manifest also carries a theme colour, so an installable site keeps the same primary.