Tailwind Color Palette Generator
Learn: Color variations→Pick one brand color and get all eleven Tailwind shades, ready to paste as a v4 @theme block or a v3 tailwind.config.js.
bg-brand-500
11 shades
#F0F5FF
#C6DAFF
#9BBEFF
#71A1FF
#4581FF
#2563EB
#0042D5
#0030A1
#001E70
#000D44
#000630
CSS @theme — no config file needed
/* Generated by PerfectPalette */
@import "tailwindcss";
@theme {
--color-brand-50: #f0f5ff;
--color-brand-100: #c6daff;
--color-brand-200: #9bbeff;
--color-brand-300: #71a1ff;
--color-brand-400: #4581ff;
--color-brand-500: #2563eb;
--color-brand-600: #0042d5;
--color-brand-700: #0030a1;
--color-brand-800: #001e70;
--color-brand-900: #000d44;
--color-brand-950: #000630;
}Adding the palette to your project
Tailwind v4 reads colors from CSS. Paste the @theme block into your main stylesheet and the utilities exist immediately — the custom property name is the contract, so declaring --color-brand-500 is what creates bg-brand-500, text-brand-500, and border-brand-500. There is no config file to touch.
Tailwind v3 keeps colors in JavaScript. Paste the generated object into tailwind.config.js under theme.extend.colors. Using extend rather than theme.colors matters: the latter replaces the default palette outright, so every gray-* and red-* class in your project stops resolving.
Why eleven shades, and why these numbers
Tailwind's built-in colors are published at 50, 100 through 900, and 950. That set is a convention the whole ecosystem is written against — component libraries, templates, and your own past code all assume a color has a 600 to hover to and a 100 to tint a background with.
So a custom color is only a drop-in replacement if it has the same stops. A palette missing 950 forces you to special-case your darkest surfaces; one with only five shades means rewriting every component that references a number you do not have. All eleven are generated here for that reason.
How the shades are built
The ramp is generated in OKLCH, a color space whose lightness matches perception rather than arithmetic. The naive approach — mixing your color with white for the light end and black for the dark end — produces steps that are evenly spaced numerically and visibly uneven, usually with the light shades bunched together and a sharp drop into the dark ones.
Hue is held constant across the whole ramp, which is what stops light shades from drifting: lightening a blue in RGB tends to pull it toward cyan, and darkening a red pulls it toward brown. Where a shade would be more saturated than sRGB can display, chroma is reduced rather than the channels being clipped, so the shade keeps the hue you chose and simply comes out less vivid.
Your color is pinned to step 500 exactly. Everything else is built around it.
Frequently asked questions
- How do I add a custom color to Tailwind?
- In Tailwind v4 you declare it in CSS: put --color-brand-500 inside an @theme block and Tailwind generates bg-brand-500, text-brand-500, and border-brand-500 for you. No config file is involved. In v3 you add a nested object under theme.extend.colors in tailwind.config.js. This page emits whichever form you need, with all eleven shades filled in.
- Why does a Tailwind color need eleven shades?
- Tailwind's own palettes run 50, 100 through 900, and 950 — eleven stops. Components are written against those numbers, so a custom color with a different set will not drop in cleanly: a button styled bg-blue-600 hover:bg-blue-700 needs your color to have a 600 and a 700. Matching the shape is what makes a custom color behave like a built-in one.
- What is the difference between Tailwind v3 and v4 color config?
- v3 keeps colors in JavaScript, in tailwind.config.js under theme.extend.colors, as a nested object of hex strings. v4 moves them into CSS custom properties inside an @theme block, where the property name itself is the contract — declaring --color-brand-500 is what creates the bg-brand-500 utility. v4 needs no config file at all, which is why it is the default here.
- Will my exact brand color be in the palette?
- Yes. The color you pick is pinned to step 500 unchanged, and the other ten shades are built around it. That matters because the whole point of a brand color is that it is a specific value — a generator that shifted it slightly to make a tidier ramp would have defeated the exercise.
- How are the shades generated?
- In OKLCH, not by mixing in white and black. OKLCH lightness is perceptual, so stepping through it evenly produces shades that look evenly spaced, which is not what happens if you lighten and darken in RGB or HSL. Hue is held fixed across the ramp so the light steps do not drift toward a different color, and any shade more saturated than sRGB can display is reduced in chroma rather than clipped.
- Is this free?
- Yes — generate as many palettes as you like and copy either export with no account. Sending a palette to Perfect Palette adds role mapping, WCAG contrast scoring, and the full export set, which is where an account comes in.