Discovering Alternative CSS Colour Palettes: A Practical Guide

After moving away from Tailwind CSS to write vanilla CSS, I found myself missing its thoughtfully curated colour palette. As someone who isn’t naturally colour-savvy, having a pre-made set of harmonious shades made a huge difference. So I reached out on Mastodon for recommendations, and the community delivered. This guide compiles the best colour palettes, generators, and tools I discovered, along with insights for developers seeking accessible and beautiful colour systems.

Why did you switch from Tailwind to vanilla CSS?

I decided to ditch Tailwind for new projects because I wanted more control over my styles and less reliance on a utility-first framework. The simplicity of writing plain CSS appealed to me, but I quickly missed Tailwind’s colour palette. Being able to grab blue-100 for a light blue or blue-200 for a slightly darker shade was incredibly convenient. Without that, I felt lost—my colour intuition isn’t great, and having a pre-designed palette saved me time and effort. The switch also made me appreciate how much Tailwind’s colours had become a crutch. So I went hunting for alternatives that could fill that gap while letting me stay framework-free.

Which colour palettes are your personal favourites?

Three palettes stood out as my top picks. First, uchū offers a vibrant, modern set of colours with a thoughtful FAQ (CSS file available). Flexoki provides rich, warm tones that feel natural and cohesive. And Reasonable Colours focuses heavily on accessibility, ensuring good contrast ratios right out of the box (CSS file linked below). Each of these palettes was designed by someone with a keen eye for colour appeal, making them easy to drop into any project without second-guessing every shade.

What other colour palettes are recommended?

Beyond my favourites, several other palettes caught attention. Web Awesome provides a comprehensive set of CSS colour variables. Radix UI offers a systematic, step-based colour scale perfect for interfaces. The US Web Design System (USWDS) is a government-grade palette with accessibility baked in. And Material Design gives a familiar, well-documented palette that works across many contexts. You can find CSS files for all of these by following the links in my original Mastodon thread—they’re great starting points if you want more variety than the usual Tailwind shades.More tools are also available below.

What colour palette generators did people suggest?

Several generators were recommended, though I personally find them tricky to use. Harmonizer helps you create balanced colour schemes from a base colour. Tints.dev generates shades and tints from any input, similar to Tailwind’s scale. Coolors is a popular interactive palette maker with export options. And Colorpalette.pro offers curated palettes alongside a generator. While these tools didn’t click with me (I’m not yet skilled enough to judge the output), they’re worth exploring if you have a better eye for colour. Just keep in mind that generators often require tweaking to meet accessibility needs.

Are there any extra colour tools you found helpful?

Yes! A few additional resources stood out. Colorhexa provides detailed info about any hex colour, including colourblindness simulations—invaluable for accessibility testing. The oklch colour space (via CSS function) lets you generate colours dynamically using perceptual uniformity. The article “Generative colours with CSS” shows a practical example of using oklch to create responsive colour scales. These tools go beyond static palettes, helping you build custom colour systems on the fly. I highly recommend bookmarking them if you want to move past fixed palettes towards generative approaches.

Why do you find colour palette generators hard to use?

I’m not naturally good at colour, so generators often overwhelm me. They present endless options without the guardrails that a curated palette provides. For someone like me, seeing a multitude of random swatches feels like noise rather than help. I need a base palette that someone with expertise has already refined—like Tailwind’s or the ones I listed above. Without that foundation, I can’t easily judge which combinations work or ensure accessibility. That said, I recognise generators have value for people with stronger colour instincts. Maybe one day I’ll improve enough to use them effectively, but for now, I prefer the safety of pre-built palettes.

What is oklch and why should I care?

Oklch is a colour space designed for perceptual uniformity—meaning that a given change in colour value looks roughly the same to the human eye, regardless of which hue or lightness you start from. The CSS oklch() function lets you specify colours using lightness, chroma (saturation), and hue, making it easier to generate consistent scales. The article “Generative colours with CSS” demonstrates how to programmatically create colour families directly in your stylesheet, reducing reliance on hardcoded palettes. For developers who want flexibility without sacrificing harmony, oklch is a game-changer. It’s especially useful for theming or responsive designs where colours need to adapt dynamically.