Turning a brand’s color palette — usually a list of hex codes from a design file — into a usable Tailwind config means typing out the same values twice: once as CSS custom properties, once as a JS config object. This tool does both at once.
What Is Colors to Tailwind Config?
Colors to Tailwind Config is one of the tools in WebdevToolbox’s Color Tools category. Paste a list of named or bare HEX/RGB colors and get both a Tailwind v4 @theme CSS block and a legacy v3 tailwind.config.js theme.extend.colors object, ready to paste into your project.
How to Use It
- Open the tool at /tools/colors-to-tailwind.
- Paste one color per line, either as
name: #hexor a bare#hex/rgb(...)value. - Preview the parsed colors as swatches below the input to confirm they were read correctly.
- Copy whichever config format — v4
@themeor v3tailwind.config.js— matches your project’s Tailwind version.
Key Features
- Both Tailwind v3 and v4 output — generated side by side from the same input, since both are still in active use.
- Flexible input format — named colors (
brand: #6366f1) or bare values that get auto-namedcolor-1,color-2, and so on. - Live swatch preview — see each parsed color’s actual rendered value next to its generated key.
- 100% private — parsing and generation run entirely in your browser.
When to Use Colors to Tailwind Config
- Setting up a new project’s design tokens from a brand palette.
- Migrating a Tailwind v3 color config to v4’s
@themesyntax (or vice versa). - Quickly turning a handful of one-off hex values into named, reusable classes.
Try It Now
Open Colors to Tailwind Config directly from anywhere on the site using ⌘K and typing the tool name.
Part of the Color Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.