Use Paletter with Tailwind CSS
A Tailwind v4 color palette that isn't just blue with 10 shades.
Every Tailwind site looks the same
Tailwind's default palette is fine for prototyping. But ship with it and your app looks like every other Tailwind app. Customizing colors means manually picking hex values and hoping they work together. You end up with blue-500 next to a hand-picked #2D1B69 and it looks like two different design systems crashed into each other.
Role-based tokens. One paste.
Generate a role-based palette on Paletter. Export as a Tailwind v4 @theme block. Paste into your CSS. Done. Five colors that actually work together, with names that describe intent.
Generate. Export. Paste.
Generate
Upload a cover image or build from color theory. Paletter extracts five curated colors with assigned roles.
Export
Hit the Export tab. Choose "Tailwind v4". Copy the @theme block to your clipboard.
Paste
Open your app.css. Paste the @theme block. Your custom colors are now Tailwind utilities.
What you get
@theme {
--color-background: #F5DBC1;
--color-ink: #583819;
--color-accent: #FC6911;
--color-support: #9A7658;
--color-neutral: #D9B89D;
}Paste this into your app.css and Tailwind v4 generates utilities automatically. bg-background, text-ink, border-accent — all available instantly. No config file. No plugin.
Semantic names. Not color names.
Intent over appearance
Not "blue-500" but "accent". Not "gray-900" but "ink". Your Tailwind classes describe what the color does, not what it looks like.
Swap without rewriting
Change your palette and every component updates. No find-and-replace across 200 files. Change the token, not the usage.
Team-readable markup
bg-background text-ink border-support. Anyone reading the markup knows the intent. No decoder ring needed.
Dark mode for free
Semantic tokens map naturally to color modes. Swap the values behind the names. The markup stays identical.
Generate your Tailwind palette
Five colors. Semantic roles. One @theme block. Paste and ship.