Tailwind color generator
Enter your brand color and get a balanced 11-step scale, ready to paste into Tailwind CSS.
How to use this tool, with screenshots →Examples · brand
Increase your revenue by 3x
Our platform helps you close more deals and scale faster than ever.
Categories
GroceriesCafesUtilitiesSportTaxiPharmacies
Budgets
Home renovation72%
Education46%
Health28%
Revenue
$213,000
Pricing plans
Individual$0
Team$99
Enterprise$199
Buttons
Default
Hover
Active
Disabled
Schedule
9:15Weekly team sync
4:00Client pitch rehearsal
7:30Product design review
Stats
71,842Subscribers+4.5%
58.16%Open rate+4.5%
24.57%Click rate+4.5%
Tailwind v4 (@theme in CSS)
/* Tailwind CSS v4 */
@import "tailwindcss";
@theme {
--color-brand-50: #f7f5ff;
--color-brand-100: #ebe8fe;
--color-brand-200: #dbd5fc;
--color-brand-300: #c3b5fd;
--color-brand-400: #a78bfc;
--color-brand-500: #9060fc;
--color-brand-600: #7c3aed;
--color-brand-700: #632dbf;
--color-brand-800: #4b1e95;
--color-brand-900: #371372;
--color-brand-950: #200548;
}
Tailwind v3 (tailwind.config.js)
// tailwind.config.js (Tailwind CSS v3)
module.exports = {
theme: {
extend: {
colors: {
"brand": {
50: "#f7f5ff",
100: "#ebe8fe",
200: "#dbd5fc",
300: "#c3b5fd",
400: "#a78bfc",
500: "#9060fc",
600: "#7c3aed",
700: "#632dbf",
800: "#4b1e95",
900: "#371372",
950: "#200548",
},
},
},
},
};
Frequently asked questions
How is the scale generated?
Tintly keeps your color's hue, then sets each step's lightness and chroma along a curve in the OKLCH color space, similar to how Tailwind's default palette is tuned.
Does this work with Tailwind v4?
Yes. Copy the @theme block into your main CSS file. The tailwind.config.js export is for Tailwind v3 projects. Both are free.