OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Gray: primary #101828 light / #e5e7eb dark (oklch(0.21 0.034 264.665)). 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.

Gray 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

Gray light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.13 0.028 261.692)#030712Yes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.13 0.028 261.692)#030712Yes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.13 0.028 261.692)#030712Yes
--primaryoklch(0.21 0.034 264.665)#101828Yes
--primary-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--secondaryoklch(0.967 0.003 264.542)#f3f4f6Yes
--secondary-foregroundoklch(0.21 0.034 264.665)#101828Yes
--mutedoklch(0.967 0.003 264.542)#f3f4f6Yes
--muted-foregroundoklch(0.551 0.027 264.364)#6a7282Yes
--accentoklch(0.967 0.003 264.542)#f3f4f6Yes
--accent-foregroundoklch(0.21 0.034 264.665)#101828Yes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.928 0.006 264.531)#e5e7ebYes
--inputoklch(0.928 0.006 264.531)#e5e7ebYes
--ringoklch(0.707 0.022 261.325)#99a1afYes
--chart-1oklch(0.646 0.222 41.116)#f54900No — hex is clipped
--chart-2oklch(0.6 0.118 184.704)#009689No — hex is clipped
--chart-3oklch(0.398 0.07 227.392)#104e64Yes
--chart-4oklch(0.828 0.189 84.429)#ffb900No — hex is clipped
--chart-5oklch(0.769 0.188 70.08)#fe9a00No — hex is clipped
--sidebaroklch(0.985 0.002 247.839)#f9fafbYes
--sidebar-foregroundoklch(0.13 0.028 261.692)#030712Yes
--sidebar-primaryoklch(0.21 0.034 264.665)#101828Yes
--sidebar-primary-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--sidebar-accentoklch(0.967 0.003 264.542)#f3f4f6Yes
--sidebar-accent-foregroundoklch(0.21 0.034 264.665)#101828Yes
--sidebar-borderoklch(0.928 0.006 264.531)#e5e7ebYes
--sidebar-ringoklch(0.707 0.022 261.325)#99a1afYes

dark mode tokens

Gray dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.13 0.028 261.692)#030712Yes
--foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--cardoklch(0.21 0.034 264.665)#101828Yes
--card-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--popoveroklch(0.21 0.034 264.665)#101828Yes
--popover-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--primaryoklch(0.928 0.006 264.531)#e5e7ebYes
--primary-foregroundoklch(0.21 0.034 264.665)#101828Yes
--secondaryoklch(0.278 0.033 256.848)#1e2939Yes
--secondary-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--mutedoklch(0.278 0.033 256.848)#1e2939Yes
--muted-foregroundoklch(0.707 0.022 261.325)#99a1afYes
--accentoklch(0.278 0.033 256.848)#1e2939Yes
--accent-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--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.551 0.027 264.364)#6a7282Yes
--chart-1oklch(0.488 0.243 264.376)#1447e6Yes
--chart-2oklch(0.696 0.17 162.48)#00bc7dNo — hex is clipped
--chart-3oklch(0.769 0.188 70.08)#fe9a00No — hex is clipped
--chart-4oklch(0.627 0.265 303.9)#ad46ffNo — hex is clipped
--chart-5oklch(0.645 0.246 16.439)#ff2056No — hex is clipped
--sidebaroklch(0.21 0.034 264.665)#101828Yes
--sidebar-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--sidebar-primaryoklch(0.488 0.243 264.376)#1447e6Yes
--sidebar-primary-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--sidebar-accentoklch(0.278 0.033 256.848)#1e2939Yes
--sidebar-accent-foregroundoklch(0.985 0.002 247.839)#f9fafbYes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.551 0.027 264.364)#6a7282Yes

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#030712 on #ffffff20.13:1106PassPassPair page →
card-foreground on card#030712 on #ffffff20.13:1106PassPassPair page →
popover-foreground on popover#030712 on #ffffff20.13:1106PassPassPair page →
primary-foreground on primary#f9fafb on #10182816.98:1-103PassPass
secondary-foreground on secondary#101828 on #f3f4f616.12:198PassPass
muted-foreground on muted#6a7282 on #f3f4f64.39:167FailPassSet muted-foreground to oklch(0.511 0.027 264.3) (#5f6676, 5.22:1).
muted-foreground on background#6a7282 on #ffffff4.83:174PassPassPair page →
accent-foreground on accent#101828 on #f3f4f616.12:198PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#030712 on #f9fafb19.26:1103PassPass
sidebar-primary-foreground on sidebar-primary#f9fafb on #10182816.98:1-103PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#f9fafb on #03071219.26:1-104PassPass
card-foreground on card#f9fafb on #10182816.98:1-103PassPass
popover-foreground on popover#f9fafb on #10182816.98:1-103PassPass
primary-foreground on primary#101828 on #e5e7eb14.33:190PassPass
secondary-foreground on secondary#f9fafb on #1e293914.03:1-101PassPass
muted-foreground on muted#99a1af on #1e29395.63:1-48PassPass
muted-foreground on background#99a1af on #0307127.73:1-51PassPass
accent-foreground on accent#f9fafb on #1e293914.03:1-101PassPass
destructive on background#ff6467 on #0307126.97:1-47PassPassPair page →
sidebar-foreground on sidebar#f9fafb on #10182816.98:1-103PassPass
sidebar-primary-foreground on sidebar-primary#f9fafb on #1447e66.53:1-84PassPass

Copy code

shadcn/ui v4 globals.css (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.028 261.692);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.028 261.692);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.13 0.028 261.692);
  --primary: oklch(0.21 0.034 264.665);
  --primary-foreground: oklch(0.985 0.002 247.839);
  --secondary: oklch(0.967 0.003 264.542);
  --secondary-foreground: oklch(0.21 0.034 264.665);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.551 0.027 264.364);
  --accent: oklch(0.967 0.003 264.542);
  --accent-foreground: oklch(0.21 0.034 264.665);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --ring: oklch(0.707 0.022 261.325);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0.002 247.839);
  --sidebar-foreground: oklch(0.13 0.028 261.692);
  --sidebar-primary: oklch(0.21 0.034 264.665);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.967 0.003 264.542);
  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
  --sidebar-border: oklch(0.928 0.006 264.531);
  --sidebar-ring: oklch(0.707 0.022 261.325);
}

.dark {
  --background: oklch(0.13 0.028 261.692);
  --foreground: oklch(0.985 0.002 247.839);
  --card: oklch(0.21 0.034 264.665);
  --card-foreground: oklch(0.985 0.002 247.839);
  --popover: oklch(0.21 0.034 264.665);
  --popover-foreground: oklch(0.985 0.002 247.839);
  --primary: oklch(0.928 0.006 264.531);
  --primary-foreground: oklch(0.21 0.034 264.665);
  --secondary: oklch(0.278 0.033 256.848);
  --secondary-foreground: oklch(0.985 0.002 247.839);
  --muted: oklch(0.278 0.033 256.848);
  --muted-foreground: oklch(0.707 0.022 261.325);
  --accent: oklch(0.278 0.033 256.848);
  --accent-foreground: oklch(0.985 0.002 247.839);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.034 264.665);
  --sidebar-foreground: oklch(0.985 0.002 247.839);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.278 0.033 256.848);
  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

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: #030712;
  --card: #ffffff;
  --card-foreground: #030712;
  --popover: #ffffff;
  --popover-foreground: #030712;
  --primary: #101828;
  --primary-foreground: #f9fafb;
  --secondary: #f3f4f6;
  --secondary-foreground: #101828;
  --muted: #f3f4f6;
  --muted-foreground: #6a7282;
  --accent: #f3f4f6;
  --accent-foreground: #101828;
  --destructive: #e7000b;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: #99a1af;
  --chart-1: #f54900;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;
  --radius: 0.625rem;
  --sidebar: #f9fafb;
  --sidebar-foreground: #030712;
  --sidebar-primary: #101828;
  --sidebar-primary-foreground: #f9fafb;
  --sidebar-accent: #f3f4f6;
  --sidebar-accent-foreground: #101828;
  --sidebar-border: #e5e7eb;
  --sidebar-ring: #99a1af;
}

.dark {
  --background: #030712;
  --foreground: #f9fafb;
  --card: #101828;
  --card-foreground: #f9fafb;
  --popover: #101828;
  --popover-foreground: #f9fafb;
  --primary: #e5e7eb;
  --primary-foreground: #101828;
  --secondary: #1e2939;
  --secondary-foreground: #f9fafb;
  --muted: #1e2939;
  --muted-foreground: #99a1af;
  --accent: #1e2939;
  --accent-foreground: #f9fafb;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #6a7282;
  --chart-1: #1447e6;
  --chart-2: #00bc7d;
  --chart-3: #fe9a00;
  --chart-4: #ad46ff;
  --chart-5: #ff2056;
  --sidebar: #101828;
  --sidebar-foreground: #f9fafb;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #f9fafb;
  --sidebar-accent: #1e2939;
  --sidebar-accent-foreground: #f9fafb;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #6a7282;
}

Related colours

Light primary: oklch(0.21 0.034 264.665) · #101828

← All shadcn/ui themes