Color Palette Alternatives for Vanilla CSS: A Q&A Guide

After moving from Tailwind CSS to plain CSS, many developers find themselves missing Tailwind's thoughtfully curated color palette. If you're struggling with color choices or just want fresh options, this Q&A covers the best color palettes, generators, and tools recommended by the community. We'll explore why these alternatives exist, how to find them, and which ones stand out for accessibility, design, and ease of use.

Why did you switch from Tailwind to vanilla CSS?

I decided to stop using Tailwind for new projects and write plain CSS instead. While Tailwind is powerful, I wanted more control over my stylesheets and a lighter setup. However, one thing I truly missed was Tailwind's built-in color palette. Having a range of pre-defined colors like blue-100 or green-200 made it easy to choose shades without agonizing over hex codes. For someone like me who isn't naturally good with colors, that palette was a lifesaver. But I also grew tired of seeing the same Tailwind colors everywhere, so I started searching for alternatives.

What did you miss most about Tailwind's color palette?

The main thing I missed was the ease of picking harmonious colors. With Tailwind, if I wanted a light blue, I could type blue-100; if that was too pale, I'd try blue-200 or blue-50. It's a simple system that saves time and ensures consistency. The palette was designed by someone with a great eye for color, taking the guesswork out of design. Without it, I had to think about every shade from scratch, which slowed me down. That's why I asked on Mastodon: what other well-designed color palettes exist for CSS?

How did you find new color palettes?

I posted a question on Mastodon asking the community for their favorite color palettes beyond Tailwind. The response was overwhelming! People shared links to both pre-made palettes and tools for generating custom ones. A friend later said they wanted all those links in one place, so I decided to compile them here. This way, my friend — and everyone else — can explore and pick what works best for their projects.

What are your favorite color palettes?

After reviewing many options, my top three favorites are uchū (with its CSS file and FAQ), flexoki, and reasonable colours — the last has a strong focus on accessibility. Each offers a distinct set of hues and thoughtful scalability. Uchū feels modern and balanced, flexoki provides a warm, ink-like palette, and reasonable colours ensures contrast for better readability. I use them as drop-in replacements for Tailwind's palette in my current projects.

What other color palettes were recommended?

Beyond my favorites, the community suggested several excellent options: Web Awesome, Radix UI, US Web Design System, and Material Design. Each has its own strengths. Web Awesome is great for general use, Radix offers accessible component colors, USWDS is perfect for government or large-scale applications, and Material Design brings a familiar, rigorous system. You can find CSS files for each to integrate into vanilla CSS projects easily.

What color palette generators are available?

If you prefer to create custom palettes, several generators were recommended: Harmonizer, tints.dev, Coolors, and colorpalette.pro. Personally, I've always found generators too complex to use effectively — I end up with colors that clash. But others love them, so I'm linking them in case you're more skilled with color. Maybe someday I'll get good enough to use a generator successfully!

What other color tools are useful?

For advanced color work, check out ColorHexa which includes data about colorblindness simulation. The oklch CSS function is another powerful tool — it allows you to generate colors dynamically in a perceptually uniform space. A great resource is the article Generative Colors with CSS, which shows how to use oklch to create adaptive palettes. These tools can help you build accessible and vibrant color systems from scratch.

Any final thoughts on choosing a palette?

Whether you pick a pre-built palette like uchū or experiment with generators, the key is to start with something that feels right. Don't be afraid to tweak colors later — CSS makes it easy to update variables. I hope these options help you move beyond Tailwind while keeping color selection simple and fun. If you have other recommendations, feel free to share them online!