Introduction
When a developer decides to step away from a utility-first framework like Tailwind CSS and return to writing vanilla CSS, they often miss certain conveniences. One of those is the thoughtfully crafted color palette that Tailwind provides. For those who struggle with color choices, having a set of well-balanced hues—like blue-100 for a light blue or blue-200 for a slightly darker variant—can be a game-changer. But even the best palettes can become familiar over time. After years of using Tailwind's colors, many seek fresh alternatives. Recently, a query on Mastodon sparked a collection of excellent color palettes and tools, now gathered here for anyone looking to expand their CSS color horizon.
My Favorite Color Palettes
Among the recommendations, three palettes stood out for their unique aesthetics and practical design:
- Uchū – A vibrant, modern palette with a focus on depth and contrast. CSS file | FAQ
- Flexoki – Inspired by analog photography, this palette offers warm, muted tones that feel both nostalgic and contemporary. CSS file
- Reasonable Colors – Designed with accessibility in mind, this palette ensures sufficient contrast ratios for readability. CSS file
Each of these palettes provides a distinct set of colors that can serve as a direct replacement or inspiration for Tailwind's offerings.
More Color Palettes
The Mastodon thread also yielded several other noteworthy palettes, often used in design systems:
- Web Awesome – A palette built for the Web Awesome icon library, featuring vibrant and accessible colors. Learn more
- Radix Colors – Part of the Radix UI library, this palette is carefully designed for interface components with a wide range of shades. Explore Radix Colors
- U.S. Web Design System (USWDS) – The official palette used across U.S. government websites, emphasizing accessibility and consistency. USWDS color tokens
- Material Design – Google's well-known color system, available in CSS custom properties. Material Design color system
Color Palette Generators
For those who prefer to create their own palettes, several generators were recommended. While the author admits they still find these tools challenging, others may flourish with them:
- Harmonizer – Generates harmonious palettes based on input seed colors. Try Harmonizer
- Tints.dev – Create tints and shades from a single base color. Visit Tints.dev
- Coolors – A popular random palette generator with fine-tuning options. Use Coolors
- ColorPalette.pro – A simple tool to generate color palettes quickly. Open ColorPalette.pro
Additional Color Tools
Beyond palettes and generators, a few more tools were mentioned that help with color selection and understanding:
- Colorhexa – Provides detailed information about any hex color, including simulations for various types of color blindness. Colorhexa
- Oklch – A modern color model that allows for intuitive manipulation. Explore its use in Generative colors with CSS, where the author demonstrates dynamic color generation using the
oklch()CSS function.
Bringing Color to Your Vanilla CSS
Whether you're moving away from Tailwind or simply seeking fresh color inspiration, the resources listed here offer a diverse range of options. From carefully curated palettes like Uchū and Flexoki to robust generators like Coolors and Tints.dev, there's something for every design sensibility. Don't forget to leverage modern CSS features like oklch() for even more flexibility. By exploring these alternatives, you can create beautiful, accessible, and unique color schemes for your projects.