Exploring CSS Color Palettes Beyond Tailwind

After ditching Tailwind for vanilla CSS, I found myself missing its thoughtfully curated color scale. So I asked the Mastodon community for alternatives and received a wealth of suggestions. Below, I answer common questions about my journey and share the color palettes, generators, and tools that caught my attention.

Why did you stop using Tailwind CSS?

I decided to move away from Tailwind for new projects because I wanted to write plain CSS again. While Tailwind is incredibly efficient, I felt it was adding an unnecessary layer of abstraction. However, I immediately missed the convenience of its color palette—being able to grab blue-100 for a light shade or blue-200 for something slightly darker. Those pre-defined swatches saved me from my own poor color sense. The decision wasn't about Tailwind being bad, but about simplifying my toolchain. I still appreciate the ease of having a consistent palette designed by someone with a better eye for color.

What are your favorite CSS color palettes from the community?

Among the responses, three stood out as my personal favorites. First, uchū (CSS file, FAQ) offers a beautifully soft and muted set of colors that feels modern and calming. Second, flexoki (CSS file) provides a vibrant yet harmonious palette inspired by ink and paper. Third, reasonable colors (CSS file) focuses heavily on accessibility, ensuring sufficient contrast for text and backgrounds. Each of these palettes comes with a ready-to-use CSS file, making it easy to drop into any project. They have saved me countless hours of tweaking hues and saturations.

What other color palettes did people recommend?

Beyond my favorites, several other palettes were mentioned. Web Awesome delivers a comprehensive set designed for modern web interfaces. Radix offers a robust palette with semantic step scales, great for component libraries. The US Web Design System (USWDS) provides government-grade colors that prioritize readability and consistency. And Material Design remains a classic, with its well-known system of primary, secondary, and surface colors. Each of these palettes has been battle-tested and comes with its own documentation and CSS variables. I’ve bookmarked them all for future projects.

What color palette generators were linked?

Several people pointed me to tools that generate entire palettes from scratch: Harmonizer, tints.dev, Coolors, and colorpalette.pro. I’ll be honest—I’ve always found generators tricky because you still need a good eye to pick the right starting color. But maybe someday I’ll get better at color theory and put them to good use. For now, I prefer curated palettes where the hard work is already done.

Are there any additional color tools you discovered?

Yes! A few extra tools were shared that go beyond palettes. Colorhexa includes detailed information about colorblindness, helping you test how your colors appear to different users. There’s also oklch, a community site dedicated to the OKLCH color space in CSS. And a particularly useful article titled Generative colors with CSS demonstrates how to use the oklch() CSS function to dynamically generate color scales based on a single hue—perfect for creating consistent, programmatic color systems.

How can you use the oklch function for dynamic colors?

The oklch() CSS function lets you define colors by luminosity, chroma, and hue. For example, you can set a base hue (e.g., 250deg) and then vary the lightness and chroma to create an entire palette. In the Generative Colors article, the author shows how to write a few custom properties—like --c-primary for the base hue—and then derive shades by adjusting the second (chroma) and third (lightness) parameters. This approach is elegant because it keeps your palette consistent while allowing dynamic changes based on context, such as dark mode or user preferences. No more manually picking each swatch!