Tailwind Theme Builder
Build color palettes and generate tailwind.config.ts output.
Examples
Generate a brand scale
Name: brand
Hex: #3b82f6
Generate scale: onimport type { Config } from 'tailwindcss'
const config: Config = {
theme: {
extend: {
colors: {
brand: {
'50': '#f0f6fe',
'100': '#e2ecfe',
'200': '#bbd4fc',
'300': '#8ab5f9',
'400': '#5090f7',
'500': '#0b64f4',
'600': '#0950c3',
'700': '#073c92',
'800': '#052861',
'900': '#03183a',
'950': '#021027',
},
},
},
},
}
export default config
The builder preserves the rounded hue and saturation of #3b82f6 while applying its fixed lightness scale.
Add one unscaled accent token
Name: accent
Hex: #10b981
Generate scale: offimport type { Config } from 'tailwindcss'
const config: Config = {
theme: {
extend: {
colors: {
accent: '#10b981',
},
},
},
}
export default config
With scale generation disabled, the color is emitted as one direct value under theme.extend.colors.
About this tool
Tailwind Theme Builder creates a TypeScript tailwind.config.ts color extension from editable color names and six-digit hex values. Each color can remain a single token or expand into an 11-step scale from 50 through 950.
When scale generation is enabled, the component converts the selected hex color to rounded HSL, keeps its rounded hue and saturation, and applies fixed lightness values of 97, 94, 86, 76, 64, 50, 40, 30, 20, 12, and 8 percent. The generated colors are converted back to lowercase hex and previewed as swatches.
The output uses Tailwind's TypeScript Config type and places entries under theme.extend.colors. You can add, rename, recolor, scale, or remove entries and copy the complete generated configuration.
How to use
Define a color token
Enter a property name and choose or type a complete six-digit hex color.
Choose single color or scale
Leave Generate scale off for one hex token, or enable it to create shades 50 through 950.
Build the palette
Add more color rows, rename them for your design system, and remove any row you do not need.
Copy the config
Review the generated tailwind.config.ts output and copy it into the appropriate Tailwind project configuration.
Use cases
Bootstrapping a Tailwind palette
Turn a small set of brand hex colors into named configuration entries without hand-writing nested objects.
Prototyping shade ramps
Preview the fixed-lightness scale for a selected hue and saturation before adopting it in a design system.
Creating semantic tokens
Add direct colors such as primary, secondary, accent, success, or warning alongside generated ramps.
Sharing theme configuration
Copy a consistent TypeScript config snippet for review or reuse across Tailwind projects.
Common mistakes
Mistake:Assuming shade 500 is guaranteed to equal the entered hex color.
Fix:Review the generated ramp: it rebuilds every shade at fixed lightness values after rounded HSL conversion, so the 500 value can differ from the input.
Mistake:Using spaces, punctuation, or JavaScript syntax in a color name without checking the generated property syntax.
Fix:Use a valid unquoted property identifier such as brand or primary because the component inserts the name directly into the config.
Mistake:Copying the generated legacy config into a project without checking its Tailwind version and configuration approach.
Fix:Confirm that the target project consumes tailwind.config.ts and theme.extend.colors in the generated form.
Mistake:Entering a partial hex value and expecting a meaningful scale preview.
Fix:Complete all six hexadecimal digits before relying on the HSL conversion and generated shades.
Frequently asked questions
Related guides
References & standards
Related tools
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
Border Radius Generator
Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
Dummy Avatar Generator
Generate unique SVG avatars for mockups and placeholders using various illustration styles