Tailwind Generator

Tailwind theme extension snippets.

Randomize a palette, pick each swatch, or build a harmony from a base color — then export Tailwind tokens.

Palette builder

Pick colors or randomize

Generate from a base color

Base

Harmony

Token name

Export

Developer code

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-1': '#e11d48',
        'brand-2': '#db2777',
        'brand-3': '#c026d3',
        'brand-4': '#f59e0b',
        'brand-5': '#111827',
      }
    }
  }
}