Theme generator

Pick a palette, start from one brand color or set five colors yourself. Colorit turns them into a full theme with surfaces, borders, button states and readable text, shows it on a real page, and gives you the code for shadcn/ui, Tailwind or plain CSS. Free, no sign-in.

Start from a palette

Or start from one brand color

Your five colorsBackgroundSurfaceTextAccentMuted text

Direction

Text on background 11.1:1
Muted text 4.5:1
Button text 4.5:1

This is Colorit's example site. See this theme on your real website →

:root {
  --background: #fcf3ec;
  --foreground: #492f2b;
  --card: #faf5f2;
  --card-foreground: #492f2b;
  --popover: #faf5f2;
  --popover-foreground: #492f2b;
  --primary: #bc634b;
  --primary-foreground: #0e120e;
  --primary-hover: #c47661;
  --primary-pressed: #cb8573;
  --secondary: #edddd0;
  --secondary-foreground: #492f2b;
  --muted: #edddd0;
  --muted-foreground: #765e54;
  --accent: #f4e2d9;
  --accent-foreground: #9c523e;
  --destructive: #da2626;
  --destructive-foreground: #ffffff;
  --border: #d1bfb4;
  --input: #9d8b83;
  --ring: #bc634b;
  --inverse: #2e2721;
  --inverse-foreground: #fcf3ec;
  --radius: 0.625rem;
}

What the theme includes

Background, surface and raised card colors, with text colors checked for contrast on each.
Primary button colors with hover and pressed states, a tint for highlights, borders and focus rings.
Variables named the way shadcn/ui and Tailwind expect, so you can paste them into globals.css or your Tailwind config.

Want it on your own website?

The generator shows the theme on Colorit's example site. To see it on your real pages, capture your site in the studio: 3 captures are free. With Pro you also get a change map of what your page uses, a prompt for Cursor, Claude Code, Lovable, Bolt or v0, and saved projects with review links.

Browse 48 website color palettes · See pricing