Tailwind Color Generator
Generate a full Tailwind CSS-style 50-950 shade scale from any base color. Output as ready-to-paste tailwind.config.js snippet or CSS variables. Uses the same lightness curve as Tailwind's built-in palettes.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#F0F6FE",
100: "#E2ECFE",
200: "#C0D7FC",
300: "#94BBFA",
400: "#5995F7",
500: "#1A6DF4",
600: "#0A58D7",
700: "#0848B0",
800: "#063889",
900: "#042862",
950: "#03183B",
}
}
}
}
};:root {
--brand-50: #F0F6FE;
--brand-100: #E2ECFE;
--brand-200: #C0D7FC;
--brand-300: #94BBFA;
--brand-400: #5995F7;
--brand-500: #1A6DF4;
--brand-600: #0A58D7;
--brand-700: #0848B0;
--brand-800: #063889;
--brand-900: #042862;
--brand-950: #03183B;
}About Tailwind Color Generator
Tailwind CSS's built-in color palettes (blue, red, emerald, etc.) each ship with 11 shades from 50 to 950 following a specific lightness curve. To add a custom brand color to Tailwind, you need to produce the same 11 shades. This tool generates them mathematically from any base color, formatted as a ready-to-paste tailwind.config.js snippet.
The output includes both the Tailwind config format (colors.brand.500) and CSS variable format (--brand-500) — pick whichever fits your project setup. Modern Tailwind v3+ supports both patterns. Useful for adding your brand color to a Tailwind project, quickly exploring color options for a design system, and generating shade scales for design docs or Figma libraries.
How to Use
Pick a base color — usually your brand's primary color.
Set the color name (used in the Tailwind config as colors.name.500, etc.).
The tool generates 11 shades matching Tailwind's palette convention.
Copy the Tailwind config snippet and paste into your tailwind.config.js theme.extend.colors, OR use the CSS variables version for a framework-agnostic setup.
Frequently Asked Questions
How does this compare to Tailwind's built-in palettes?
Tailwind ships hand-tuned palettes (blue, red, green, etc.) that don't follow strict math — they've been tweaked for optical uniformity. This tool uses a mathematical HSL scale that's close but not identical. For maximum polish, hand-tune the middle values (400-700) after generation.
Should I use the config snippet or CSS variables?
Config snippet: purest Tailwind approach, works with all Tailwind features. CSS variables: better for theming (light/dark mode swap), works outside Tailwind too. Modern Tailwind (v3+) supports both — use whichever fits your project setup.
Why don't the shades look identical to the color picker?
The color picker sets the L (lightness) exactly. When we generate the scale, only step 500 is at your input's lightness — the others are at fixed points. Set your input to be your ideal 500 shade for the most natural result.