Free · No sign-up · shadcn/ui

Your brand colours,as a shadcn theme.

Give it a brand colour and a background — or your whole palette — and get every variable shadcn/ui's components read: foregrounds picked for contrast, muted and border blended from your own colours.

your tokens · colour list · 4 tokens

/* Your brand — shadcn/ui theme. Replace the :root block in globals.css. */
:root {
  --radius: 0.625rem;
  --background: #ffffff;
  --foreground: #0f1011;
  --card: #ffffff;
  --card-foreground: #0f1011;
  --popover: #ffffff;
  --popover-foreground: #0f1011;
  --primary: #5e6ad2;
  --primary-foreground: #ffffff;
  --secondary: #f1f1f1;
  --secondary-foreground: #0a0a0a;
  --muted: #f3f3f3;
  --muted-foreground: #6f7070;
  --accent: #e8e9fb;
  --accent-foreground: #0a0a0a;
  --destructive: #dc2626;
  --border: #e2e2e2;
  --input: #e2e2e2;
  --ring: #5e6ad2;
}

Want these from a live site? The Xtractly extension reads them off any page →

Start from a real site:

Runs in your browser — nothing you paste is uploaded or stored.

live preview · your tokens

Your brand · typeface

System sans

Set in the system font

Styles: 0 styles
Colours: 4 colours

type scale

No sizes yet.

! @ ? / . , $ % & * ( )1 2 3 4 5 6 7 8 9 0

Aa Bb Cc Dd Ee Ff Gg

Primary colour

#5E6AD2

background#FFFFFF

foreground#0F1011

accent#E8E9FB

How to theme shadcn/ui with your brand colours, in three steps.

Paste your colours

One per line, named or not: brand, background, foreground, secondary, accent, surface. The first unnamed colour is treated as the brand. hex, rgb(), hsl() and oklch() all work.

Check the derived values

Anything you didn't name is worked out: each foreground is the more readable of ink or white on its fill, muted and border are blends of your text into your background, the ring follows the brand.

Replace :root in globals.css

Paste the block over the :root in your shadcn globals.css. Values are full colours, which current shadcn/ui (Tailwind v4) reads directly.

Questions

Which colours do I need for a shadcn/ui theme?

A brand colour is enough; a background and text colour make it yours. Everything else (card, popover, secondary, muted, accent, border, input, ring and every foreground) is derived from those when you don't provide it.

Does it generate a dark theme?

It generates one theme from the colours you paste. For dark mode, paste your dark palette (dark background, light foreground), copy the result and rename :root to .dark in globals.css.

Does it work with Tailwind v3 shadcn projects?

The output uses full colour values, which is what current shadcn/ui on Tailwind v4 expects. Older v3 setups that wrap variables in hsl(var(--primary)) need bare HSL channels instead; switch those to var(--primary) or upgrade.

How are foreground colours chosen?

By contrast: each foreground is near-black or white, whichever reads better on its background, so buttons and badges keep readable text whatever brand colour you use.

More free tools, same idea.

Each one runs in your browser and works on tokens you already have.

Guide: theme shadcn/ui with your brand colours Color extractor Website to React Brand palettes & fonts All free tools

A theme from two colours is a start.

Read it off any live site.

Xtractly's extension reads a live site's whole palette by role — brand, surfaces, text — and exports it as a shadcn theme, along with the components it styles.

Add to Chrome, free