Tailwind Color Palette Generator
Turn a base color into a Tailwind palette
Base color
Palette
#3b82f6Placed at 500Select a swatch to copy its value.
Code
@theme {
--color-brand-50: oklch(0.97 0.012 254.604);
--color-brand-100: oklch(0.932 0.028 255.585);
--color-brand-200: oklch(0.882 0.052 254.128);
--color-brand-300: oklch(0.809 0.092 251.813);
--color-brand-400: oklch(0.707 0.145 254.624);
--color-brand-500: oklch(0.623 0.188 259.815);
--color-brand-600: oklch(0.546 0.215 262.881);
--color-brand-700: oklch(0.488 0.213 264.376);
--color-brand-800: oklch(0.424 0.175 265.638);
--color-brand-900: oklch(0.379 0.128 265.522);
--color-brand-950: oklch(0.282 0.08 267.935);
}v4 uses the selected notation; v3 always outputs HEX.
What is Tailwind Color Palette Generator?
Create a palette of 11 shades for Tailwind from a single color. Enter a brand color and get a range from light to dark that keeps the same character.
Copy the result straight into your Tailwind config or CSS.
How to Use
- Enter a base color, or choose one with the picker or "Choose from Tailwind colors".
- Review the palette, then copy a value from a swatch or use "Copy all colors".
- In the code section, set the palette name and notation, choose Tailwind v4 or v3, and copy the code.
Main Settings
Base color
The color the palette starts from. Your color stays in the palette at the closest shade.
Palette name
With primary, you get --color-primary-50 through --color-primary-950 as CSS variables. Spaces, uppercase letters, and symbols are cleaned up automatically: Brand Color becomes brand-color. An empty name falls back to brand.
Notation
- OKLCH: the notation you can use directly in Tailwind v4
- HEX: a common color code for CSS and design tools
Tailwind v4 uses the selected notation; v3 always outputs HEX.
Presets
Choose a base color from the Tailwind color families. Selecting a color bar sets that family's color as the base color.
Use Cases
- Using a brand color with Tailwind classes
- Preparing a light-to-dark set for tokens such as
primaryandaccent - Matching button and background shades from one existing color
Things to Keep in Mind
- Very vivid colors may not keep the same vividness at the lightest and darkest ends
- A color copied as OKLCH may look slightly different on screen. In that case, swatches and HEX are approximations
Last updated:
