Exploring CSS Color Palettes Beyond Tailwind: A Curated Collection

When I decided to step away from Tailwind CSS for new projects and return to writing vanilla CSS, I rediscovered the joy of full control—but also a nagging absence: Tailwind's thoughtfully designed color palette. Having a set of pre-harmonized colors like blue-100 or blue-200 made it easy to pick shades without second-guessing. I'm no color expert, so leaning on someone else's expertise was a huge relief. Yet, after years of the same Tailwind hues, I craved fresh alternatives.

So I turned to Mastodon, asking the community: What other color palettes do you recommend? The response was overwhelming and generous. A friend then requested a consolidated list—so here it is, for them and for you. Below are my favorites, more palettes, generators, and tools to elevate your CSS color game.

My Favorites

These three palettes stood out for their beauty, thoughtfulness, and ease of use. Each comes with a CSS file so you can drop them right into your project.

uchū

uchū (Japanese for "space") is a soft, pastel-like palette inspired by retro computing and vaporwave aesthetics. It offers a limited but harmonious set of colors that work wonderfully for minimal or nostalgic designs. The CSS file is straightforward, and the FAQ explains the design decisions.

Flexoki

Flexoki is an inky, high-contrast color system created by the developer of Obsidian. It aims to be both visually pleasing and highly readable, with a focus on print-like feel. The CSS file includes light and dark mode variables.

Reasonable Colors

Reasonable Colors lives up to its name—it prioritizes accessibility above all. Every color passes WCAG contrast guidelines, making it a fantastic choice for inclusive design. The CSS file is well-documented and easy to use.

Additional Color Palettes

Beyond my top picks, these well-known design systems offer robust palettes you can adapt for CSS.

Web Awesome

The Web Awesome palette is part of a larger component library, but the colors themselves are modular and modern. They provide a good range of neutrals, primaries, and accents.

Radix

Radix Colors is a meticulously crafted scale system from the Radix UI team. Each color comes in 12 steps (from 1 to 12) with both light and dark variants. It's perfect for design systems and component libraries.

US Web Design Systems

The U.S. Web Design System (USWDS) provides a government-grade color palette built for accessibility and consistency. It's a solid choice for public-facing projects.

Material Design

Google's Material Design 3 palette uses dynamic color based on the user's wallpaper, but you can also use the static color tokens. It's a proven system with huge community support.

Color Scheme Generators

If you prefer to generate your own palette rather than using a predefined one, these tools can help—even if you, like me, find them a bit intimidating at first.

Harmonizer

Harmonizer lets you start from a base color and generates a cohesive palette. It also shows contrast ratios.

Tints.dev

Tints.dev is a simple tool that creates tints and shades from any hue. Great for quickly generating a color scale.

Coolors

Coolors is a popular palette generator with a fast, interactive workflow. You can lock colors and generate variations.

Colorpalette.pro

Colorpalette.pro offers a clean interface to create and export palettes in CSS format.

Extra Color Tools

These resources go beyond simple palettes, providing deeper insight into color theory and accessibility.

Colorhexa

Colorhexa is an encyclopedia of color information. It includes colorblindness simulations and detailed breakdowns of any hex code. A must-bookmark for inclusive design.

OKLCH and Generative Colors

Modern CSS now supports the OKLCH color space, which is perceptually uniform. The article Generative colors with CSS demonstrates how to use oklch() to dynamically generate colors that remain harmonious and accessible.

Whether you're a Tailwind refugee or simply looking to refresh your CSS color library, these palettes and tools offer a wealth of inspiration. Try one in your next project—you might just find your new favorite shade.