Palettra

Tailwind CSS v4

Build an OKLCH palette that is ready for Tailwind v4

Start with one color, tune the complete scale in a real interface, and copy CSS-first theme variables directly into your project.

  • Eleven perceptually tuned shades from 50 through 950
  • CSS-first @theme output using OKLCH values
  • UI previews and visible WCAG contrast grades before export
Generate a Tailwind v4 palette

Tailwind v4 output

@theme {
  --color-primary-50: oklch(0.97 0.02 292);
  --color-primary-500: oklch(0.55 0.19 292);
  --color-primary-950: oklch(0.22 0.08 292);
}

Frequently asked questions

Does this use Tailwind v4 syntax?

Yes. The v4 export is a CSS @theme block whose --color-* variables generate Tailwind color utilities.

Can I still export for Tailwind v3?

Yes. The same palette can be exported as a v3 theme.extend.colors configuration.