OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Taupe: primary #1d1816 light / #e8e4e3 dark (oklch(0.214 0.009 43.1)). 21 of 22 checked pairs meet WCAG AA 4.5:1 (light 10/11, dark 11/11). Copy the full light and dark token set as OKLCH, @theme mapping or hex.

Taupe 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

Taupe light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.147 0.004 49.3)#0c0a09Yes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.147 0.004 49.3)#0c0a09Yes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.147 0.004 49.3)#0c0a09Yes
--primaryoklch(0.214 0.009 43.1)#1d1816Yes
--primary-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--secondaryoklch(0.96 0.002 17.2)#f3f1f1Yes
--secondary-foregroundoklch(0.214 0.009 43.1)#1d1816Yes
--mutedoklch(0.96 0.002 17.2)#f3f1f1Yes
--muted-foregroundoklch(0.547 0.021 43.1)#7c6d67Yes
--accentoklch(0.96 0.002 17.2)#f3f1f1Yes
--accent-foregroundoklch(0.214 0.009 43.1)#1d1816Yes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.922 0.005 34.3)#e8e4e3Yes
--inputoklch(0.922 0.005 34.3)#e8e4e3Yes
--ringoklch(0.714 0.014 41.2)#aba09cYes
--chart-1oklch(0.868 0.007 39.5)#d8d2d0Yes
--chart-2oklch(0.547 0.021 43.1)#7c6d67Yes
--chart-3oklch(0.438 0.017 39.3)#5b4f4bYes
--chart-4oklch(0.367 0.016 35.7)#473c39Yes
--chart-5oklch(0.268 0.011 36.5)#2b2422Yes
--sidebaroklch(0.986 0.002 67.8)#fbfaf9Yes
--sidebar-foregroundoklch(0.147 0.004 49.3)#0c0a09Yes
--sidebar-primaryoklch(0.214 0.009 43.1)#1d1816Yes
--sidebar-primary-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--sidebar-accentoklch(0.96 0.002 17.2)#f3f1f1Yes
--sidebar-accent-foregroundoklch(0.214 0.009 43.1)#1d1816Yes
--sidebar-borderoklch(0.922 0.005 34.3)#e8e4e3Yes
--sidebar-ringoklch(0.714 0.014 41.2)#aba09cYes

dark mode tokens

Taupe dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.147 0.004 49.3)#0c0a09Yes
--foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--cardoklch(0.214 0.009 43.1)#1d1816Yes
--card-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--popoveroklch(0.214 0.009 43.1)#1d1816Yes
--popover-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--primaryoklch(0.922 0.005 34.3)#e8e4e3Yes
--primary-foregroundoklch(0.214 0.009 43.1)#1d1816Yes
--secondaryoklch(0.268 0.011 36.5)#2b2422Yes
--secondary-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--mutedoklch(0.268 0.011 36.5)#2b2422Yes
--muted-foregroundoklch(0.714 0.014 41.2)#aba09cYes
--accentoklch(0.268 0.011 36.5)#2b2422Yes
--accent-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--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.547 0.021 43.1)#7c6d67Yes
--chart-1oklch(0.868 0.007 39.5)#d8d2d0Yes
--chart-2oklch(0.547 0.021 43.1)#7c6d67Yes
--chart-3oklch(0.438 0.017 39.3)#5b4f4bYes
--chart-4oklch(0.367 0.016 35.7)#473c39Yes
--chart-5oklch(0.268 0.011 36.5)#2b2422Yes
--sidebaroklch(0.214 0.009 43.1)#1d1816Yes
--sidebar-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--sidebar-primaryoklch(0.488 0.243 264.376)#1447e6Yes
--sidebar-primary-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--sidebar-accentoklch(0.268 0.011 36.5)#2b2422Yes
--sidebar-accent-foregroundoklch(0.986 0.002 67.8)#fbfaf9Yes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.547 0.021 43.1)#7c6d67Yes

Contrast audit (WCAG 2)

21 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#0c0a09 on #ffffff19.75:1106PassPassPair page →
card-foreground on card#0c0a09 on #ffffff19.75:1106PassPassPair page →
popover-foreground on popover#0c0a09 on #ffffff19.75:1106PassPassPair page →
primary-foreground on primary#fbfaf9 on #1d181616.86:1-103PassPass
secondary-foreground on secondary#1d1816 on #f3f1f115.62:196PassPass
muted-foreground on muted#7c6d67 on #f3f1f14.40:166FailPassSet muted-foreground to oklch(0.507 0.021 43.1) (#70625c, 5.19:1).
muted-foreground on background#7c6d67 on #ffffff4.95:174PassPassPair page →
accent-foreground on accent#1d1816 on #f3f1f115.62:196PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#0c0a09 on #fbfaf918.95:1103PassPass
sidebar-primary-foreground on sidebar-primary#fbfaf9 on #1d181616.86:1-103PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#fbfaf9 on #0c0a0918.95:1-105PassPass
card-foreground on card#fbfaf9 on #1d181616.86:1-103PassPass
popover-foreground on popover#fbfaf9 on #1d181616.86:1-103PassPass
primary-foreground on primary#1d1816 on #e8e4e313.92:189PassPass
secondary-foreground on secondary#fbfaf9 on #2b242214.61:1-102PassPass
muted-foreground on muted#aba09c on #2b24225.97:1-49PassPass
muted-foreground on background#aba09c on #0c0a097.75:1-52PassPass
accent-foreground on accent#fbfaf9 on #2b242214.61:1-102PassPass
destructive on background#ff6467 on #0c0a096.84:1-47PassPass
sidebar-foreground on sidebar#fbfaf9 on #1d181616.86:1-103PassPass
sidebar-primary-foreground on sidebar-primary#fbfaf9 on #1447e66.55:1-84PassPass

Copy code

shadcn/ui v4 globals.css (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.3);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.3);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.3);
  --primary: oklch(0.214 0.009 43.1);
  --primary-foreground: oklch(0.986 0.002 67.8);
  --secondary: oklch(0.96 0.002 17.2);
  --secondary-foreground: oklch(0.214 0.009 43.1);
  --muted: oklch(0.96 0.002 17.2);
  --muted-foreground: oklch(0.547 0.021 43.1);
  --accent: oklch(0.96 0.002 17.2);
  --accent-foreground: oklch(0.214 0.009 43.1);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0.005 34.3);
  --input: oklch(0.922 0.005 34.3);
  --ring: oklch(0.714 0.014 41.2);
  --chart-1: oklch(0.868 0.007 39.5);
  --chart-2: oklch(0.547 0.021 43.1);
  --chart-3: oklch(0.438 0.017 39.3);
  --chart-4: oklch(0.367 0.016 35.7);
  --chart-5: oklch(0.268 0.011 36.5);
  --radius: 0.625rem;
  --sidebar: oklch(0.986 0.002 67.8);
  --sidebar-foreground: oklch(0.147 0.004 49.3);
  --sidebar-primary: oklch(0.214 0.009 43.1);
  --sidebar-primary-foreground: oklch(0.986 0.002 67.8);
  --sidebar-accent: oklch(0.96 0.002 17.2);
  --sidebar-accent-foreground: oklch(0.214 0.009 43.1);
  --sidebar-border: oklch(0.922 0.005 34.3);
  --sidebar-ring: oklch(0.714 0.014 41.2);
}

.dark {
  --background: oklch(0.147 0.004 49.3);
  --foreground: oklch(0.986 0.002 67.8);
  --card: oklch(0.214 0.009 43.1);
  --card-foreground: oklch(0.986 0.002 67.8);
  --popover: oklch(0.214 0.009 43.1);
  --popover-foreground: oklch(0.986 0.002 67.8);
  --primary: oklch(0.922 0.005 34.3);
  --primary-foreground: oklch(0.214 0.009 43.1);
  --secondary: oklch(0.268 0.011 36.5);
  --secondary-foreground: oklch(0.986 0.002 67.8);
  --muted: oklch(0.268 0.011 36.5);
  --muted-foreground: oklch(0.714 0.014 41.2);
  --accent: oklch(0.268 0.011 36.5);
  --accent-foreground: oklch(0.986 0.002 67.8);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.547 0.021 43.1);
  --chart-1: oklch(0.868 0.007 39.5);
  --chart-2: oklch(0.547 0.021 43.1);
  --chart-3: oklch(0.438 0.017 39.3);
  --chart-4: oklch(0.367 0.016 35.7);
  --chart-5: oklch(0.268 0.011 36.5);
  --sidebar: oklch(0.214 0.009 43.1);
  --sidebar-foreground: oklch(0.986 0.002 67.8);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.986 0.002 67.8);
  --sidebar-accent: oklch(0.268 0.011 36.5);
  --sidebar-accent-foreground: oklch(0.986 0.002 67.8);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.547 0.021 43.1);
}

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: #0c0a09;
  --card: #ffffff;
  --card-foreground: #0c0a09;
  --popover: #ffffff;
  --popover-foreground: #0c0a09;
  --primary: #1d1816;
  --primary-foreground: #fbfaf9;
  --secondary: #f3f1f1;
  --secondary-foreground: #1d1816;
  --muted: #f3f1f1;
  --muted-foreground: #7c6d67;
  --accent: #f3f1f1;
  --accent-foreground: #1d1816;
  --destructive: #e7000b;
  --border: #e8e4e3;
  --input: #e8e4e3;
  --ring: #aba09c;
  --chart-1: #d8d2d0;
  --chart-2: #7c6d67;
  --chart-3: #5b4f4b;
  --chart-4: #473c39;
  --chart-5: #2b2422;
  --radius: 0.625rem;
  --sidebar: #fbfaf9;
  --sidebar-foreground: #0c0a09;
  --sidebar-primary: #1d1816;
  --sidebar-primary-foreground: #fbfaf9;
  --sidebar-accent: #f3f1f1;
  --sidebar-accent-foreground: #1d1816;
  --sidebar-border: #e8e4e3;
  --sidebar-ring: #aba09c;
}

.dark {
  --background: #0c0a09;
  --foreground: #fbfaf9;
  --card: #1d1816;
  --card-foreground: #fbfaf9;
  --popover: #1d1816;
  --popover-foreground: #fbfaf9;
  --primary: #e8e4e3;
  --primary-foreground: #1d1816;
  --secondary: #2b2422;
  --secondary-foreground: #fbfaf9;
  --muted: #2b2422;
  --muted-foreground: #aba09c;
  --accent: #2b2422;
  --accent-foreground: #fbfaf9;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #7c6d67;
  --chart-1: #d8d2d0;
  --chart-2: #7c6d67;
  --chart-3: #5b4f4b;
  --chart-4: #473c39;
  --chart-5: #2b2422;
  --sidebar: #1d1816;
  --sidebar-foreground: #fbfaf9;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fbfaf9;
  --sidebar-accent: #2b2422;
  --sidebar-accent-foreground: #fbfaf9;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #7c6d67;
}

Related colours

Light primary: oklch(0.214 0.009 43.1) · #1d1816

← All shadcn/ui themes