Skip to content
Build a color system

shadcn/ui theme generator

Enter one brand color and get a complete shadcn/ui theme for light and dark mode, with every text and background pair checked for contrast.

One brand color in. A complete light and dark UI color system out.

How it works

  1. Enter your brand color. Any hex, rgb, hsl, oklch, or color name works.
  2. Look at the live preview and the accessibility results for light and dark mode.
  3. Open the shadcn/ui export and copy it. Replace the color variables and the @theme inline block in your globals.css with it.

Questions

What does the shadcn/ui export contain?

The color variables shadcn/ui components read (background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, the chart colors, and the sidebar colors), for light and for dark mode. The file says which values are derived and which tokens are extra.

Will my brand color change?

Your exact color is kept for logos and decoration. Where text must stay readable, buttons use a slightly adjusted variant, and the builder tells you why.

Does it work with dark mode?

Yes. The export has light values in :root and dark values in .dark. Add the “dark” class to the html element to switch.

Is my color sent anywhere?

No. Everything is worked out in your browser.