Skip to content
Build a color system

Tailwind color system generator

Enter one brand color and get a semantic Tailwind CSS v4 color system with light and dark mode, so classes like bg-primary and text-primary-foreground just work.

One brand color in. A complete light and dark UI color system out.

How it works

  1. Enter your brand color. Any hex, rgb, hsl, oklch, or color name works.
  2. Check the live preview and the accessibility results for light and dark mode.
  3. Open the Tailwind v4 export and copy it. Paste it into your main CSS file after @import "tailwindcss".

Questions

Which Tailwind version is this for?

Tailwind CSS v4. The export uses an @theme inline block that maps the color utilities to CSS variables.

Which classes will work?

Classes such as bg-primary, text-primary-foreground, border-border, ring-ring, and bg-chart-3, and they follow light and dark mode.

Can I get a plain 11-step scale instead?

Yes. The color scale generator turns one color into a scale from 50 to 950 and exports it for Tailwind.

Is my color sent anywhere?

No. Everything is worked out in your browser.