Five colour palettes taken from paintings, and how visitors switch them

Look at the right-hand edge of this page. The small panel there changes the colours of the whole website: five palettes, light or dark, and three corner styles. Your choice is remembered on every page you visit next.

We built it for two reasons. It is a live demo of what a modern website can do, and it shows how we think about colour: not as a guess from a colour wheel, but as something taken from real artwork.

Where the colours come from

Each palette is named after a painting by our artist, Klaudia Polakowska:

• Dusk, our new default, comes from the violets of Violet Dusk, one of her watercolours.
• Leaf is our original organic green.
• Sunset takes the golds and ochres of Sunset on the beach, the watercolour in our homepage header.
• Sea borrows the slate blues of Lights and Shadows, a digital painting of storm clouds.
• Coral comes from the pink sky in the painting behind our closing section.

From each painting we picked one light, one mid and one deep shade. The mid shade fills buttons and highlights; the deep shade is used for text and focus rings, where contrast matters most. The page background and borders get a faint tint of the same colour, so the whole page feels painted in one light rather than having a coloured button dropped onto grey.

Contrast first, then beauty

A colour can look lovely and still fail people who have low vision or are reading on a phone in bright sunshine. Before any palette went live we checked it against the WCAG contrast guidelines:

• the deep accent on a white page measures at least 5.1 to 1 in every palette (the minimum for body text is 4.5 to 1),
• in dark mode the accent text on the dark page measures at least 9.5 to 1,
• dark text on the accent buttons measures at least 7.2 to 1.

So whichever palette a visitor picks, the site stays readable.

Dark mode and corners

Every palette has a dark version with its own tinted background, not just an inverted page. And because a brand is more than colour, the panel also switches the corners of buttons, tags and cards:

• Round pills, our standard look,
• Soft corners, a little more formal,
• Sharp corners with a hard offset shadow, for a bolder, print-like feel.

You can see all of them side by side in our playground.

Why it costs nothing in speed

All of this is a handful of CSS variables. A palette is about a dozen colour values; switching one changes those values, and the browser repaints. There are no extra stylesheets, no images and no flicker.

The choice is saved in your browser and applied by a tiny script in the page head, before anything is drawn. That matters: many sites with dark mode flash white for a moment before switching, which is uncomfortable at night. Ours never does.

What this means for your website

You might not want five palettes on your own site, but the same approach helps any business:

• Colours from your own world. Your products, your premises, your logo or a piece of art you love can become the palette.
• A dark mode that feels designed, not an afterthought.
• Seasonal or campaign themes that change the whole site with one setting.

If you would like a palette built from something that matters to your business, have a look at how we design websites or get in touch.