OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Neutral: primary #171717 light / #e5e5e5 dark (oklch(0.205 0 0)). 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.

Neutral 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

Neutral light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.145 0 0)#0a0a0aYes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.145 0 0)#0a0a0aYes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.145 0 0)#0a0a0aYes
--primaryoklch(0.205 0 0)#171717Yes
--primary-foregroundoklch(0.985 0 0)#fafafaYes
--secondaryoklch(0.97 0 0)#f5f5f5Yes
--secondary-foregroundoklch(0.205 0 0)#171717Yes
--mutedoklch(0.97 0 0)#f5f5f5Yes
--muted-foregroundoklch(0.556 0 0)#737373Yes
--accentoklch(0.97 0 0)#f5f5f5Yes
--accent-foregroundoklch(0.205 0 0)#171717Yes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.922 0 0)#e5e5e5Yes
--inputoklch(0.922 0 0)#e5e5e5Yes
--ringoklch(0.708 0 0)#a1a1a1Yes
--chart-1oklch(0.87 0 0)#d4d4d4Yes
--chart-2oklch(0.556 0 0)#737373Yes
--chart-3oklch(0.439 0 0)#525252Yes
--chart-4oklch(0.371 0 0)#404040Yes
--chart-5oklch(0.269 0 0)#262626Yes
--sidebaroklch(0.985 0 0)#fafafaYes
--sidebar-foregroundoklch(0.145 0 0)#0a0a0aYes
--sidebar-primaryoklch(0.205 0 0)#171717Yes
--sidebar-primary-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-accentoklch(0.97 0 0)#f5f5f5Yes
--sidebar-accent-foregroundoklch(0.205 0 0)#171717Yes
--sidebar-borderoklch(0.922 0 0)#e5e5e5Yes
--sidebar-ringoklch(0.708 0 0)#a1a1a1Yes

dark mode tokens

Neutral dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.145 0 0)#0a0a0aYes
--foregroundoklch(0.985 0 0)#fafafaYes
--cardoklch(0.205 0 0)#171717Yes
--card-foregroundoklch(0.985 0 0)#fafafaYes
--popoveroklch(0.205 0 0)#171717Yes
--popover-foregroundoklch(0.985 0 0)#fafafaYes
--primaryoklch(0.922 0 0)#e5e5e5Yes
--primary-foregroundoklch(0.205 0 0)#171717Yes
--secondaryoklch(0.269 0 0)#262626Yes
--secondary-foregroundoklch(0.985 0 0)#fafafaYes
--mutedoklch(0.269 0 0)#262626Yes
--muted-foregroundoklch(0.708 0 0)#a1a1a1Yes
--accentoklch(0.269 0 0)#262626Yes
--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.556 0 0)#737373Yes
--chart-1oklch(0.87 0 0)#d4d4d4Yes
--chart-2oklch(0.556 0 0)#737373Yes
--chart-3oklch(0.439 0 0)#525252Yes
--chart-4oklch(0.371 0 0)#404040Yes
--chart-5oklch(0.269 0 0)#262626Yes
--sidebaroklch(0.205 0 0)#171717Yes
--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.269 0 0)#262626Yes
--sidebar-accent-foregroundoklch(0.985 0 0)#fafafaYes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.556 0 0)#737373Yes

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#0a0a0a on #ffffff19.79:1106PassPassPair page →
card-foreground on card#0a0a0a on #ffffff19.79:1106PassPassPair page →
popover-foreground on popover#0a0a0a on #ffffff19.79:1106PassPassPair page →
primary-foreground on primary#fafafa on #17171717.17:1-104PassPass
secondary-foreground on secondary#171717 on #f5f5f516.44:199PassPass
muted-foreground on muted#737373 on #f5f5f54.34:167FailPassSet muted-foreground to oklch(0.516 0.000 0.0) (#676767, 5.18:1).
muted-foreground on background#737373 on #ffffff4.74:173PassPassPair page →
accent-foreground on accent#171717 on #f5f5f516.44:199PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#0a0a0a on #fafafa18.96:1103PassPass
sidebar-primary-foreground on sidebar-primary#fafafa on #17171717.17:1-104PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#fafafa on #0a0a0a18.96:1-104PassPass
card-foreground on card#fafafa on #17171717.17:1-104PassPass
popover-foreground on popover#fafafa on #17171717.17:1-104PassPass
primary-foreground on primary#171717 on #e5e5e514.23:189PassPass
secondary-foreground on secondary#fafafa on #26262614.49:1-101PassPass
muted-foreground on muted#a1a1a1 on #2626265.85:1-48PassPass
muted-foreground on background#a1a1a1 on #0a0a0a7.66:1-51PassPass
accent-foreground on accent#fafafa on #26262614.49:1-101PassPass
destructive on background#ff6467 on #0a0a0a6.85:1-47PassPass
sidebar-foreground on sidebar#fafafa on #17171717.17:1-104PassPass
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 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --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.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --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.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

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: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e7000b;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --chart-1: #d4d4d4;
  --chart-2: #737373;
  --chart-3: #525252;
  --chart-4: #404040;
  --chart-5: #262626;
  --radius: 0.625rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #e5e5e5;
  --primary-foreground: #171717;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --accent: #262626;
  --accent-foreground: #fafafa;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #737373;
  --chart-1: #d4d4d4;
  --chart-2: #737373;
  --chart-3: #525252;
  --chart-4: #404040;
  --chart-5: #262626;
  --sidebar: #171717;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #737373;
}

Related colours

Light primary: oklch(0.205 0 0) · #171717

← All shadcn/ui themes