Handpicked CSS Color Palettes and Tools for Smarter Web Design

The Shift from Tailwind to Vanilla CSS

After years of relying on Tailwind’s utility classes, one developer decided to return to writing plain CSS. While Tailwind offers a convenient and thoughtfully designed color system—where blue-100 gives a light blue and blue-200 a slightly deeper shade—the habit of depending on a framework can sometimes feel limiting. The author missed having instant access to a cohesive palette, especially those created by people with a strong sense of color. But they also grew tired of seeing the same Tailwind colors everywhere. A call on Mastodon for alternative palettes produced a wealth of community-sourced options, which are now shared here.

Top Picks: Three Outstanding Palettes

The following color palettes stood out for their thoughtfulness and unique aesthetics. Each comes with a CSS file ready to use.

Uchū

Named after the Japanese word for “space” or “universe,” Uchū offers a deep, cosmic-inspired palette. The CSS file and accompanying FAQ explain how to integrate it into any project. Its subdued tones work well for moody interfaces and dark themes.

Flexoki

Flexoki is a vibrant yet balanced set of colors with a modern feel. The CSS file includes both light and dark variants, making it versatile for responsive design. Its palette covers primary, secondary, and neutral shades with consistent brightness levels.

Reasonable Colors

As the name implies, Reasonable Colors focuses on accessibility and usability. The CSS file provides high-contrast pairings and includes tools for checking colorblind safety. It’s an excellent choice for projects that prioritize inclusivity without sacrificing aesthetics.

Additional Color Palettes Worth Exploring

Beyond the favorites, the community recommended several other well-known systems:

• Web Awesome – A modern palette inspired by the popular icon library, offering bright and muted tones.
• Radix – Originally part of the Radix UI component library, this palette is designed for consistency across light and dark modes.
• US Web Design Systems – A government-backed palette built for accessibility and clarity, with a limited but robust set of colors.
• Material Design – Google’s classic color system, still widely used for its carefully calibrated scales and guidelines.

Color Palette Generators

Sometimes you need to create a custom scheme. These generators help you build and tweak palettes, though they can be overwhelming for beginners. The author admits they’ve found such tools challenging but acknowledges their potential.

• Harmonizer – Analyzes your starting color and suggests harmonious neighbors.
• Tints.dev – Generates tints and shades for any base color, with exportable CSS.
• Coolors – A fast palette generator with a popular randomize feature and export options.
• Colorpalette.pro – Offers a simple interface for creating and saving color schemes.

More Color Tools and Techniques

For those ready to dive deeper, these resources expand your color toolkit:

• Colorhexa – Provides detailed information about any color, including colorblindness simulation data.
• OKLCH – A modern color space that enables more predictable mixing and scaling. Learn how to use it in CSS.
• Generative Colors with CSS – An article demonstrating how to use the oklch() CSS function to dynamically generate colors, perfect for data visualizations or theming.

Embracing a Broader Color Landscape

Moving away from a framework like Tailwind doesn’t mean losing access to great color palettes. The community has built a rich ecosystem of handcrafted systems, ranging from the cosmic hues of Uchū to the accessible simplicity of Reasonable Colors. Whether you use a pre-made palette or a generator to craft your own, this collection offers a solid starting point. Experiment with these options and find the colors that resonate with your project’s identity.