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

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

Palette generatorMap a palette to shadcn-style CSS variables for background, foreground, primary, muted, accent and destructive colors.WCAG checkerMap a palette to shadcn-style CSS variables for background, foreground, primary, muted, accent and destructive colors.Image extractorMap a palette to shadcn-style CSS variables for background, foreground, primary, muted, accent and destructive colors.
Can I use this with the main generator?

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