Palette visualiser
See how a palette works on a real page. Change any colour, pick fonts for headings and text, and press Shuffle colours to give each colour a different job.
Brand studio
Colour that tells your story.
We help small brands find a look people remember, from the first sketch to the sign above the door.
Start a project See our work
Logos
Marks that work at any size, on any screen.
Learn more →Packaging
Boxes, bags and labels that stand out on the shelf.
Learn more →Websites
Fast, friendly sites that sound like you.
Learn more →120+
brands launched since 2015
The lightest colour becomes the background and the darkest the text; the other three are accents for buttons, cards and highlights. Text on each colour switches between black and white, whichever is easier to read. Check any pair in the contrast checker, or browse ready-made palettes.
Why preview a palette on a page?
Five swatches side by side don’t tell you much. A palette that looks great as stripes can fall apart on a website: the accent might be too loud for a button, or the text colour too light to read on the background. Seeing the colours in their real jobs, on navigation, headlines, buttons, cards and a footer, shows the problems before you build anything.
How the colours are used
The lightest colour becomes the page background and the darkest becomes the text, because that is what most websites need. The other three become accents: the first for buttons and the kicker, the second for the stats band and card edges, the third for card backgrounds. Press Shuffle colours to move every colour to a different job; sometimes a dark background with light text is the better look. Text on each colour switches between black and white automatically, whichever is easier to read.
Choosing fonts
Pick a heading font and a text font to see your palette with real typography. A classic pairing is a serif for headings with a clean sans serif for text. The website fonts page has pairing ideas and the code to add the fonts to your site.