Web Developer Curates Top CSS Color Palettes After Abandoning Tailwind

Overview

A front-end developer has published a curated list of CSS color palettes after deciding to stop using Tailwind CSS in new projects. The collection includes both pre-built palettes and generators designed to help designers and developers choose accessible, harmonious colors.

Web Developer Curates Top CSS Color Palettes After Abandoning Tailwind

The developer, who shared the list on Mastodon, said they missed Tailwind's intuitive color system after switching to vanilla CSS. “I’m not very good with colours so it makes a big difference to me to have a reasonable colour palette that somebody who is better at colour than me has thought about,” they wrote.

Background

Tailwind CSS is a popular utility-first framework that includes a built-in color palette with shades like blue-100 and blue-200. Many developers rely on these predefined hues to speed up design workflows. However, some are moving away from Tailwind due to bundle size concerns or a preference for writing vanilla CSS.

The developer noted they were “a little tired of those Tailwind colours” and sought alternatives. After asking for recommendations on Mastodon, a friend requested the resulting links be compiled, leading to this public resource.

The Palettes

Top Picks

Uchū – A CSS-first palette with a FAQ and supporting files. Designed for simplicity and readability.
Flexoki – A palette optimized for screen readability, with both light and dark variants.
Reasonable Colours – Focused on accessibility, this palette ensures sufficient contrast for all users.

More Palettes

Color Generators

While the developer finds generators “too hard to use”, they included them in case others benefit. “Maybe one day I will get better enough at colour that I’m able to use a generator successfully,” they added.

Additional Tools

ColorHexa – Provides information about colorblindness and color conversion.
Oklch – A modern color space designed for perceptually uniform gradients.
Generative Colors with CSS – Demonstrates using the oklch() CSS function to dynamically generate colors.

What This Means

The growing availability of curated color palettes signals a shift in web development toward design systems that are both beautiful and accessible. Developers no longer need to rely on a single framework like Tailwind for color choices; instead, they can adopt palettes tailored to specific needs, such as accessibility or brand identity.

For the broader industry, this trend underscores the importance of color theory in user experience. Accessible palettes like Reasonable Colours help meet Web Content Accessibility Guidelines (WCAG), while tools like Oklch enable dynamic, perceptually uniform color generation.

As more developers document and share their color workflows, the community gains a richer set of resources. “It’s a small but meaningful step toward better design,” the developer concluded.

Tags: