shadcn/ui components read about twenty CSS variables — --primary,
--muted, --border, a foreground for each surface. You don't have to choose
all of them. Start from a brand colour and a background and derive the rest.
Generate it
Open the free shadcn/ui theme generator.
Paste your colours, one per line: brand: #5e6ad2, background: #ffffff,
foreground: #0f1011. Unnamed colours work too — the first is the brand.
Copy the :root block over the one in your globals.css.
What gets derived
- Foregrounds
- Each
*-foregroundis near-black or white, whichever has more contrast on its fill — so a yellow brand gets dark text and a navy one gets white. - Muted and border
- Blends of your text colour into your background (5% for muted, 12% for border and input), so they're always in your palette's temperature.
- Card and popover
- Your
--surfacecolour if you give one, else the background. - Ring
- Follows the brand, so focus outlines are on-brand.
Dark mode
The generator makes one theme from the colours you paste. For dark mode, paste
your dark palette (dark background, light foreground, the same brand), copy the
result and rename :root to .dark in globals.css.
Tailwind v3 projects
Current shadcn/ui (Tailwind v4) reads full colour values like #5e6ad2 or
oklch(…). Older Tailwind v3 setups wrap variables as hsl(var(--primary)),
which needs bare HSL channels instead. Either switch those to var(--primary)
or move the theme to v4.
Taking a palette from a live site
The Xtractly extension's Design System panel (Alt + F) reads the colours a
page actually paints, ranks them by how much of the page they cover and picks
out the brand, background and surface roles. Saved as a theme, it exports
straight to a shadcn/ui theme. With Use shadcn/ui components on, the Extract
tool also turns captured buttons, inputs and cards into <Button>, <Input>
and <Card> — see the extension.