Skip to content
ChromaBrew

shadcn/ui theme generator

Build a complete shadcn/ui theme in current oklch format from one brand color — light and dark modes, charts and sidebar tokens included.

shadcn-theme.css

/*
  Design system #47003A — shadcn/ui theme
  Source: #47003a
  Paste into your global stylesheet (Tailwind v4 + shadcn/ui).
*/
:root {
  --background: oklch(0.994 0.004 337.4);
  --foreground: oklch(0.186 0.027 338.8);
  --card: oklch(0.996 0.002 345.2);
  --card-foreground: oklch(0.186 0.027 338.8);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.186 0.027 338.8);
  --primary: oklch(0.27 0.119 337.9);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.649 0.063 158.7);
  --secondary-foreground: oklch(0.205 0.018 339);
  --muted: oklch(0.973 0.012 337.5);
  --muted-foreground: oklch(0.426 0.024 339.4);
  --accent: oklch(0.39 0.119 337.8);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.584 0.16 24.8);
  --border: oklch(0.9 0.013 337.6);
  --input: oklch(0.9 0.013 337.6);
  --ring: oklch(0.27 0.119 337.9);
  --sidebar: oklch(0.967 0.012 337.5);
  --sidebar-foreground: oklch(0.186 0.027 338.8);
  --sidebar-primary: oklch(0.27 0.119 337.9);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.973 0.012 337.5);
  --sidebar-accent-foreground: oklch(0.186 0.027 338.8);
  --sidebar-border: oklch(0.925 0.009 341.8);
  --sidebar-ring: oklch(0.27 0.119 337.9);
  --chart-1: oklch(0.27 0.119 337.9);
  --chart-2: oklch(0.269 0.063 158.2);
  --chart-3: oklch(0.36 0.119 338.3);
  --chart-4: oklch(0.36 0.085 157.6);
  --chart-5: oklch(0.202 0.089 337.8);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.148 0.011 341.7);
  --foreground: oklch(0.944 0.014 336.2);
  --card: oklch(0.196 0.012 338.5);
  --card-foreground: oklch(0.944 0.014 336.2);
  --popover: oklch(0.227 0.012 338.3);
  --popover-foreground: oklch(0.944 0.014 336.2);
  --primary: oklch(0.605 0.122 338.1);
  --primary-foreground: oklch(0.166 0.016 336.9);
  --secondary: oklch(0.319 0.062 157.8);
  --secondary-foreground: oklch(0.939 0.019 157.9);
  --muted: oklch(0.171 0.01 341.5);
  --muted-foreground: oklch(0.72 0.012 339.4);
  --accent: oklch(0.609 0.119 338.3);
  --accent-foreground: oklch(0.166 0.016 336.9);
  --destructive: oklch(0.75 0.151 24.7);
  --border: oklch(0.301 0.011 338);
  --input: oklch(0.301 0.011 338);
  --ring: oklch(0.605 0.122 338.1);
  --sidebar: oklch(0.178 0.013 338.6);
  --sidebar-foreground: oklch(0.944 0.014 336.2);
  --sidebar-primary: oklch(0.605 0.122 338.1);
  --sidebar-primary-foreground: oklch(0.166 0.016 336.9);
  --sidebar-accent: oklch(0.171 0.01 341.5);
  --sidebar-accent-foreground: oklch(0.944 0.014 336.2);
  --sidebar-border: oklch(0.263 0.009 341);
  --sidebar-ring: oklch(0.605 0.122 338.1);
  --chart-1: oklch(0.27 0.119 337.9);
  --chart-2: oklch(0.269 0.063 158.2);
  --chart-3: oklch(0.36 0.119 338.3);
  --chart-4: oklch(0.36 0.085 157.6);
  --chart-5: oklch(0.202 0.089 337.8);
  --radius: 0.625rem;
}

How to use this tool

  1. Enter your brand color.
  2. A complete shadcn/ui theme is generated in the current oklch convention — light and dark blocks, chart and sidebar variables included.
  3. Paste it into your global stylesheet in a Tailwind v4 + shadcn/ui project.

Frequently asked questions

Does it output the current shadcn/ui token format?
Yes — themes are emitted in oklch() with the current token set including chart-1…5 and sidebar variables, matching what recent shadcn/ui projects expect.
Do I get both light and dark themes?
Every generation produces a matched .root and .dark pair with accessible foregrounds, so switching modes never breaks contrast.
How do I apply the theme?
Paste the CSS into your global stylesheet (e.g. globals.css). The variables override shadcn's defaults everywhere — buttons, cards, dialogs and charts pick them up automatically.

Related tools