Shadcn Theme Generator
The free shadcn theme builder — generate a full shadcn/ui theme from a single color, accessible light & dark, in OKLCH.
A free online shadcn theme generator: pick one color and get a complete, accessible shadcn/ui theme — every CSS variable for light and dark mode, generated in OKLCH and contrast-checked. Preview it live on real components, then copy the globals.css for Tailwind v4 or v3. Runs in your browser — no signup.
What is a shadcn theme?
A shadcn/ui theme is a set of CSS custom properties — --background, --primary, --muted, --border and about forty more — that shadcn components read to paint themselves. Theming shadcn isn't editing components; it's setting these variables in your globals.css, once for light mode under :root and once for dark mode under .dark.
The catch is that the variables come in linked pairs — every surface needs a readable foreground on top of it — so hand-tuning all of them while keeping the contrast accessible is fiddly. That's exactly what this shadcn theme generator automates: give it one color and it derives the whole coherent, accessible set.
How to generate a shadcn theme
- Pick your primary color in the generator above. It becomes the anchor for the whole palette.
- The generator derives every token — surfaces, foregrounds, accent, muted, destructive, border, ring and the five chart colors — for both light and dark mode, in OKLCH.
- Preview it live on real shadcn components and toggle light/dark to check both.
- Tweak any token you like, then copy the
globals.cssand paste the:rootand.darkblocks into your project.
Tailwind v4 vs v3 output
shadcn/ui moved to Tailwind v4 and OKLCH for its default theme, and that's what this generator emits by default: an @import "tailwindcss" file with :root/.dark variable blocks plus a @theme inline block that wires the tokens to Tailwind color utilities.
Still on Tailwind v3? Switch the output and you'll get the classic HSL channel variables and a matching tailwind.config. Either way the theme drops straight into a shadcn project.
Why generate colors in OKLCH?
OKLCH is a perceptually-uniform color space: its lightness value means the same thing across every hue. That makes it possible to build a palette where a blue, a green and a red all sit at the same visual lightness — the foundation of a balanced theme — and to guarantee readable foregrounds mathematically instead of by trial and error.
It also reaches wider P3 colors on modern displays. The generator works in OKLCH throughout and can still export HSL, RGB or HEX if your toolchain needs them.
Accessible by default
Setting forty CSS variables by hand, you rarely check that every text-on-surface pair is legible. A generated theme can. This tool contrast-checks each foreground against its background — text on the page, on cards, on primary buttons, on muted chips — so the palette meets WCAG AA in both light and dark mode before you ever ship it.
Frequently asked questions
Is this shadcn theme generator free?
Yes. Generating a theme, previewing it live, and copying the globals.css are completely free with no signup. The generator runs entirely in your browser, so you can create as many shadcn themes as you like.
How do I generate a shadcn theme from one color?
Pick a primary color and the generator derives a complete shadcn palette around it — background, foreground, card, muted, accent, destructive, border, ring and chart colors — for both light and dark mode. Every text-on-surface pair is checked for contrast so the result is accessible by default. Then copy the generated CSS variables into your project's globals.css.
Does the theme work with Tailwind v4?
Yes. The generator outputs Tailwind v4 CSS by default — an @import "tailwindcss" file with :root and .dark variable blocks in OKLCH plus a @theme inline block that maps the tokens to Tailwind color utilities. You can also switch the output to Tailwind v3, which emits the classic HSL variables plus a tailwind.config.
What is OKLCH and why use it for a shadcn theme?
OKLCH is a modern, perceptually-uniform color space that shadcn/ui adopted for its default theme. Because lightness is consistent across hues, it makes generating readable, harmonious palettes far more reliable than HSL, and it unlocks wider P3 colors on modern displays. This generator works in OKLCH end to end and can still export HSL, RGB or HEX if you need them.
Are the generated colors accessible?
That is the point of a generated palette. Every foreground/background pair (text on background, on cards, on primary buttons, and so on) is contrast-checked so the theme meets WCAG AA by default in both light and dark mode — something you have to verify by hand when you set 40 CSS variables yourself.
How do I install my theme into a shadcn project?
The fastest way is to copy the generated globals.css and paste the :root and .dark blocks into your project. You can also export the design tokens or use the one-click shadcn CLI command to add the theme's variables directly to your app — no components are overwritten, only the theme tokens.
Does it support dark mode?
Yes. Every theme is generated for both light and dark mode at once, with independent, contrast-checked values for each. Toggle the preview to see exactly how your components look in each mode before you copy the CSS.
In a hurry? Browse ready-made shadcn themes →
Related tools: CSS Gradient Generator · Box Shadow Generator · shadcn Components
