Theme generator

Build a complete shadcn/ui theme - light + dark - from one brand color.

Dashboard preview

Light mode
Revenue
$45,231
+20.1% vs. last month
Subscriptions
+2,350
+180.1% from yesterday
Active users
12,234
+19% this week
Button variants
NewBetaOutlineCritical
Account
AccountPasswordBilling
Name
Email
Notifications
Heads up
Your trial expires in 5 days.
Action required
Two failed login attempts from a new device.
AL
MK
JS
+4
Sessions · 5 sources
Direct
70%
Search
55%
Social
40%
Referral
28%
Email
18%
Publish theme
Publish theme?
Once published, it goes into the community gallery.

Dashboard preview

Dark mode
Revenue
$45,231
+20.1% vs. last month
Subscriptions
+2,350
+180.1% from yesterday
Active users
12,234
+19% this week
Button variants
NewBetaOutlineCritical
Account
AccountPasswordBilling
Name
Email
Notifications
Heads up
Your trial expires in 5 days.
Action required
Two failed login attempts from a new device.
AL
MK
JS
+4
Sessions · 5 sources
Direct
70%
Search
55%
Social
40%
Referral
28%
Email
18%
Publish theme
Publish theme?
Once published, it goes into the community gallery.
Light tokens - click to copy
Dark tokens - click to copy

What is the theme generator?

A theme generator turns one brand color into a complete UI theme: light and dark token sets with backgrounds, surfaces, borders, text and accent colors that meet contrast requirements. This one outputs shadcn/ui, CSS variables and Tailwind formats.

How a brand color becomes a theme

The generator derives the whole theme in OKLCH so lightness steps are even. From the brand color it builds a primary scale, picks neutrals with a hint of the brand hue, sets semantic colors for success, warning and danger, and checks every text-on-surface pair against WCAG AA. The dark theme is derived separately rather than inverted, which keeps saturated colors from glowing on dark backgrounds.

Every token is editable, and the preview shows real components (buttons, cards, inputs, alerts) in both themes before you export.

Theme Generator FAQ

What formats does the theme generator export?

shadcn/ui globals.css, plain CSS custom properties, a Tailwind v4 @theme block, and JSON design tokens (W3C format).

Does the generated theme pass accessibility checks?

Text and surface pairs are generated to meet WCAG AA (4.5:1 for body text). The contrast matrix tool shows every pair if you want to verify or push to AAA.

Can I generate a website color theme from a logo?

Yes. Use Logo to Theme to extract the brand color from a logo file, then send it here to build the full theme.

Related color tools