paletta

INTEGRATION

shadcn theme generator with accessibility

shadcn's convention pairs every background token with a matching foreground token, --primary and --primary-foreground, for example, but nothing in the framework checks that the pairing stays readable. Paletta generates the full paired token set from one seed color and validates every foreground/background pair against WCAG 2.2 before export.

Updated 2026-07-15

How it works

  1. Pick a seed color

    Choose the color that becomes the shadcn --primary token.

  2. Generate paired tokens

    Paletta computes matching foreground tokens, --primary-foreground, --card-foreground, and the rest, for every background token.

  3. Validate every pair

    Each foreground/background combination is checked against WCAG 2.2 and flagged if it drops below AA.

  4. Export the CSS block

    Copy a :root and .dark block ready for globals.css, validated separately for light and dark mode.

Export

shadcn CSS variables

Copy and paste directly into your project.

globals.css

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.546 0.215 262.9);
  --primary-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
}

Frequently asked questions

shadcn's convention pairs every background token with a matching foreground token, but nothing in the framework itself checks that the pairing stays readable. A theme editor that only shows a live preview can produce a foreground/background pair under 3:1 contrast without any warning.

--primary is the background token for a filled surface like a primary button; --primary-foreground is the text or icon color that sits on top of it. shadcn components read both tokens together, so they need to be generated and checked as a pair, not independently.

Yes. Paletta generates both a :root block and a .dark block, validating contrast separately for each, since a pairing that clears AA in light mode does not automatically clear AA in dark mode.

Yes. The exported CSS block follows the same variable names shadcn's CLI scaffolds, so it drops into an existing globals.css in place of the current :root and .dark blocks.

Try it on your own colors

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