A theme can build its whole palette from one colour

I was picking a theme today and went digging through Duckquill’s Sass, expecting to find a big list of hardcoded colours. Instead I found this:

// light mode
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
// dark mode
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);

The background isn’t a colour you set. It’s your accent colour mixed into white or black with plain CSS. So setting one hex value in the config:

accent_color = "#e8a0bf"

gives me a soft pink-tinted off-white background for free, with no second variable and no fiddling to make them match.

That’s the trick behind why so many cozy-looking sites use a cream background instead of #ffffff. Pure white feels clinical. A warm off-white feels like paper. And color-mix() means you get it automatically without ever picking the cream by hand.

The other neat bit: the text colour is computed in oklch from the same accent, so contrast stays readable no matter what hue I pick. I can’t easily choose a colour that breaks the site.

Small thing, but it reframed how I think about theming. One input, whole palette.