OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Zinc: primary #18181b light / #e4e4e7 dark (oklch(0.21 0.006 285.885)). 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.

Zinc 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

Zinc light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.141 0.005 285.823)#09090bYes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.141 0.005 285.823)#09090bYes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.141 0.005 285.823)#09090bYes
--primaryoklch(0.21 0.006 285.885)#18181bYes
--primary-foregroundoklch(0.985 0 0)#fafafaYes
--secondaryoklch(0.967 0.001 286.375)#f4f4f5Yes
--secondary-foregroundoklch(0.21 0.006 285.885)#18181bYes
--mutedoklch(0.967 0.001 286.375)#f4f4f5Yes
--muted-foregroundoklch(0.552 0.016 285.938)#71717bYes
--accentoklch(0.967 0.001 286.375)#f4f4f5Yes
--accent-foregroundoklch(0.21 0.006 285.885)#18181bYes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.92 0.004 286.32)#e4e4e7Yes
--inputoklch(0.92 0.004 286.32)#e4e4e7Yes
--ringoklch(0.705 0.015 286.067)#9f9fa9Yes
--chart-1oklch(0.871 0.006 286.286)#d4d4d8Yes
--chart-2oklch(0.552 0.016 285.938)#71717bYes
--chart-3oklch(0.442 0.017 285.786)#52525cYes
--chart-4oklch(0.37 0.013 285.805)#3f3f46Yes
--chart-5oklch(0.274 0.006 286.033)#27272aYes
--sidebaroklch(0.985 0 0)#fafafaYes
--sidebar-foregroundoklch(0.141 0.005 285.823)#09090bYes
--sidebar-primaryoklch(0.21 0.006 285.885)#18181bYes
--sidebar-primary-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-accentoklch(0.967 0.001 286.375)#f4f4f5Yes
--sidebar-accent-foregroundoklch(0.21 0.006 285.885)#18181bYes
--sidebar-borderoklch(0.92 0.004 286.32)#e4e4e7Yes
--sidebar-ringoklch(0.705 0.015 286.067)#9f9fa9Yes

dark mode tokens

Zinc dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.141 0.005 285.823)#09090bYes
--foregroundoklch(0.985 0 0)#fafafaYes
--cardoklch(0.21 0.006 285.885)#18181bYes
--card-foregroundoklch(0.985 0 0)#fafafaYes
--popoveroklch(0.21 0.006 285.885)#18181bYes
--popover-foregroundoklch(0.985 0 0)#fafafaYes
--primaryoklch(0.92 0.004 286.32)#e4e4e7Yes
--primary-foregroundoklch(0.21 0.006 285.885)#18181bYes
--secondaryoklch(0.274 0.006 286.033)#27272aYes
--secondary-foregroundoklch(0.985 0 0)#fafafaYes
--mutedoklch(0.274 0.006 286.033)#27272aYes
--muted-foregroundoklch(0.705 0.015 286.067)#9f9fa9Yes
--accentoklch(0.274 0.006 286.033)#27272aYes
--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.552 0.016 285.938)#71717bYes
--chart-1oklch(0.871 0.006 286.286)#d4d4d8Yes
--chart-2oklch(0.552 0.016 285.938)#71717bYes
--chart-3oklch(0.442 0.017 285.786)#52525cYes
--chart-4oklch(0.37 0.013 285.805)#3f3f46Yes
--chart-5oklch(0.274 0.006 286.033)#27272aYes
--sidebaroklch(0.21 0.006 285.885)#18181bYes
--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.274 0.006 286.033)#27272aYes
--sidebar-accent-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.552 0.016 285.938)#71717bYes

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#09090b on #ffffff19.89:1106PassPassPair page →
card-foreground on card#09090b on #ffffff19.89:1106PassPassPair page →
popover-foreground on popover#09090b on #ffffff19.89:1106PassPassPair page →
primary-foreground on primary#fafafa on #18181b16.97:1-103PassPass
secondary-foreground on secondary#18181b on #f4f4f516.11:198PassPass
muted-foreground on muted#71717b on #f4f4f54.39:167FailPassSet muted-foreground to oklch(0.512 0.015 285.9) (#66666f, 5.17:1).
muted-foreground on background#71717b on #ffffff4.82:174PassPassPair page →
accent-foreground on accent#18181b on #f4f4f516.11:198PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#09090b on #fafafa19.06:1103PassPass
sidebar-primary-foreground on sidebar-primary#fafafa on #18181b16.97:1-103PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#fafafa on #09090b19.06:1-104PassPass
card-foreground on card#fafafa on #18181b16.97:1-103PassPass
popover-foreground on popover#fafafa on #18181b16.97:1-103PassPass
primary-foreground on primary#18181b on #e4e4e713.96:189PassPass
secondary-foreground on secondary#fafafa on #27272a14.27:1-101PassPass
muted-foreground on muted#9f9fa9 on #27272a5.67:1-47PassPass
muted-foreground on background#9f9fa9 on #09090b7.58:1-51PassPass
accent-foreground on accent#fafafa on #27272a14.27:1-101PassPass
destructive on background#ff6467 on #09090b6.88:1-47PassPass
sidebar-foreground on sidebar#fafafa on #18181b16.97: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.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.871 0.006 286.286);
  --chart-2: oklch(0.552 0.016 285.938);
  --chart-3: oklch(0.442 0.017 285.786);
  --chart-4: oklch(0.37 0.013 285.805);
  --chart-5: oklch(0.274 0.006 286.033);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --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.552 0.016 285.938);
  --chart-1: oklch(0.871 0.006 286.286);
  --chart-2: oklch(0.552 0.016 285.938);
  --chart-3: oklch(0.442 0.017 285.786);
  --chart-4: oklch(0.37 0.013 285.805);
  --chart-5: oklch(0.274 0.006 286.033);
  --sidebar: oklch(0.21 0.006 285.885);
  --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.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}

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: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717b;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --destructive: #e7000b;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #9f9fa9;
  --chart-1: #d4d4d8;
  --chart-2: #71717b;
  --chart-3: #52525c;
  --chart-4: #3f3f46;
  --chart-5: #27272a;
  --radius: 0.625rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #09090b;
  --sidebar-primary: #18181b;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f4f4f5;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: #e4e4e7;
  --sidebar-ring: #9f9fa9;
}

.dark {
  --background: #09090b;
  --foreground: #fafafa;
  --card: #18181b;
  --card-foreground: #fafafa;
  --popover: #18181b;
  --popover-foreground: #fafafa;
  --primary: #e4e4e7;
  --primary-foreground: #18181b;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #9f9fa9;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #71717b;
  --chart-1: #d4d4d8;
  --chart-2: #71717b;
  --chart-3: #52525c;
  --chart-4: #3f3f46;
  --chart-5: #27272a;
  --sidebar: #18181b;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #27272a;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #71717b;
}

Related colours

Light primary: oklch(0.21 0.006 285.885) · #18181b

← All shadcn/ui themes