Rediscovering CSS Color Palettes: A Q&A Guide

After years of relying on Tailwind CSS for rapid prototyping, I recently decided to return to writing vanilla CSS for new projects. While I appreciated the simplicity and control, I quickly missed Tailwind's thoughtfully curated colour palettes—especially because I'm not naturally skilled at picking colours. In search of fresh, accessible alternatives, I turned to the Mastodon community and discovered a treasure trove of colour palettes, generators, and tools. This Q&A compiles the best finds, from my personal favourites to community-recommended resources, all designed to make colour selection easier for developers of any skill level.

Why did the author stop using Tailwind and what did they miss most?

I moved away from Tailwind to simplify my CSS stack and reduce reliance on a framework for every project. But the biggest thing I missed was Tailwind's colour palette—like blue-100 or blue-200. For someone who struggles with colour theory, having a pre-made, harmonised palette designed by a professional is a huge time-saver. Tailwind's system instantly gave me light blues, dark blues, and every shade in between. Without it, I felt lost, often spending too long trying to pick colours that looked cohesive. That's why I started searching for standalone CSS colour palettes that could serve as a drop-in replacement.

Rediscovering CSS Color Palettes: A Q&A Guide

What are the author's favourite CSS colour palettes and why?

After asking on Mastodon, three palettes stood out as my favourites. First, uchū offers a unique, pastel-inspired set with both a CSS file and an FAQ. Second, flexoki provides a warm, print-like palette (see its CSS file). Third, reasonable colours focuses on accessibility, ensuring high contrast and readability. What I love about all three is that they're carefully composed, offer multiple shades, and come with ready-to-use CSS variables. They feel fresh compared to Tailwind's ubiquitous palette, yet just as practical.

Which colour palettes are recommended for accessibility?

For developers prioritising inclusive design, reasonable colours is an excellent choice. Its palette is specifically engineered for web accessibility, meaning each colour pair meets WCAG contrast ratios. Additionally, the US Web Design System (USWDS) provides a palette that aligns with government accessibility standards. Another strong candidate is the Material Design colour system by Google, which includes accessible variations for primary, secondary, and error states. When using any palette, always test with tools like ColorHexa, which also includes colourblindness simulation. The key is to verify that your chosen colours work for all users.

What other colour palette resources did the community suggest?

Beyond my favourites, the community shared several notable resources. Web Awesome offers a vibrant, open-source palette designed for modern web interfaces. Radix UI provides a set of colour scales with careful attention to light and dark themes. The US Web Design System (USWDS) features a government-tested palette that prioritises readability and accessibility. And of course, Material Design from Google remains a reliable choice with extensive documentation. Each of these comes with CSS files or variables you can import directly, making it easy to swap out Tailwind's colours without starting from scratch.

How can colour scheme generators help, and which ones are mentioned?

Colour generators are fantastic when you need a custom palette but lack design expertise. They automatically suggest harmonious colours based on a seed colour or algorithm. The community recommended several: Harmonizer adjusts your palette for better accessibility, tints.dev lets you generate tints and shades, Coolors is a classic fast palette builder, and colorpalette.pro offers advanced control. Personally, I've always found generators a bit overwhelming—they require you to know what 'looks good'—but I keep these bookmarked for future experimentation. Perhaps one day I'll master them, but for now, the curated palettes above are my go-to.

What additional colour tools are useful for developers?

Several tools go beyond static palettes. ColorHexa provides detailed colour information, including colourblindness simulations and conversion to different formats. OKLCH (and its CSS oklch() function) allows you to generate colours mathematically, ensuring perceptual uniformity. A great example is the article Generative colors with CSS, which shows how to use oklch() to create a dynamic colour system. These tools empower you to build your own palettes with scientific precision. I especially admire oklch because it solves the problem of uneven colour spacing—a common issue in traditional palettes.

Tags: