aestheticcolours

shadcn/ui

shadcn/ui theme generator

Turn any colour into a ready shadcn theme, light and dark. You pick a colour, you get every token shadcn needs with contrast-correct foregrounds, and you copy the CSS variables straight into your app/globals.css. No guesswork, no broken contrast.

Open the generatorBrowse colours
globals.css — Pacific Blue samplelight + dark
/* shadcn/ui theme - Made with Aesthetic colours - https://colours.aestudio.au */
:root {
  --background: 196 100% 95%;
  --foreground: 188 100% 15%;
  --card: 0 0% 100%;
  --card-foreground: 188 100% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 188 100% 15%;
  --primary: 189 100% 35%;
  --primary-foreground: 240 29% 5%;
  --secondary: 194 97% 88%;
  --secondary-foreground: 188 100% 15%;
  --muted: 194 97% 88%;
  --muted-foreground: 189 100% 35%;
  --accent: 194 97% 88%;
  --accent-foreground: 188 100% 15%;
  --destructive: 189 100% 35%;
  --destructive-foreground: 240 29% 5%;
  --border: 194 97% 77%;
  --input: 194 97% 77%;
  --ring: 189 100% 35%;
  --radius: 0.5rem;
  --chart-1: 189 100% 35%;
  --chart-2: 189 100% 35%;
  --chart-3: 189 100% 35%;
  --chart-4: 189 100% 35%;
  --chart-5: 189 100% 35%;
}

.dark {
  --background: 188 100% 7%;
  --foreground: 196 100% 95%;
  --card: 188 100% 15%;
  --card-foreground: 196 100% 95%;
  --popover: 188 100% 15%;
  --popover-foreground: 196 100% 95%;
  --primary: 189 100% 29%;
  --primary-foreground: 0 0% 100%;
  --secondary: 188 100% 19%;
  --secondary-foreground: 196 100% 95%;
  --muted: 188 100% 19%;
  --muted-foreground: 189 100% 42%;
  --accent: 188 100% 19%;
  --accent-foreground: 196 100% 95%;
  --destructive: 189 100% 29%;
  --destructive-foreground: 0 0% 100%;
  --border: 188 100% 19%;
  --input: 188 100% 19%;
  --ring: 189 100% 29%;
  --radius: 0.5rem;
  --chart-1: 189 100% 42%;
  --chart-2: 189 100% 42%;
  --chart-3: 189 100% 42%;
  --chart-4: 189 100% 42%;
  --chart-5: 189 100% 42%;
}

Live preview

Project settings

A live preview of your theme on real shadcn-style components.

Save changesCancelPreviewDelete
PrimarySecondaryAccent

The same tokens, painted onto shadcn-style buttons, a card, an input and badges. Generate your own colour to see it shift.

How to use it

1

Pick a colour

Open the generator and set your brand colour. You get a full system with brand, status and neutral ramps.

2

Choose shadcn/ui export

In the export panel, switch the format to shadcn/ui. You get light and dark token blocks with a matching radius and chart colours.

3

Paste into globals.css

Drop the :root and .dark blocks into your app/globals.css. Your buttons, cards and charts pick up the theme straight away.

Every token uses the classic shadcn HSL channel format, so it works with the standard hsl(var(--token)) setup across every shadcn release. Primary, secondary, muted, accent, destructive, border, input, ring, the radius and five chart colours are all filled in for both modes.

Aesthetic

Want this theme built into your product?

You bring the colours. You'll get a shadcn-powered interface that uses them properly, designed and built by the team at Aesthetic.