Pick a base colour — your logo colour, your favourite, anything — and get a complete 6-colour brand palette in seconds: primary, secondary and accent plus dark, light and neutral tones, each with its hex code, a contrast check, and ready-to-paste CSS variables. Everything runs in your browser; nothing you enter leaves your device.
Want the full palette report and CSS in your inbox, so you can hand it to your web designer? Leave your name and email.
Palettes are generated from your base colour using standard colour theory; the contrast badges follow WCAG ratios. Always check text legibility yourself on your real website before publishing — screens and print can differ.
Most small business websites pick colours by accident: the default blue from the theme, a red borrowed from a competitor, three shades that fight each other on the same page. Visitors notice, even if they can’t say why — the site just feels “off”, and “off” doesn’t get enquiries.
A proper brand palette is not about taste. It’s about roles. Every colour on your site should have a job: one colour leads (your primary), one or two support it (secondary), one grabs attention at the moments that matter (accent), and quiet tones handle backgrounds, text and borders. When each colour knows its job, the whole site looks deliberate — and deliberate looks trustworthy.
The generator above builds exactly that: a six-colour palette from any base colour you give it. Pick your logo colour, your favourite, or just one you like. The tool does the colour theory — complementary, analogous, triadic or monochrome schemes — and hands you hex codes, usage guidance, contrast checks and ready-to-paste CSS variables you can give to any web designer.
The simplest professional rule for applying a palette: 60% light backgrounds, 30% your brand colours, 10% accent. Most of the page stays calm and readable; your primary colour carries the structure (headers, buttons, links); the accent appears only where you want action — prices, “Book now”, limited offers. Because the accent is rare, it gets noticed. Sites that give every section its own bright colour just look noisy.
A hex code like #2e6bff is the standard way websites describe an exact colour. Six characters after the # define the red, green and blue mix. Give the hex codes to any designer or paste the CSS variables into your site and the colours will match exactly.
Six is plenty for a small business website: one primary, one or two supporting colours, one accent, plus dark, light and neutral tones for text and backgrounds. More than that and the site starts looking random.
It shows the contrast ratio between the swatch and text on top of it, following the WCAG accessibility standard. “AA” means body text is comfortably readable for most people. “Large text” means it’s fine for big headings. “Decorative only” means don’t put readable text on that colour — use it for backgrounds and shapes instead.
Yes — the hex codes convert cleanly to print colours in any design software. Just note that screens and printers render colour slightly differently, so proof anything critical before a big print run.
Yes. The tool, the CSS export and the downloads are all free, no account needed. If you’d like us to apply your new palette across a proper website redesign, that’s what the consultation below is for.
Like your new palette but your website doesn’t do it justice? We build websites where every colour earns its place.
Altus Web Solutions is the trading name for Noor 367 Ltd