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. Pick a seed color

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

  2. Generate the shade scale

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

  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. 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.

Tailwind v4

@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

Tailwind v4 moved theme configuration from a JavaScript config file to a CSS-native @theme directive. Colors are declared as CSS custom properties directly in a stylesheet instead of a theme.extend.colors object, and the default palette itself now ships in OKLCH rather than sRGB hex.

Yes. Tailwind v4's built-in color palette is defined in OKLCH, which is why generating custom shades in the same color space keeps custom tokens visually consistent with the rest of the default scale.

Eleven, 50 through 950, matching the convention Tailwind itself uses for every built-in color. Paletta generates all eleven from a single seed color in one step.

Yes. The @theme block is valid CSS pasted directly into a global stylesheet; no build config changes or JavaScript theme file are required.

Try it on your own colors

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