shadcn theme generator.
Pick a brand colour, a grey and a radius. You get the full set of shadcn variables for light and dark, and see them on real components first.
- Free
- No signup
- Runs in your browser
Neutral is pure grey. Brand tint warms or cools the greys toward your colour.
Light: white text on primary, 5.5:1, passes AA.
Dark: near-black text on primary, 4.9:1, passes AA.
Invite your team
They get access to every project.
Paste it over the :root and .dark blocks in your global CSS file.
How it works.
- 1
Pick your brand colour, then a base for the greys and a corner radius.
- 2
Check the preview in light and dark. Text on the primary colour is picked for contrast.
- 3
Copy the CSS, or download theme.css, and paste it over the :root and .dark blocks.
What you get
Every variable a shadcn/ui project reads: background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input and ring, the five chart colours, and the eight sidebar tokens. Each comes in a :root block for light mode and a .dark block, written as OKLCH, the format Tailwind v4 and current shadcn use.
The greys follow shadcn's own lightness steps, so the result looks like a stock shadcn theme with your brand in it. The chart colours are shadcn's default palette turned around the colour wheel to start at your hue.
How the primary text colour is chosen
The tool works out the WCAG contrast of white and of near-black text on your primary colour and keeps whichever is higher. A yellow or lime brand gets dark text, a navy or red one gets white. The ratio is shown next to the controls so you can see whether it passes AA.
In dark mode a very dark brand colour would vanish into the background, so its lightness is raised into a range that stays visible. Hue and chroma stay yours.
Questions, answered.
How do I add a custom theme to shadcn/ui?
Open the global CSS file shadcn created (often globals.css or index.css), replace the :root and .dark blocks with the ones from this generator, and save. Every component reads those variables, so the whole app changes at once.
Does this work with Tailwind v4?
Yes, it's written for it. The values are OKLCH and the optional @theme inline block maps each variable to a Tailwind colour, so bg-primary, text-muted-foreground and the rest work. If shadcn init already set up your project, you only need the :root and .dark blocks.
Can I use it with Tailwind v3?
The :root and .dark blocks are plain CSS variables, so yes, as long as your tailwind.config maps colours to var(--primary) and friends rather than wrapping them in hsl(). Older v3 setups that expect bare HSL numbers need the values converted first.
What's the difference between primary, secondary and accent?
Primary is your brand colour, used on main buttons and badges. Secondary is a quiet grey fill for less important buttons. Accent is the hover and highlight colour in menus and lists. This generator gives accent a faint tint of your brand.
Why do some chart values look more saturated than sRGB allows?
shadcn's own chart colours reach slightly past sRGB, and so do these. Wide-gamut screens show them as written, and browsers map them to the nearest colour everywhere else, so nothing breaks.
More free tools.
All tools- HEX to RGBConvert any colour between HEX, RGB, HSL and OKLCH.
- OG Image GeneratorMake a 1200x630 social share image and the meta tags that go with it.
- Favicon GeneratorEvery favicon file a site needs, plus the HTML tags, in one zip.
- JSON to TypeScriptGenerate TypeScript interfaces or types from a JSON sample.
Your theme drops straight in.
Use this theme in the web app and the admin.. Add an AI chat page that matches the theme.. Let people pay with Stripe.Hype Stack uses the same shadcn-style variables, all in one CSS file, so this output styles every screen of the free starter at once.