After moving away from Tailwind to vanilla CSS, many developers miss the convenience of curated color scales. This Q&A explores alternative CSS color palettes, generators, and tools shared by the community—perfect for those who want fresh, accessible, or dynamic color options without relying on a framework.
Why did the author decide to stop using Tailwind for new projects?
The author chose to write vanilla CSS instead of relying on Tailwind, seeking more control and simplicity. Tailwind offers utility classes for colors like blue-100 or blue-200, which made it easy to pick shades. However, the author felt ready to reduce dependencies and work directly with CSS. This shift also aimed to avoid the “class soup” that can clutter HTML. The main challenge became finding well‑designed color palettes that didn’t require design expertise. Tailwind’s palette was convenient, but the author wanted variety—not just the same Tailwind colors they had used for ages.
What are the author's favorite CSS color palettes?
The author’s top picks include uchū (CSS file and FAQ available), flexoki (also a CSS file), and Reasonable Colors (CSS file with accessibility focus). These palettes were shared on Mastodon in response to the author’s query. They are praised for thoughtful color scaling, readability, and generous licenses. uchū offers a modern, pastel‑like set; flexoki provides a rich, muted palette; and Reasonable Colors prioritizes contrast ratios for inclusive design. Each includes CSS custom properties (variables) for easy integration.
What other color palettes are recommended for vanilla CSS?
Beyond the favorites, the community suggested several robust options: Web Awesome (a collection of themeable colors), Radix (a UI component library with accessible color scales), US Web Design Systems (USWDS) (government‑backed, high‑contrast palettes), and Material Design (Google’s systematic color system). These palettes are well‑documented and widely used. Developers can import them as CSS variables or copy specific values. They cover primary, secondary, neutral, and accent tones, making them suitable for both simple sites and complex applications.
Are there tools to generate custom color palettes from scratch?
Yes, several generators can help create unique scales: Harmonizer (blends colors harmoniously), tints.dev (generates full tint/shade scales), Coolors (quick palette creator with export options), and colorpalette.pro (a free, no‑nonsense tool). The author admits these generators can be intimidating for those less skilled with color, but they remain useful for experimentation. Even if the results aren’t perfect, they offer a starting point that can be refined with manual tweaks.
What additional color tools help with accessibility and dynamic generation?
Two standout tools are ColorHexa (which includes colorblindness simulation and color conversion) and OKLCH (a new CSS color space that enables perceptually uniform gradients). The article also highlights a resource titled “Generative Colors with CSS” that demonstrates using the oklch() function to create dynamic, algorithm‑driven color schemes. These tools allow developers to test contrast, simulate visual impairments, and generate colors programmatically—reducing reliance on pre‑made palettes while maintaining good design.
Where did the author find these palette recommendations?
The original query was posted on Mastodon, where the developer community actively shared their favorite resources. Friends and followers replied with links to the palettes mentioned above. This organic exchange not only satisfied the author’s need for fresh colors but also inspired this blog post as a curated reference for others. It highlights how social platforms can be valuable for discovering practical design assets.