How to Use This Tool
Enter your brand colours using the six role-based inputs: primary, secondary, accent, background, text, and muted. The preview updates instantly. Switch between four website templates to see how your palette works in different contexts — a service business layout, a professional services layout, a creative portfolio, and a landing page.
Coming from the Brand Colour Extractor or Palette Generator? Your colours are pre-loaded automatically via the URL.
Why Previewing Your Palette Matters
Colours that look great as swatches don't always work on a real website. A vibrant accent might overwhelm body text. A subtle secondary might disappear against your background. This tool shows you how your palette performs in context — with headings, buttons, cards, and calls to action — so you can catch issues before you commit to a design.