Export Color Palettes to Tailwind Config

Paste a JSON palette, set a namespace like brand or accent, and copy a Tailwind colors map plus optional HSL variable scaffold.

Generate Tailwind Config

Palette or Token JSON

Namespace (optional)

Used for CSS variables prefix

tailwind.config.ts

import type { Config } from "tailwindcss"

export default {
  theme: {
    extend: {
      colors: {
        "50": "#EFF6FF",
        "100": "#DBEAFE",
        "200": "#BFDBFE",
        "300": "#93C5FD",
        "400": "#60A5FA",
        "500": "#3B82F6",
        "600": "#2563EB",
        "700": "#1D4ED8",
        "800": "#1E40AF",
        "900": "#1E3A8A"
      }
    }
  }
} satisfies Config

CSS Variables Scaffold

:root {
  --brand-50: #EFF6FF;
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-300: #93C5FD;
  --brand-400: #60A5FA;
  --brand-500: #3B82F6;
  --brand-600: #2563EB;
  --brand-700: #1D4ED8;
  --brand-800: #1E40AF;
  --brand-900: #1E3A8A;
}

Color Preview

100

200

300

400

500

600

700

800

900

Why export to Tailwind

Hand-typing every shade into tailwind.config is slow and easy to mistype. Exporting from a normalized palette keeps names and scales aligned with design tokens and unlocks utilities like bg-brand-500 without scattering raw HEX through components.

What you get

Semantic names and optional namespaces
HSL channel variables for theme tweaks
Copy-paste config ready to merge

Before you export

Normalize with the Color Palette Importer
Validate contrast on key pairs
Prefer families like brand, accent, muted

Start from the Color Palette Importer if sources are messy, then check pairs with the Contrast Checker.

HSL variables and steps

Storing --brand-h, --brand-s, and --brand-l lets you nudge hover/dark states without rewriting every HEX. In Tailwind, reference hsl(var(--brand-h) var(--brand-s) var(--brand-l)) (syntax may vary slightly by Tailwind version and CSS setup).

Paste JSON (object map or name/hex array).
Set a namespace (brand, accent, muted, or your token family).
Copy the config snippet and optional CSS variable scaffold.

Frequently asked questions

Where do I paste the output?

Merge the generated colors into theme.extend.colors in tailwind.config.ts or .js. Put the CSS variable scaffold in your global stylesheet if you export HSL channels.

How do I use the colors in components?

After rebuild, use utilities like bg-brand-500, text-accent-700, or border-muted-300—namespace plus key from your export.

Can I edit the scale afterward?

Yes. Treat the export as a starting point. Tweak HEX or HSL channels in config/CSS as the brand evolves.

Does this work with Tailwind v3 and v4 workflows?

The color map format matches common Tailwind theme extension patterns used in v3+. If you are on Tailwind v4 CSS-first config, adapt the values into your @theme block the same way you would any custom palette.

Which JSON shapes are accepted?

Objects of name→hex, arrays of { name, hex }, or simple hex string arrays (auto-named). Normalize odd exports with the Color Palette Importer first if needed.