Exploring CSS Color Palettes Beyond Tailwind: A Curated Collection

When moving from Tailwind CSS to vanilla CSS, one of the biggest missing features can be the thoughtfully designed color palette. Tailwind’s shades like blue-100 or blue-200 provide a quick, accessible way to pick colors without deep design expertise. This collection, inspired by a community discussion on Mastodon, brings together alternative color palettes and tools that can help you build beautiful, accessible interfaces without relying on a framework. Below, we answer common questions about these resources, from curated palettes to smart generators and modern CSS color functions.

Why did you stop using Tailwind and what did you miss most?

The author decided to move away from Tailwind for new projects in favor of writing vanilla CSS. While this simplified the workflow and removed dependency on a large utility framework, one feature was sorely missed: the ready-made color palette. Tailwind provides a series of harmonic colors (like blue-100, blue-200, etc.) that make it easy for non-designers to pick appropriate colors quickly. Without that palette, the author felt lost, as they are not naturally good with color. The search for high-quality, pre-built color palettes that work in vanilla CSS became a priority. This led to asking the community for recommendations, which resulted in the list of palettes and tools shared here.

What are the author’s favorite color palettes and why?

Three palettes stood out to the author. uchū (pronounced oo-choo) offers a soft, pastel-inspired set that feels modern and gentle on the eyes. Its accompanying FAQ explains design decisions. Flexoki is another favorite, known for its vibrant yet balanced range, perfect for bold interfaces. Both palettes come as CSS files ready to import. The third recommendation is reasonable colours, a palette with a strong emphasis on accessibility – ensuring good contrast and readability. The author appreciates that an expert color designer has curated these palettes, saving them from making poor color choices. Each palette’s CSS file includes comments to help developers understand the usage, making them easy to integrate into any vanilla CSS project.

What other color palettes were recommended by the community?

Beyond the favorites, several other palettes were shared. Web Awesome provides a set of vibrant, modern colors ideal for web components. Radix Colors is a comprehensive system with accessible scales for UI elements. US Web Design System (USWDS) offers a government-grade palette that meets strict accessibility standards. Material Design from Google remains a classic choice, with its well-known hierarchy of primary, secondary, and surface colors. For each, you’ll typically find both CSS variables and documentation on how to use them. These palettes are excellent alternatives for developers who want professionally designed colors without reinventing the wheel. You can find direct links to their CSS files or installation instructions in the resources section below.

What color palette generators are available and are they easy to use?

Several generators were suggested to help create custom palettes. Harmonizer uses algorithms to produce balanced color schemes. tints.dev generates tints and shades from a base color. Coolors is a popular tool for quickly prototyping harmonies. colorpalette.pro offers a simple interface to generate complete palettes. However, the author admits to finding these generators challenging – often due to too many options or lack of guidance. If you’re also color-challenged, you might prefer using a curated palette instead. But if you’re determined to learn, these tools can be powerful. Many offer export options for CSS custom properties. For example, you can create a palette in Coolors and then convert it to CSS variables manually or via plugins.

What additional color tools can help with accessibility and modern CSS?

Two tools stood out beyond palettes. Colorhexa provides detailed information about any color, including its appearance under various types of colorblindness. This is invaluable for ensuring your palette is inclusive. Also, the oklch color model is gaining traction in CSS for its perceptual uniformity – meaning colors appear evenly spaced to the human eye. The guide Generative colors with CSS explains how to use the oklch() function to dynamically generate colors directly in stylesheets. This technique allows you to create a color scale based on lightness and chroma, offering fine-tuned control. By combining tools like Colorhexa with oklch, you can build custom, accessible palettes without external dependencies.

How can I integrate these color palettes into my vanilla CSS project?

Most palettes are distributed as CSS files containing custom properties (e.g., :root { --color-primary: #... }). Simply download the CSS file and import it into your stylesheet using @import or a <link> tag. For example, uchū provides a uchu.css file that you can include. Once imported, you can use the variables throughout your project: background-color: var(--uchu-blue-100);. For Flexoki, you’ll use similar variables. If a palette is not provided as a file, you can manually copy the values into your own CSS. Always check the palette’s documentation for license terms and usage guidelines. Many are open source (MIT, Apache, etc.), so you can use them freely in commercial and personal projects.