Tailwind Color Palette Generator
Turn one color into a full 50 to 950 Tailwind CSS scale, ready to paste as a v4 @theme, a v3 config or CSS variables. Runs entirely in your browser. Nothing is sent to any server.
Used as bg-brand-500, text-brand-700...
Your color is kept exactly at 600, the step whose lightness matches it best.
@theme {
--color-brand-50: #f1f5fe;
--color-brand-100: #dfe8fc;
--color-brand-200: #c3d4f9;
--color-brand-300: #99b6f6;
--color-brand-400: #6b95f1;
--color-brand-500: #457aee;
--color-brand-600: #2563eb;
--color-brand-700: #1555e2;
--color-brand-800: #1147bc;
--color-brand-900: #0e3a9b;
--color-brand-950: #092563;
}What is a Tailwind color scale?
Tailwind CSS names every color as a scale of eleven steps, from 50 (almost white) to 950 (almost black), and utilities like bg-blue-100 or text-blue-700 pick a step. A custom brand color needs the same eleven steps to fit in. This generator places your color at the step whose lightness matches it, so it's kept exactly, then builds the lighter and darker steps along the same lightness curve as Tailwind's own palette, keeping the hue and saturation. It writes the result for Tailwind v4's @theme, a v3 config file, or plain CSS variables.
Examples
Registering the generated scale and using it:
@import "tailwindcss";
@theme {
--color-brand-500: #457aee;
--color-brand-600: #2563eb;
}// tailwind.config.js
theme: { extend: { colors: { brand: { 500: "#457aee", 600: "#2563eb" } } } }<button class="bg-brand-600 text-white hover:bg-brand-700">
Save
</button>.button {
background: var(--brand-600);
border-color: var(--brand-700);
}Use Cases
Adding a brand color to Tailwind
Turn the one HEX value from a style guide into a full scale, so bg-brand-50 through bg-brand-950 work like any built-in color.
Hover, focus and disabled states
Use neighboring steps for interaction states, such as 600 for a button and 700 on hover, without picking each shade by hand.
Dark mode
Swap light and dark steps between themes, for example 50 backgrounds with 900 text in light mode and the reverse in dark mode.
Design tokens outside Tailwind
Export the scale as CSS variables to use the same 50 to 950 convention in any stylesheet or component library.