Which shadcn/ui versions does the output support?

The generated block follows the classic HSL variable format used by shadcn/ui with Tailwind CSS v3 and v4 HSL setups. If your project uses the newer oklch format, the variable names stay the same.

Why are colors expressed as three HSL numbers?

shadcn/ui variables store bare HSL channels so Tailwind classes can wrap them with hsl() and apply opacity modifiers. Paste the block exactly as generated.

Does it also style destructive and chart colors?

Destructive is included with sensible defaults. Chart variables are project-specific, so tune them after pasting the core theme.

Can I use the output outside shadcn/ui?

Yes - it is plain CSS. Any Tailwind or CSS setup that defines these variable names will pick the theme up.

shadcn/ui Theme Generator

Free shadcn/ui theme generator. Create complete light and dark HSL CSS variable themes with radius config from one base color. Copy-paste globals.css ready.

Loading tool...

What is shadcn/ui Theme Generator?

The shadcn/ui Theme Generator converts one brand color into the full set of shadcn/ui HSL CSS variables for light and dark modes, plus a radius token. Preview the result live and paste the generated block straight into globals.css.

Key Benefits

Consistent, professional themes without hand-picking twenty colors.
Light and dark modes generated together so they always match.
Live component previews catch issues before you commit.
Copy-paste ready output - zero manual formatting.
Fast enough to iterate through brand palettes in minutes.

Common Use Cases

•Rebranding a shadcn/ui project with a new primary color.
•Starting a new dashboard with a coherent design token set.
•Comparing candidate brand colors in real UI previews.
•Aligning internal tools with corporate design guidelines.

How to Use the shadcn/ui Theme Generator

Pick your brand color: Use the color picker to choose the base color for your primary tokens.
Tune the radius: Slide the corner radius to match your design - 0.5rem is the shadcn default.
Check the previews: Compare buttons and cards in light and dark mode side by side.
Copy into globals.css: Copy the generated block and replace the variables in your globals.css.

Key Features

Complete :root and .dark blocks generated from one base color.
Every shadcn/ui token: background, primary, secondary, muted, accent, ring.
Radius token slider from 0 to 1.5 rem.
Live component previews in both light and dark modes.
Copy the whole globals.css block with one click.
Runs offline - nothing is uploaded, nothing tracked.

Frequently Asked Questions

In-depth guide

shadcn/ui Theme Generator: Build Custom HSL Themes for globals.css in Seconds

Read the full guide →

shadcn/ui Theme Generator

Free shadcn/ui theme generator. Create complete light and dark HSL CSS variable themes with radius config from one base color. Copy-paste globals.css ready.

Base color

Corner radius (rem): 0.5

Light

Card / muted surface preview

Dark

Card / muted surface preview

globals.css

:root {
  --background: 221 40% 97%;
  --foreground: 221 20% 10%;
  --card: 221 40% 97%;
  --card-foreground: 221 20% 10%;
  --popover: 221 40% 97%;
  --popover-foreground: 221 20% 10%;
  --primary: 221 83% 53%;
  --primary-foreground: 221 30% 98%;
  --secondary: 221 30% 94%;
  --secondary-foreground: 221 20% 10%;
  --muted: 221 25% 95%;
  --muted-foreground: 221 15% 38%;
  --accent: 221 35% 93%;
  --accent-foreground: 221 20% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 221 30% 98%;
  --border: 221 20% 89%;
  --input: 221 20% 89%;
  --ring: 221 83% 50%;
  --radius: 0.5rem;
}

.dark {
  --background: 221 25% 8%;
  --foreground: 221 20% 96%;
  --card: 221 25% 8%;
  --card-foreground: 221 20% 96%;
  --popover: 221 25% 8%;
  --popover-foreground: 221 20% 96%;
  --primary: 221 85% 60%;
  --primary-foreground: 221 30% 10%;
  --secondary: 221 20% 16%;
  --secondary-foreground: 221 20% 96%;
  --muted: 221 20% 15%;
  --muted-foreground: 221 15% 65%;
  --accent: 221 25% 18%;
  --accent-foreground: 221 20% 96%;
  --destructive: 0 72% 55%;
  --destructive-foreground: 221 20% 96%;
  --border: 221 15% 20%;
  --input: 221 15% 20%;
  --ring: 221 85% 55%;
  --radius: 0.5rem;
}

About This Tool

The shadcn/ui Theme Generator turns a single base color into a complete shadcn/ui theme: all HSL CSS variables for background, primary, secondary, muted, accent, borders, and rings - in both light and dark modes - plus the border-radius token. Paste the generated block straight into your globals.css and the whole component library follows your brand color. A live preview shows buttons and cards in both modes before you copy anything.

Why Generate a shadcn Theme?

•Hand-editing twenty CSS variables consistently is slow and error-prone.
•One brand color should drive the whole interface, light and dark.
•Proper HSL token relationships keep contrast and hierarchy intact.
•Tuning the radius token matches your design system in seconds.
•The generator is offline and private - no design data leaves the page.

Key Features

✓Complete :root and .dark variable blocks from one base color.
✓All shadcn/ui tokens: background, primary, muted, accent, ring, and more.
✓Adjustable border-radius token from 0 to 1.5 rem.
✓Live light and dark previews of buttons and cards.
✓One-click copy of the ready-to-paste globals.css block.

Loading tool...

What is shadcn/ui Theme Generator?

Key Benefits

Consistent, professional themes without hand-picking twenty colors.
Light and dark modes generated together so they always match.
Live component previews catch issues before you commit.
Copy-paste ready output - zero manual formatting.
Fast enough to iterate through brand palettes in minutes.

Common Use Cases

•Rebranding a shadcn/ui project with a new primary color.
•Starting a new dashboard with a coherent design token set.
•Comparing candidate brand colors in real UI previews.
•Aligning internal tools with corporate design guidelines.

How to Use the shadcn/ui Theme Generator

Pick your brand color: Use the color picker to choose the base color for your primary tokens.
Tune the radius: Slide the corner radius to match your design - 0.5rem is the shadcn default.
Check the previews: Compare buttons and cards in light and dark mode side by side.
Copy into globals.css: Copy the generated block and replace the variables in your globals.css.

Key Features

Complete :root and .dark blocks generated from one base color.
Every shadcn/ui token: background, primary, secondary, muted, accent, ring.
Radius token slider from 0 to 1.5 rem.
Live component previews in both light and dark modes.
Copy the whole globals.css block with one click.
Runs offline - nothing is uploaded, nothing tracked.

Frequently Asked Questions

In-depth guide

shadcn/ui Theme Generator: Build Custom HSL Themes for globals.css in Seconds

Read the full guide →

:root { --background: 221 40% 97%; --foreground: 221 20% 10%; --card: 221 40% 97%; --card-foreground: 221 20% 10%; --popover: 221 40% 97%; --popover-foreground: 221 20% 10%; --primary: 221 83% 53%; --primary-foreground: 221 30% 98%; --secondary: 221 30% 94%; --secondary-foreground: 221 20% 10%; --muted: 221 25% 95%; --muted-foreground: 221 15% 38%; --accent: 221 35% 93%; --accent-foreground: 221 20% 10%; --destructive: 0 84% 60%; --destructive-foreground: 221 30% 98%; --border: 221 20% 89%; --input: 221 20% 89%; --ring: 221 83% 50%; --radius: 0.5rem; } .dark { --background: 221 25% 8%; --foreground: 221 20% 96%; --card: 221 25% 8%; --card-foreground: 221 20% 96%; --popover: 221 25% 8%; --popover-foreground: 221 20% 96%; --primary: 221 85% 60%; --primary-foreground: 221 30% 10%; --secondary: 221 20% 16%; --secondary-foreground: 221 20% 96%; --muted: 221 20% 15%; --muted-foreground: 221 15% 65%; --accent: 221 25% 18%; --accent-foreground: 221 20% 96%; --destructive: 0 72% 55%; --destructive-foreground: 221 20% 96%; --border: 221 15% 20%; --input: 221 15% 20%; --ring: 221 85% 55%; --radius: 0.5rem; }

About This Tool

shadcn/ui Theme Generator

What is shadcn/ui Theme Generator?

Key Benefits

Common Use Cases

How to Use the shadcn/ui Theme Generator

Key Features

Frequently Asked Questions

Lottery Number Generator

Coin Flipper

Random Word Generator

QR Code Generator

Meme Generator

WiFi QR Code Generator

shadcn/ui Theme Generator

About This Tool

Why Generate a shadcn Theme?

Key Features

What is shadcn/ui Theme Generator?

Key Benefits

Common Use Cases

How to Use the shadcn/ui Theme Generator

Key Features

Frequently Asked Questions

Lottery Number Generator

Coin Flipper

Random Word Generator

QR Code Generator

Meme Generator

WiFi QR Code Generator

About This Tool

Why Generate a shadcn Theme?

Key Features