DesignRevision Shadcn Theme Generator

Overview

DesignRevision's Shadcn Theme Generator is a free browser tool that turns a single brand color into a complete shadcn/ui theme. It derives about 40 CSS variables, including background, foreground, card, muted, accent, destructive, border, ring and five chart colors, for both light and dark mode in OKLCH.

Every foreground and background pair is contrast-checked so the palette meets WCAG AA in both modes. The theme previews live on real shadcn components, and the result can be copied as a globals.css, exported as tokens or added with a shadcn CLI command that writes only the theme variables. It runs in the browser with no signup and is part of a larger set of free DesignRevision tools.

Features

• One-color input: A primary color anchors the entire generated palette.
• Light and dark modes: Both are generated at once, each with its own contrast checks.
• WCAG AA contrast: Text on the page, cards, primary buttons and muted chips is checked for legibility.
• Tailwind v4 output: An @import "tailwindcss" file with :root and .dark blocks plus a @theme inline mapping.
• Tailwind v3 option: Classic HSL variables with a matching tailwind.config.
• Export formats: Works in OKLCH and can also export HSL, RGB or HEX.
• Live preview and tweaks: Preview on real components and adjust any token before copying.