OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Slate: primary #0f172b light / #e2e8f0 dark (oklch(0.208 0.042 265.755)). 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.

Slate 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

Slate light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.129 0.042 264.695)#020618Yes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.129 0.042 264.695)#020618Yes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.129 0.042 264.695)#020618Yes
--primaryoklch(0.208 0.042 265.755)#0f172bYes
--primary-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--secondaryoklch(0.968 0.007 247.896)#f1f5f9Yes
--secondary-foregroundoklch(0.208 0.042 265.755)#0f172bYes
--mutedoklch(0.968 0.007 247.896)#f1f5f9Yes
--muted-foregroundoklch(0.554 0.046 257.417)#62748eYes
--accentoklch(0.968 0.007 247.896)#f1f5f9Yes
--accent-foregroundoklch(0.208 0.042 265.755)#0f172bYes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.929 0.013 255.508)#e2e8f0Yes
--inputoklch(0.929 0.013 255.508)#e2e8f0Yes
--ringoklch(0.704 0.04 256.788)#90a1b9Yes
--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.984 0.003 247.858)#f8fafcYes
--sidebar-foregroundoklch(0.129 0.042 264.695)#020618Yes
--sidebar-primaryoklch(0.208 0.042 265.755)#0f172bYes
--sidebar-primary-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--sidebar-accentoklch(0.968 0.007 247.896)#f1f5f9Yes
--sidebar-accent-foregroundoklch(0.208 0.042 265.755)#0f172bYes
--sidebar-borderoklch(0.929 0.013 255.508)#e2e8f0Yes
--sidebar-ringoklch(0.704 0.04 256.788)#90a1b9Yes

dark mode tokens

Slate dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.129 0.042 264.695)#020618Yes
--foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--cardoklch(0.208 0.042 265.755)#0f172bYes
--card-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--popoveroklch(0.208 0.042 265.755)#0f172bYes
--popover-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--primaryoklch(0.929 0.013 255.508)#e2e8f0Yes
--primary-foregroundoklch(0.208 0.042 265.755)#0f172bYes
--secondaryoklch(0.279 0.041 260.031)#1d293dYes
--secondary-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--mutedoklch(0.279 0.041 260.031)#1d293dYes
--muted-foregroundoklch(0.704 0.04 256.788)#90a1b9Yes
--accentoklch(0.279 0.041 260.031)#1d293dYes
--accent-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--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.208 0.042 265.755)#0f172bYes
--sidebar-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--sidebar-primaryoklch(0.488 0.243 264.376)#1447e6Yes
--sidebar-primary-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--sidebar-accentoklch(0.279 0.041 260.031)#1d293dYes
--sidebar-accent-foregroundoklch(0.984 0.003 247.858)#f8fafcYes
--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#020618 on #ffffff20.15:1106PassPassPair page →
card-foreground on card#020618 on #ffffff20.15:1106PassPassPair page →
popover-foreground on popover#020618 on #ffffff20.15:1106PassPassPair page →
primary-foreground on primary#f8fafc on #0f172b17.04:1-103PassPass
secondary-foreground on secondary#0f172b on #f1f5f916.27:198PassPass
muted-foreground on muted#62748e on #f1f5f94.34:167FailPassSet muted-foreground to oklch(0.514 0.046 257.5) (#576882, 5.17:1).
muted-foreground on background#62748e on #ffffff4.76:173PassPassPair page →
accent-foreground on accent#0f172b on #f1f5f916.27:198PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#020618 on #f8fafc19.26:1103PassPass
sidebar-primary-foreground on sidebar-primary#f8fafc on #0f172b17.04:1-103PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#f8fafc on #02061819.26:1-104PassPass
card-foreground on card#f8fafc on #0f172b17.04:1-103PassPass
popover-foreground on popover#f8fafc on #0f172b17.04:1-103PassPass
primary-foreground on primary#0f172b on #e2e8f014.46:191PassPass
secondary-foreground on secondary#f8fafc on #1d293d13.96:1-101PassPass
muted-foreground on muted#90a1b9 on #1d293d5.55:1-47PassPass
muted-foreground on background#90a1b9 on #0206187.66:1-51PassPass
accent-foreground on accent#f8fafc on #1d293d13.96:1-101PassPass
destructive on background#ff6467 on #0206186.97:1-47PassPass
sidebar-foreground on sidebar#f8fafc on #0f172b17.04:1-103PassPass
sidebar-primary-foreground on sidebar-primary#f8fafc on #1447e66.53:1-84PassPass

Copy code

shadcn/ui v4 globals.css (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --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.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --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.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --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: #020618;
  --card: #ffffff;
  --card-foreground: #020618;
  --popover: #ffffff;
  --popover-foreground: #020618;
  --primary: #0f172b;
  --primary-foreground: #f8fafc;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172b;
  --muted: #f1f5f9;
  --muted-foreground: #62748e;
  --accent: #f1f5f9;
  --accent-foreground: #0f172b;
  --destructive: #e7000b;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #90a1b9;
  --chart-1: #f54900;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;
  --radius: 0.625rem;
  --sidebar: #f8fafc;
  --sidebar-foreground: #020618;
  --sidebar-primary: #0f172b;
  --sidebar-primary-foreground: #f8fafc;
  --sidebar-accent: #f1f5f9;
  --sidebar-accent-foreground: #0f172b;
  --sidebar-border: #e2e8f0;
  --sidebar-ring: #90a1b9;
}

.dark {
  --background: #020618;
  --foreground: #f8fafc;
  --card: #0f172b;
  --card-foreground: #f8fafc;
  --popover: #0f172b;
  --popover-foreground: #f8fafc;
  --primary: #e2e8f0;
  --primary-foreground: #0f172b;
  --secondary: #1d293d;
  --secondary-foreground: #f8fafc;
  --muted: #1d293d;
  --muted-foreground: #90a1b9;
  --accent: #1d293d;
  --accent-foreground: #f8fafc;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #6a7282;
  --chart-1: #1447e6;
  --chart-2: #00bc7d;
  --chart-3: #fe9a00;
  --chart-4: #ad46ff;
  --chart-5: #ff2056;
  --sidebar: #0f172b;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #f8fafc;
  --sidebar-accent: #1d293d;
  --sidebar-accent-foreground: #f8fafc;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #6a7282;
}

Related colours

Light primary: oklch(0.208 0.042 265.755) · #0f172b

← All shadcn/ui themes