Developer Sparks Community Response with Curated CSS Color Palettes
A front-end developer has compiled a comprehensive list of alternative color palettes for vanilla CSS, following a decision to abandon the popular Tailwind framework. The curated collection, shared via a Mastodon post and now a blog entry, addresses a common pain point for developers who rely on Tailwind's extensive color system.
"I'm not very good with colours, so having a palette designed by someone who knows what they're doing makes a huge difference," the developer explained. "But I wanted something fresh and framework-free."
Background
Tailwind CSS has become a dominant utility-first framework, offering predefined color scales (e.g., blue-100, blue-200) that simplify design decisions. However, some developers prefer writing plain CSS for more control and reduced dependency on build tools.
The developer's public request on Mastodon for alternative palettes quickly garnered dozens of responses, leading to the creation of this vital resource. The problem of color selection remains a significant barrier for non-designers in web development.
What This Means
This list offers a practical solution for developers transitioning from Tailwind to vanilla CSS without sacrificing the convenience of curated color scales. It also highlights a growing community push toward accessible and thoughtfully designed color systems.
"Having a respectful color palette that someone else has thought about can save hours of trial and error," said the developer. The collection includes options focused heavily on accessibility, such as Reasonable Colours.
Favorite Palettes Highlighted
The developer identified three palettes as personal favorites, each offering unique strengths:
- Uchū (CSS file, FAQ) – A modern, muted palette inspired by space and zen aesthetics. Ideal for clean, minimalist designs.
- Flexoki (CSS file) – A vibrant, high-contrast palette optimized for readability and visual impact.
- Reasonable Colours (CSS file) – A palette with a strong focus on accessibility, ensuring sufficient contrast for all users.
More Color Palettes
Additional community-suggested palettes include:
- Web Awesome – A playful, modern palette from the makers of Font Awesome.
- Radix – A carefully balanced palette used in Radix UI components.
- U.S. Web Design Systems – Government-approved colors for federal websites.
- Material Design – Google's industry-standard palette, now available for vanilla CSS.
Color Scheme Generators (for the Adventurous)
Though the developer admits generators are often too complex, several tools were recommended:
- Harmonizer – Creates cohesive palettes from a base color.
- Tints.dev – Quickly generates tints and shades.
- Coolors – Popular palette generator with export features.
- Colorpalette.pro – AI-driven palette creation.
Additional Color Tools
For developers looking to dive deeper, two tools stand out:
- Colorhexa – Includes detailed colorblindness simulation data.
- Oklch & Generative Colors with CSS – Demonstrates how to use the
oklchCSS function to dynamically generate colors.