Colors to Tailwind Config
NewGenerate a Tailwind color configuration block from a list of HEX or RGB colors.
Colors to Tailwind
Build a Tailwind color config
Paste one color per line as name: #hex (or bare #hex/rgb(...) values, which get auto-named color-1, color-2, …) and get a ready-to-paste Tailwind v4 @theme block plus a legacy v3 theme.extend.colors object.
Frequently Asked Questions
What input format does this expect?
One color per line, either name: #hex (or rgb(...)) for a named token, or a bare color value on its own line, which gets auto-named color-1, color-2, and so on in the order it appears.
Does this generate both Tailwind v3 and v4 syntax?
Yes — it outputs a Tailwind v4 @theme CSS block (--color-name: value;) and a legacy v3 tailwind.config.js theme.extend.colors object side by side, since both are still in active use.
What happens if I use the same color name twice?
Only the first occurrence of a given name is kept; later duplicates with the same name are silently ignored so the output config doesn't have colliding keys.
Are color names sanitized for use as Tailwind keys?
Yes — names are lowercased and any character that isn't a letter, number, or hyphen is replaced with a hyphen, since Tailwind color keys need to work as CSS custom-property and utility-class suffixes.
Can I preview the colors before copying the config?
Yes — a row of small swatches renders below the input, showing each parsed color's actual value next to its generated name so you can sanity-check the parsing before copying either output.