paletta
INTEGRATION

Tailwind v4 color palette generator

Tailwind v4 moved theme configuration out of a JavaScript config file and into CSS itself, via the @theme directive. Paletta generates a full 50 to 950 shade scale from one seed color in OKLCH, the same color space Tailwind v4's own default palette uses, then exports it as a @theme block.

Updated 2026-07-15

How it works

  1. 1

    Pick a seed color

    Enter a single hex value or brand color as the starting point for the scale.

  2. 2

    Generate the shade scale

    Paletta computes eleven steps, 50 through 950, in OKLCH for perceptual uniformity across the scale.

  3. 3

    Validate contrast

    WCAG 2.2 and APCA ratios are checked against white and black before export, so a low-contrast step surfaces early.

  4. 4

    Export the @theme block

    Copy a ready-to-paste Tailwind v4 CSS block with --color-* custom properties, no JavaScript config file required.

EXPORT

@theme block

Copy and paste directly into your project.

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-300: #93c5fd;
  --color-primary-500: #2563eb;
  --color-primary-600: #1d4ed8;
  --color-primary-700: #1e40af;
  --color-primary-900: #1e3a8a;
}

Frequently asked questions

Related integrations

generate an accessible shadcn theme

Generate a shadcn/ui theme with every foreground and background token validated for WCAG contrast, not just previewed against live components.

export W3C DTCG design tokens

Export a palette in the W3C Design Tokens Community Group JSON format, the interoperable spec Style Dictionary and Tokens Studio both read.

Try it on your own colors

Generate a validated palette, then export it in the format above.

Generate a Tailwind v4 theme