Tailwind Palette Gen

v1.0.0

Generate custom Tailwind CSS color palettes from a base color

Generates a full 11-shade Tailwind CSS colour palette (50–950) from a single hex seed colour, with output in Tailwind config (v3/v4) or CSS custom-property format.

How to use

→Enter a 6-digit hex colour (e.g. #3b82f6) as the seed — it anchors the mid-range of the generated scale.
→Give the palette a descriptive name like 'brand' or 'accent' — this becomes the key in your Tailwind config.
→Switch between Tailwind v3 (CommonJS) and v4 (TypeScript satisfies) config syntax, or choose CSS Variables for token workflows.
→Copy the output directly into your tailwind.config file or stylesheet — no manual conversion needed.

Seed Color

Palette Name

Format

Config Syntax

Preview

50#fef7eb

100#fdedd3

200#fbdca7

300#f9c771

400#f7b13b

500#f59e0a

600#c47e08

700#9d6506

800#764c05

900#533603

950#312002

Generated tailwind.config (v3)

// tailwind.config.js (v3)
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "brand": {
        50: "#fef7eb",
        100: "#fdedd3",
        200: "#fbdca7",
        300: "#f9c771",
        400: "#f7b13b",
        500: "#f59e0a",
        600: "#c47e08",
        700: "#9d6506",
        800: "#764c05",
        900: "#533603",
        950: "#312002",
        },
      },
    },
  },
};