# Theme Builder

> Free shadcn/ui theme generator. Pick a brand colour and radius, preview real components and contrast ratios, and copy OKLCH CSS variables for light and dark mode.

Use it online: https://pixelpapa.com/tools/theme-builder

Choose a brand hue and chroma (or paste a hex), a neutral tint and a corner radius. The builder generates the full shadcn/ui token set in OKLCH for light and dark mode, previews it on real components and checks WCAG contrast before you copy it into globals.css.

## Questions

### How do I change the shadcn/ui theme colours?

shadcn/ui reads colours from CSS variables such as --background, --primary and --border in :root and .dark. Generate a set here and replace those variables in your globals.css; every component picks them up.

### Why does the theme use OKLCH colours?

OKLCH is perceptually uniform, so changing lightness keeps the hue looking the same and contrast is easier to predict. shadcn/ui and Tailwind CSS v4 both use OKLCH by default.