Theme Editor

Generate and customize shadcn/ui themes with OKLCH color variables

Build custom shadcn/ui themes using OKLCH color space. Pick a preset, tweak individual color variables, preview the result live, and export production-ready CSS for Tailwind or vanilla projects. You can also extract a palette from a screenshot using k-means clustering.

Preset

Mode

Radius: 0.63rem

Preview

Card Title

Card description text using muted-foreground.

primarysecondarydestructive

Muted

Accent

Charts:

Border

Ring

Related Tools

Color Converter Convert between hex, RGB, HSL, and OKLCH Color Palette Generator Generate harmonious color palettes from a base color Contrast Checker Check WCAG AA/AAA contrast ratios Gradient Generator Visual gradient builder with CSS output

Get weekly dev tools and tips