Practical color tool

shadcn Theme Generator

Map a palette to shadcn-style CSS variables for background, foreground, primary, muted, accent and destructive colors.

Open in the main toolBack to tool
EnglishItalianoEspañolFrançaisDeutsch

What this page gives you

  • Use generated shades to assign semantic CSS variables.
  • Keep neutrals separate from brand colors for better component consistency.
  • Check primary foreground and destructive foreground contrast before shipping.

Good for

  • React apps
  • Component libraries
  • CSS variables

How to use it

Palette generatorGenerate accessible color palettes, export CSS, Tailwind, SCSS, JSON, SVG and PNG palette assets, check WCAG contrast and extract colors from images locally.WCAG checkerCheck whether text and background colors meet WCAG AA and AAA contrast ratios. Free, instant, no upload required.Image extractorExtract a dominant color palette from PNG, JPG or WebP images. Processed locally in your browser — nothing uploaded.
Can I use this with the main generator?

Yes. Start from this page, then open the main Chromoforge tool with the same base color and export the palette.

Which variables does a shadcn theme expect?

The paired roles background and foreground, then card, popover, primary, secondary, muted, accent and destructive, each with its own foreground, plus border, input and ring. Every component in the library reads these names, so filling all of them keeps light and dark themes in sync.

Why are shadcn values written without a color function?

The default setup stores bare channel values so Tailwind can compose alpha, as in hsl(var(--primary) / 0.5). If you paste a full hsl() or oklch() string into the variable, opacity utilities break. Recent versions of the library also support full color values, so match whichever convention your project already uses.