Swatch to Tailwind Config
Convert a palette list into a Tailwind theme colors object.
Palette to Tailwind config
Adding a custom palette to Tailwind means shaping it into a colors object in your config. This tool converts a list of hex swatches into a Tailwind theme colors object, so your brand colors become usable utility classes.
Once pasted into tailwind.config.js, your colors power classes like bg-brand and text-accent across the whole project. Paste your swatches, copy the generated colors object, and drop it into your theme extension.
Copy-ready Tailwind colors
It formats your swatches into a colors object for tailwind.config, ready to paste. Generated in your browser, nothing uploaded.
Frequently asked questions
What does the swatch to Tailwind config converter do?
It formats pasted hex colors into a Tailwind theme.colors snippet.
Which Tailwind config format is this?
The JavaScript config used by Tailwind v3: theme.extend.colors in tailwind.config.js, with keys color1, color2, and so on.
Does it work with Tailwind v4?
Tailwind v4 defines colors in CSS with @theme, such as --color-brand: #0ea5e9;. You can still load a JS config in v4 with @config, or convert the values to @theme variables.
Why use extend instead of colors?
extend adds your colors alongside Tailwind's default palette. Putting them directly under theme.colors replaces the defaults entirely.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.