Exploring Alternative CSS Color Palettes Beyond Tailwind

Many developers rely on pre-built color palettes to speed up design work, especially when they aren't confident in color theory. Tailwind CSS offers a popular palette, but some creators seek variety or simplicity. This Q&A covers alternative CSS color palettes, generators, and tools shared by a developer who moved away from Tailwind but missed its structured colors.

Why did the author stop using Tailwind and what did they miss about it?

The author decided to write vanilla CSS for new projects instead of using Tailwind. However, they missed Tailwind's thoughtfully crafted color palette. With Tailwind, they could easily pick a light blue using blue-100 and adjust to blue-200 or blue-50 if needed. The author admits they are not skilled with colors, so having a consistent palette designed by someone with better color sense made a big difference. This desire for ready-made, trustworthy colors prompted them to seek alternatives.

Exploring Alternative CSS Color Palettes Beyond Tailwind

What are the author's favorite CSS color palettes?

The author highlighted three palettes they liked most: uchū (CSS file, FAQ), flexoki (CSS file), and reasonable colours (CSS file). Reasonable colours focuses on accessibility, making it a practical choice for inclusive designs. Each palette offers a complete set of hues and shades similar to Tailwind but with unique aesthetics and accessibility considerations.

What other color palettes were recommended by the community?

In addition to the favorites, the community suggested several other palettes: Web Awesome, Radix, US Web Design Systems, and Material Design. These palettes are widely used in design systems and provide extensive documentation. For example, Material Design's palette is based on color theory and includes guidelines for primary, secondary, and accent colors. The US Web Design Systems palette is designed for government sites with accessibility in mind. Each offers CSS files that can be directly imported or used as a reference.

What color palette generators are available?

The post lists several generators: Harmonizer, tints.dev, Coolors, and colorpalette.pro. These tools help create custom palettes by generating harmonious color schemes. The author admits they have always found generators difficult to use, but they left the links for others who might benefit. They hope to improve their color skills in the future to use such generators effectively.

What additional color tools are mentioned?

Beyond palettes, the post points to useful color tools: ColorHexa provides information about colorblindness, helping designers choose accessible colors. Oklch is a color space model mentioned as a modern alternative. The article Generative colors with CSS demonstrates how to use the CSS oklch() function to dynamically generate colors, which is useful for creating themes or adaptive designs.

How does the author feel about using color palette generators?

The author admits they have always found generators, like the ones listed, too hard to use. They are not confident in adjusting generated palettes to fit their needs. However, they leave the links, hoping that one day they will become better at color selection and be able to use a generator successfully. This honesty reflects a common challenge among developers who prefer ready-made solutions.