OKLCH Studio

OKLCH Studio · shadcn/ui base colour

shadcn/ui Mauve theme: OKLCH CSS variables, hex & contrast

shadcn/ui Mauve: primary #1d161e light / #e7e4e7 dark (oklch(0.212 0.019 322.12)). All 22 checked text/background pairs meet WCAG AA 4.5:1. Copy the full light and dark token set as OKLCH, @theme mapping or hex.

Mauve is a base colour: it defines the complete token set for light and dark mode. Source: shadcn/ui (MIT, © 2023 shadcn); all themes.

Preview

Card title

Muted description text on the card.

PrimarySecondaryAccentDestructive

Muted block with input border

light

Card title

Muted description text on the card.

PrimarySecondaryAccentDestructive

Muted block with input border

dark

light mode tokens

Mauve light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.145 0.008 326)#0c090cYes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.145 0.008 326)#0c090cYes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.145 0.008 326)#0c090cYes
--primaryoklch(0.212 0.019 322.12)#1d161eYes
--primary-foregroundoklch(0.985 0 0)#fafafaYes
--secondaryoklch(0.96 0.003 325.6)#f3f1f3Yes
--secondary-foregroundoklch(0.212 0.019 322.12)#1d161eYes
--mutedoklch(0.96 0.003 325.6)#f3f1f3Yes
--muted-foregroundoklch(0.542 0.034 322.5)#79697bYes
--accentoklch(0.96 0.003 325.6)#f3f1f3Yes
--accent-foregroundoklch(0.212 0.019 322.12)#1d161eYes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.922 0.005 325.62)#e7e4e7Yes
--inputoklch(0.922 0.005 325.62)#e7e4e7Yes
--ringoklch(0.711 0.019 323.02)#a89ea9Yes
--chart-1oklch(0.865 0.012 325.68)#d7d0d7Yes
--chart-2oklch(0.542 0.034 322.5)#79697bYes
--chart-3oklch(0.435 0.029 321.78)#594c5bYes
--chart-4oklch(0.364 0.029 323.89)#463947Yes
--chart-5oklch(0.263 0.024 320.12)#2a212cYes
--sidebaroklch(0.985 0 0)#fafafaYes
--sidebar-foregroundoklch(0.145 0.008 326)#0c090cYes
--sidebar-primaryoklch(0.212 0.019 322.12)#1d161eYes
--sidebar-primary-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-accentoklch(0.96 0.003 325.6)#f3f1f3Yes
--sidebar-accent-foregroundoklch(0.212 0.019 322.12)#1d161eYes
--sidebar-borderoklch(0.922 0.005 325.62)#e7e4e7Yes
--sidebar-ringoklch(0.711 0.019 323.02)#a89ea9Yes

dark mode tokens

Mauve dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.145 0.008 326)#0c090cYes
--foregroundoklch(0.985 0 0)#fafafaYes
--cardoklch(0.212 0.019 322.12)#1d161eYes
--card-foregroundoklch(0.985 0 0)#fafafaYes
--popoveroklch(0.212 0.019 322.12)#1d161eYes
--popover-foregroundoklch(0.985 0 0)#fafafaYes
--primaryoklch(0.922 0.005 325.62)#e7e4e7Yes
--primary-foregroundoklch(0.212 0.019 322.12)#1d161eYes
--secondaryoklch(0.263 0.024 320.12)#2a212cYes
--secondary-foregroundoklch(0.985 0 0)#fafafaYes
--mutedoklch(0.263 0.024 320.12)#2a212cYes
--muted-foregroundoklch(0.711 0.019 323.02)#a89ea9Yes
--accentoklch(0.263 0.024 320.12)#2a212cYes
--accent-foregroundoklch(0.985 0 0)#fafafaYes
--destructiveoklch(0.704 0.191 22.216)#ff6467No — hex is clipped
--borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--inputoklch(1 0 0 / 15%)#ffffff (15% alpha)Yes
--ringoklch(0.542 0.034 322.5)#79697bYes
--chart-1oklch(0.865 0.012 325.68)#d7d0d7Yes
--chart-2oklch(0.542 0.034 322.5)#79697bYes
--chart-3oklch(0.435 0.029 321.78)#594c5bYes
--chart-4oklch(0.364 0.029 323.89)#463947Yes
--chart-5oklch(0.263 0.024 320.12)#2a212cYes
--sidebaroklch(0.212 0.019 322.12)#1d161eYes
--sidebar-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-primaryoklch(0.488 0.243 264.376)#1447e6Yes
--sidebar-primary-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-accentoklch(0.263 0.024 320.12)#2a212cYes
--sidebar-accent-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.542 0.034 322.5)#79697bYes

Contrast audit (WCAG 2)

22 of 22 checked pairs meet AA 4.5:1. Pairs with a translucent side are skipped. A suggested fix keeps hue and chroma and moves the foreground's lightness to the nearest AA value, using the same logic as the contrast checker.

light mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#0c090c on #ffffff19.81:1106PassPassPair page →
card-foreground on card#0c090c on #ffffff19.81:1106PassPassPair page →
popover-foreground on popover#0c090c on #ffffff19.81:1106PassPassPair page →
primary-foreground on primary#fafafa on #1d161e16.96:1-103PassPass
secondary-foreground on secondary#1d161e on #f3f1f315.75:197PassPass
muted-foreground on muted#79697b on #f3f1f34.53:167PassPass
muted-foreground on background#79697b on #ffffff5.09:175PassPassPair page →
accent-foreground on accent#1d161e on #f3f1f315.75:197PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#0c090c on #fafafa18.98:1103PassPass
sidebar-primary-foreground on sidebar-primary#fafafa on #1d161e16.96:1-103PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#fafafa on #0c090c18.98:1-104PassPass
card-foreground on card#fafafa on #1d161e16.96:1-103PassPass
popover-foreground on popover#fafafa on #1d161e16.96:1-103PassPass
primary-foreground on primary#1d161e on #e7e4e714.04:189PassPass
secondary-foreground on secondary#fafafa on #2a212c14.87:1-102PassPass
muted-foreground on muted#a89ea9 on #2a212c6.01:1-49PassPass
muted-foreground on background#a89ea9 on #0c090c7.66:1-51PassPass
accent-foreground on accent#fafafa on #2a212c14.87:1-102PassPass
destructive on background#ff6467 on #0c090c6.85:1-47PassPass
sidebar-foreground on sidebar#fafafa on #1d161e16.96:1-103PassPass
sidebar-primary-foreground on sidebar-primary#fafafa on #1447e66.54:1-84PassPass

Copy code

shadcn/ui v4 globals.css (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0.008 326);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0.008 326);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0.008 326);
  --primary: oklch(0.212 0.019 322.12);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.96 0.003 325.6);
  --secondary-foreground: oklch(0.212 0.019 322.12);
  --muted: oklch(0.96 0.003 325.6);
  --muted-foreground: oklch(0.542 0.034 322.5);
  --accent: oklch(0.96 0.003 325.6);
  --accent-foreground: oklch(0.212 0.019 322.12);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0.005 325.62);
  --input: oklch(0.922 0.005 325.62);
  --ring: oklch(0.711 0.019 323.02);
  --chart-1: oklch(0.865 0.012 325.68);
  --chart-2: oklch(0.542 0.034 322.5);
  --chart-3: oklch(0.435 0.029 321.78);
  --chart-4: oklch(0.364 0.029 323.89);
  --chart-5: oklch(0.263 0.024 320.12);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0.008 326);
  --sidebar-primary: oklch(0.212 0.019 322.12);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.96 0.003 325.6);
  --sidebar-accent-foreground: oklch(0.212 0.019 322.12);
  --sidebar-border: oklch(0.922 0.005 325.62);
  --sidebar-ring: oklch(0.711 0.019 323.02);
}

.dark {
  --background: oklch(0.145 0.008 326);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.212 0.019 322.12);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.212 0.019 322.12);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0.005 325.62);
  --primary-foreground: oklch(0.212 0.019 322.12);
  --secondary: oklch(0.263 0.024 320.12);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.263 0.024 320.12);
  --muted-foreground: oklch(0.711 0.019 323.02);
  --accent: oklch(0.263 0.024 320.12);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.542 0.034 322.5);
  --chart-1: oklch(0.865 0.012 325.68);
  --chart-2: oklch(0.542 0.034 322.5);
  --chart-3: oklch(0.435 0.029 321.78);
  --chart-4: oklch(0.364 0.029 323.89);
  --chart-5: oklch(0.263 0.024 320.12);
  --sidebar: oklch(0.212 0.019 322.12);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.263 0.024 320.12);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.542 0.034 322.5);
}

Tailwind v4 @theme inline mapping

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

Hex fallback (for tools without OKLCH support)

:root {
  --background: #ffffff;
  --foreground: #0c090c;
  --card: #ffffff;
  --card-foreground: #0c090c;
  --popover: #ffffff;
  --popover-foreground: #0c090c;
  --primary: #1d161e;
  --primary-foreground: #fafafa;
  --secondary: #f3f1f3;
  --secondary-foreground: #1d161e;
  --muted: #f3f1f3;
  --muted-foreground: #79697b;
  --accent: #f3f1f3;
  --accent-foreground: #1d161e;
  --destructive: #e7000b;
  --border: #e7e4e7;
  --input: #e7e4e7;
  --ring: #a89ea9;
  --chart-1: #d7d0d7;
  --chart-2: #79697b;
  --chart-3: #594c5b;
  --chart-4: #463947;
  --chart-5: #2a212c;
  --radius: 0.625rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #0c090c;
  --sidebar-primary: #1d161e;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f3f1f3;
  --sidebar-accent-foreground: #1d161e;
  --sidebar-border: #e7e4e7;
  --sidebar-ring: #a89ea9;
}

.dark {
  --background: #0c090c;
  --foreground: #fafafa;
  --card: #1d161e;
  --card-foreground: #fafafa;
  --popover: #1d161e;
  --popover-foreground: #fafafa;
  --primary: #e7e4e7;
  --primary-foreground: #1d161e;
  --secondary: #2a212c;
  --secondary-foreground: #fafafa;
  --muted: #2a212c;
  --muted-foreground: #a89ea9;
  --accent: #2a212c;
  --accent-foreground: #fafafa;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #79697b;
  --chart-1: #d7d0d7;
  --chart-2: #79697b;
  --chart-3: #594c5b;
  --chart-4: #463947;
  --chart-5: #2a212c;
  --sidebar: #1d161e;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #2a212c;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #79697b;
}

Related colours

Light primary: oklch(0.212 0.019 322.12) · #1d161e

← All shadcn/ui themes