Theme tools
Free utilities for building, converting and checking shadcn/ui themes. Everything runs in your browser.
Theme switcher builder
Pick several shadcn/ui themes and install them all at once, with a ready-made theme picker, a hook and a no-flash script, using a single shadcn CLI command.
Tailwind v3 → v4 theme converter
Paste a Tailwind v3 shadcn/ui globals.css with HSL variables and get Tailwind v4 CSS with OKLCH colors, @theme inline mappings and chart and sidebar tokens.
OKLCH color converter
Convert hex, HSL and RGB colors to OKLCH, and back, for Tailwind v4 and shadcn/ui. Convert one color or a whole list of CSS variables at once.
Theme contrast checker
Check every text color in a shadcn/ui theme against WCAG 2 contrast in light and dark mode, then fix failing pairs automatically while keeping your theme's colors.
Image to theme
Upload a logo, screenshot or photo and get a complete shadcn/ui theme built from its colors, with accessible light and dark palettes, ready to export.
Compare themes
Preview two shadcn/ui themes next to each other on the same components, in light or dark mode, and see exactly which tokens differ.
Color scale generator
Generate a Tailwind-style 50–950 color scale in OKLCH from any brand color, and copy it as Tailwind v4 @theme variables for use alongside your shadcn/ui theme.