Shadcn OKLCH Theme Generator
Turn one primary color into a complete light and dark shadcn theme.
Live shadcn preview
Create color system
Semantic tokens for light and dark shadcn interfaces.
Theme CSS
:root {
--radius: 0.625rem;
--background: oklch(0.98 0.005 255);
--foreground: oklch(0.2 0.005 255);
--card: oklch(0.98 0.005 255);
--card-foreground: oklch(0.2 0.005 255);
--popover: oklch(0.98 0.005 255);
--popover-foreground: oklch(0.2 0.005 255);
--primary: oklch(0.486 0.175 277.12);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.92 0.006 255);
--secondary-foreground: oklch(0.16 0 0);
--muted: oklch(0.92 0.006 255);
--muted-foreground: oklch(0.46 0.015 255);
--accent: oklch(0.921 0.038 273.36);
--accent-foreground: oklch(0.16 0 0);
--destructive: oklch(0.58 0.22 25);
--destructive-foreground: oklch(0.99 0 0);
--border: oklch(0.82 0.009 255);
--input: oklch(0.82 0.009 255);
--ring: oklch(0.486 0.175 277.12);
--chart-1: oklch(0.665 0.175 277.12);
--chart-2: oklch(0.585 0.204 277.12);
--chart-3: oklch(0.486 0.175 277.12);
--chart-4: oklch(0.4 0.145 277.12);
--chart-5: oklch(0.318 0.116 277.12);
--sidebar: oklch(0.92 0.006 255);
--sidebar-foreground: oklch(0.2 0.005 255);
--sidebar-primary: oklch(0.486 0.175 277.12);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.921 0.038 273.36);
--sidebar-accent-foreground: oklch(0.16 0 0);
--sidebar-border: oklch(0.82 0.009 255);
--sidebar-ring: oklch(0.486 0.175 277.12);
}
.dark {
--radius: 0.625rem;
--background: oklch(0.2 0.005 255);
--foreground: oklch(0.98 0.005 255);
--card: oklch(0.235 0.006 255);
--card-foreground: oklch(0.98 0.005 255);
--popover: oklch(0.235 0.006 255);
--popover-foreground: oklch(0.98 0.005 255);
--primary: oklch(0.665 0.175 277.12);
--primary-foreground: oklch(0.16 0 0);
--secondary: oklch(0.307 0.009 255);
--secondary-foreground: oklch(0.99 0 0);
--muted: oklch(0.307 0.009 255);
--muted-foreground: oklch(0.727 0.012 255);
--accent: oklch(0.239 0.086 277.12);
--accent-foreground: oklch(0.99 0 0);
--destructive: oklch(0.7 0.19 22);
--destructive-foreground: oklch(0.99 0 0);
--border: oklch(0.381 0.012 255);
--input: oklch(0.381 0.012 255);
--ring: oklch(0.665 0.175 277.12);
--chart-1: oklch(0.665 0.175 277.12);
--chart-2: oklch(0.585 0.204 277.12);
--chart-3: oklch(0.486 0.175 277.12);
--chart-4: oklch(0.4 0.145 277.12);
--chart-5: oklch(0.318 0.116 277.12);
--sidebar: oklch(0.235 0.006 255);
--sidebar-foreground: oklch(0.98 0.005 255);
--sidebar-primary: oklch(0.665 0.175 277.12);
--sidebar-primary-foreground: oklch(0.16 0 0);
--sidebar-accent: oklch(0.239 0.086 277.12);
--sidebar-accent-foreground: oklch(0.99 0 0);
--sidebar-border: oklch(0.381 0.012 255);
--sidebar-ring: oklch(0.665 0.175 277.12);
}Production semantic tokens
The generated theme includes foreground, background, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, chart and sidebar variables for both modes.
Frequently asked questions
What does this generator include?
It generates the complete light and dark shadcn semantic token set, including chart and sidebar colors.
Can I change the neutral palette?
Yes. Choose Slate, Gray, Zinc or Stone and preview the result before copying or downloading CSS.
Are foreground colors checked?
Primary and semantic foregrounds are selected from the generated scale for readable light and dark combinations.