Exploring CSS Color Palettes Beyond Tailwind

When I moved from Tailwind to vanilla CSS, I missed having a curated color palette at my fingertips. Tailwind's color system, with its numbered shades like blue-100 and blue-200, made it easy to pick harmonious hues even for those of us who aren't color experts. After asking on Mastodon for alternatives, I received a wealth of recommendations—from complete palettes to generators and color tools. Below, I answer common questions about my journey and the resources I discovered. You'll find links to my favorite palettes, additional options, generators, and tools to help you build your own color system. Whether you're tired of Tailwind's defaults or simply exploring, these choices offer variety and accessibility.

Why did you stop using Tailwind for new projects?

I decided to stop using Tailwind for new projects because I wanted to return to writing vanilla CSS. Over time, I felt that Tailwind's utility-first approach added unnecessary complexity for smaller websites. By using vanilla CSS, I could keep my code simpler, reduce dependencies, and have full control over styling. However, this meant losing access to Tailwind's pre-designed color palette, which I found incredibly helpful for quickly selecting colors. I'm not naturally good with color, so having a thoughtful palette was a big advantage. The trade-off was worth it for cleaner CSS, but I needed to find new color resources to fill the gap.

Exploring CSS Color Palettes Beyond Tailwind

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

The thing I missed most was the simplicity and reliability of Tailwind's numbered color scales. For example, if I wanted a light blue, I could instantly use blue-100. If it wasn't quite right, I would try blue-200 or blue-50. This system saved me from having to guess hex values or tweak hues manually. Tailwind's palette was designed by color experts, so I trusted that all shades would work together harmoniously. Without it, I had to either create my own colors or find pre-built palettes that offered similar ease of use. That's why I asked the community for recommendations—and I found some excellent alternatives.

Which color palettes are your favorites?

My absolute favorites are three CSS-based palettes: uchū, flexoki, and reasonable colours. Each comes with its own CSS file so you can easily import them into your project. Uchū has a space-themed, minimal vibe and includes a helpful FAQ. Flexoki is inspired by analog tools and feels warm and earthy. Reasonable colours focuses heavily on accessibility, ensuring good contrast for all users. These three stood out because they are well-documented, ready to use, and thoughtfully designed. They replace what I loved about Tailwind's palette while bringing fresh aesthetics. I recommend checking them out if you're looking for dependable color systems that don't require advanced color theory knowledge.

What other color palettes were recommended?

Beyond my top picks, the community shared several other excellent palettes. These include Web Awesome, a set of cheerful, modern colors often used in icon sets; Radix, a palette designed for UI components with a scientific approach to contrast; US Web Design Systems, which provides accessible colors for government websites; and Material Design, Google's familiar palette that's great for app interfaces. Each of these has its own strengths—for instance, US Web Design Systems is excellent for accessibility compliance, while Radix offers fine-grained control for interactive elements. You can often find them as CSS custom properties, making integration straightforward.

What color palette generators are available?

If you prefer to generate custom color schemes, several tools were suggested. Harmonizer lets you start with a base color and generates a harmonious palette. Tints.dev is specifically designed to create Tailwind-like color scales. Coolors is a popular generator that allows you to explore and save palettes. Colorpalette.pro provides a simple interface for creating and exporting palettes. I've personally found generators difficult to use because I lack confidence in color decisions, but they may be helpful if you have a base color in mind. Combining a generator with a pre-built palette can be a effective way to learn color theory over time.

What additional color tools did you discover?

Along with palettes and generators, I learned about several useful color tools. Colorhexa provides detailed information about any hex color, including colorblindness simulations—great for accessibility testing. Oklch is a CSS color space that offers perceptually uniform colors; it's supported in modern browsers and makes dynamic color generation easier. There's also a tutorial on Generative colors with CSS that shows how to use the oklch() function to build color scales on the fly. These tools complement the palettes by helping you understand and adjust colors. I've bookmarked them for future projects when I need finer control or want to ensure my designs work for everyone, including those with visual impairments.

Tags: