All tools
Generate a shadcn/ui theme from an image
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.
Your theme will appear here. Images are processed in your browser and never uploaded.
How it works
- 1
Drop in an image. It's analyzed in your browser and never uploaded.
- 2
The dominant colors are found by clustering pixels in the perceptual OKLab color space, and the most brand-like color becomes your primary.
- 3
Pick a different swatch or harmony if you like, then copy the CSS or open the theme in the editor.
FAQ
What images work best?
Logos and brand assets with a clear main color. Busy photos work too: you'll get a palette of their dominant tones to choose from.
Are text colors accessible?
Yes. Foreground colors are chosen by measured contrast against each surface.
More tools
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.
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.