Exploring CSS Colour Palettes: A Q&A Guide

Choosing the right color palette can make or break a design, especially if you're not a color expert. This Q&A dives into practical alternatives to Tailwind's built-in palette, covering accessible options, generators, and modern CSS techniques. Whether you're switching to vanilla CSS or just looking for fresh inspiration, these insights from a developer who made the jump will guide you.

Why did you stop using Tailwind for new projects?

I decided to move away from Tailwind for new projects because I wanted to write vanilla CSS instead. While Tailwind is powerful, I felt it added an extra layer of abstraction that I no longer needed. Writing plain CSS keeps my stylesheets simpler and more maintainable, without the learning curve of utility classes. However, this switch meant losing access to Tailwind's thoughtfully designed color palette—a tool I relied on heavily since I'm not great with color theory. The decision was about streamlining my workflow, but it forced me to seek out alternative color systems that could fill that gap.

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

The biggest thing I missed was the convenience of Tailwind's predefined color shades. For example, if I wanted a light blue, I could simply write blue-100. If that shade didn't work, I'd try blue-200 or blue-50 without second-guessing. This systematic approach removed the guesswork for someone like me who struggles with color harmony. Tailwind's palette was curated by design experts, so I could trust that all shades would work together. Without it, I had to find new palettes that offered similar consistency but with a fresh look.

Which colour palettes are your favorites and why?

After asking for recommendations on Mastodon, I discovered three standout palettes. Uchū is a minimalist palette with a CSS file and FAQ—its clean hues feel modern. Flexoki offers a warm, earthy tone scheme that's easy on the eyes, also available as CSS. Reasonable Colors focuses on accessibility, with a CSS file designed to ensure good contrast for all users. Each palette comes from a designer who thought through the color relationships, making them reliable for anyone who isn't a color expert. I use them as drop-in replacements for Tailwind's palette in my vanilla CSS projects.

What are some other colour palettes worth exploring?

Beyond my favorites, several other palettes were recommended. Web Awesome is a comprehensive set that works well for UI components. Radix provides scalable colors perfect for design systems. The US Web Design System (USWDS) offers government-tested accessible colors. Material Design from Google is a classic choice with many shades. These palettes are all available as CSS files, making them easy to integrate. Each has its own flavor—USWDS prioritizes accessibility, while Radix is optimized for theming. I suggest experimenting with a few to see which style matches your project's tone.

What colour palette generators are mentioned?

Several generation tools were shared, even if they're not my personal go-tos. Harmonizer creates cohesive palettes based on a starting color. Tints.dev generates harmonious tints and shades. Coolors is a popular fast palette builder with export options. Colorpalette.pro offers AI-assisted palette creation. I've always found generators difficult to use—they often output colors that don't feel natural to me. But these links are useful for those who are more skilled with color. If you can master one of these tools, you can generate custom palettes on the fly without relying on pre-built ones.

What colour tools help with accessibility and modern CSS?

Accessibility is crucial, and Colorhexa includes information about colorblindness to help you choose safe combinations. For modern CSS, oklch is a powerful color function that allows dynamic generation of colors with better perceptual uniformity. A resource titled "Generative Colors with CSS" demonstrates how to use oklch to create adaptive palettes directly in your stylesheet. These tools empower you to build accessible and flexible color systems without external dependencies, making your vanilla CSS even more capable.