OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Stone: primary #1c1917 light / #e7e5e4 dark (oklch(0.216 0.006 56.043)). 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.

Stone 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

Stone light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.147 0.004 49.25)#0c0a09Yes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.147 0.004 49.25)#0c0a09Yes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.147 0.004 49.25)#0c0a09Yes
--primaryoklch(0.216 0.006 56.043)#1c1917Yes
--primary-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--secondaryoklch(0.97 0.001 106.424)#f5f5f4Yes
--secondary-foregroundoklch(0.216 0.006 56.043)#1c1917Yes
--mutedoklch(0.97 0.001 106.424)#f5f5f4Yes
--muted-foregroundoklch(0.553 0.013 58.071)#79716bYes
--accentoklch(0.97 0.001 106.424)#f5f5f4Yes
--accent-foregroundoklch(0.216 0.006 56.043)#1c1917Yes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.923 0.003 48.717)#e7e5e4Yes
--inputoklch(0.923 0.003 48.717)#e7e5e4Yes
--ringoklch(0.709 0.01 56.259)#a6a09bYes
--chart-1oklch(0.869 0.005 56.366)#d6d3d1Yes
--chart-2oklch(0.553 0.013 58.071)#79716bYes
--chart-3oklch(0.444 0.011 73.639)#57534dYes
--chart-4oklch(0.374 0.01 67.558)#44403bYes
--chart-5oklch(0.268 0.007 34.298)#292524Yes
--sidebaroklch(0.985 0.001 106.423)#fafaf9Yes
--sidebar-foregroundoklch(0.147 0.004 49.25)#0c0a09Yes
--sidebar-primaryoklch(0.216 0.006 56.043)#1c1917Yes
--sidebar-primary-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--sidebar-accentoklch(0.97 0.001 106.424)#f5f5f4Yes
--sidebar-accent-foregroundoklch(0.216 0.006 56.043)#1c1917Yes
--sidebar-borderoklch(0.923 0.003 48.717)#e7e5e4Yes
--sidebar-ringoklch(0.709 0.01 56.259)#a6a09bYes

dark mode tokens

Stone dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.147 0.004 49.25)#0c0a09Yes
--foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--cardoklch(0.216 0.006 56.043)#1c1917Yes
--card-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--popoveroklch(0.216 0.006 56.043)#1c1917Yes
--popover-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--primaryoklch(0.923 0.003 48.717)#e7e5e4Yes
--primary-foregroundoklch(0.216 0.006 56.043)#1c1917Yes
--secondaryoklch(0.268 0.007 34.298)#292524Yes
--secondary-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--mutedoklch(0.268 0.007 34.298)#292524Yes
--muted-foregroundoklch(0.709 0.01 56.259)#a6a09bYes
--accentoklch(0.268 0.007 34.298)#292524Yes
--accent-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--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.553 0.013 58.071)#79716bYes
--chart-1oklch(0.869 0.005 56.366)#d6d3d1Yes
--chart-2oklch(0.553 0.013 58.071)#79716bYes
--chart-3oklch(0.444 0.011 73.639)#57534dYes
--chart-4oklch(0.374 0.01 67.558)#44403bYes
--chart-5oklch(0.268 0.007 34.298)#292524Yes
--sidebaroklch(0.216 0.006 56.043)#1c1917Yes
--sidebar-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--sidebar-primaryoklch(0.488 0.243 264.376)#1447e6Yes
--sidebar-primary-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--sidebar-accentoklch(0.268 0.007 34.298)#292524Yes
--sidebar-accent-foregroundoklch(0.985 0.001 106.423)#fafaf9Yes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.553 0.013 58.071)#79716bYes

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#fafaf9 on #1c191716.74:1-103PassPass
secondary-foreground on secondary#1c1917 on #f5f5f416.03:198PassPass
muted-foreground on muted#79716b on #f5f5f44.38:167FailPassSet muted-foreground to oklch(0.514 0.014 59.4) (#6d6660, 5.17:1).
muted-foreground on background#79716b on #ffffff4.78:173PassPassPair page →
accent-foreground on accent#1c1917 on #f5f5f416.03:198PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#0c0a09 on #fafaf918.91:1103PassPass
sidebar-primary-foreground on sidebar-primary#fafaf9 on #1c191716.74:1-103PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#fafaf9 on #0c0a0918.91:1-104PassPass
card-foreground on card#fafaf9 on #1c191716.74:1-103PassPass
popover-foreground on popover#fafaf9 on #1c191716.74:1-103PassPass
primary-foreground on primary#1c1917 on #e7e5e413.92:189PassPass
secondary-foreground on secondary#fafaf9 on #29252414.52:1-101PassPass
muted-foreground on muted#a6a09b on #2925245.86:1-48PassPass
muted-foreground on background#a6a09b on #0c0a097.64:1-51PassPass
accent-foreground on accent#fafaf9 on #29252414.52:1-101PassPass
destructive on background#ff6467 on #0c0a096.84:1-47PassPass
sidebar-foreground on sidebar#fafaf9 on #1c191716.74:1-103PassPass
sidebar-primary-foreground on sidebar-primary#fafaf9 on #1447e66.54:1-84PassPass

Copy code

shadcn/ui v4 globals.css (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.25);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.25);
  --primary: oklch(0.216 0.006 56.043);
  --primary-foreground: oklch(0.985 0.001 106.423);
  --secondary: oklch(0.97 0.001 106.424);
  --secondary-foreground: oklch(0.216 0.006 56.043);
  --muted: oklch(0.97 0.001 106.424);
  --muted-foreground: oklch(0.553 0.013 58.071);
  --accent: oklch(0.97 0.001 106.424);
  --accent-foreground: oklch(0.216 0.006 56.043);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.923 0.003 48.717);
  --input: oklch(0.923 0.003 48.717);
  --ring: oklch(0.709 0.01 56.259);
  --chart-1: oklch(0.869 0.005 56.366);
  --chart-2: oklch(0.553 0.013 58.071);
  --chart-3: oklch(0.444 0.011 73.639);
  --chart-4: oklch(0.374 0.01 67.558);
  --chart-5: oklch(0.268 0.007 34.298);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0.001 106.423);
  --sidebar-foreground: oklch(0.147 0.004 49.25);
  --sidebar-primary: oklch(0.216 0.006 56.043);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.97 0.001 106.424);
  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
  --sidebar-border: oklch(0.923 0.003 48.717);
  --sidebar-ring: oklch(0.709 0.01 56.259);
}

.dark {
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --card-foreground: oklch(0.985 0.001 106.423);
  --popover: oklch(0.216 0.006 56.043);
  --popover-foreground: oklch(0.985 0.001 106.423);
  --primary: oklch(0.923 0.003 48.717);
  --primary-foreground: oklch(0.216 0.006 56.043);
  --secondary: oklch(0.268 0.007 34.298);
  --secondary-foreground: oklch(0.985 0.001 106.423);
  --muted: oklch(0.268 0.007 34.298);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --accent: oklch(0.268 0.007 34.298);
  --accent-foreground: oklch(0.985 0.001 106.423);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.553 0.013 58.071);
  --chart-1: oklch(0.869 0.005 56.366);
  --chart-2: oklch(0.553 0.013 58.071);
  --chart-3: oklch(0.444 0.011 73.639);
  --chart-4: oklch(0.374 0.01 67.558);
  --chart-5: oklch(0.268 0.007 34.298);
  --sidebar: oklch(0.216 0.006 56.043);
  --sidebar-foreground: oklch(0.985 0.001 106.423);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.268 0.007 34.298);
  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.553 0.013 58.071);
}

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: #1c1917;
  --primary-foreground: #fafaf9;
  --secondary: #f5f5f4;
  --secondary-foreground: #1c1917;
  --muted: #f5f5f4;
  --muted-foreground: #79716b;
  --accent: #f5f5f4;
  --accent-foreground: #1c1917;
  --destructive: #e7000b;
  --border: #e7e5e4;
  --input: #e7e5e4;
  --ring: #a6a09b;
  --chart-1: #d6d3d1;
  --chart-2: #79716b;
  --chart-3: #57534d;
  --chart-4: #44403b;
  --chart-5: #292524;
  --radius: 0.625rem;
  --sidebar: #fafaf9;
  --sidebar-foreground: #0c0a09;
  --sidebar-primary: #1c1917;
  --sidebar-primary-foreground: #fafaf9;
  --sidebar-accent: #f5f5f4;
  --sidebar-accent-foreground: #1c1917;
  --sidebar-border: #e7e5e4;
  --sidebar-ring: #a6a09b;
}

.dark {
  --background: #0c0a09;
  --foreground: #fafaf9;
  --card: #1c1917;
  --card-foreground: #fafaf9;
  --popover: #1c1917;
  --popover-foreground: #fafaf9;
  --primary: #e7e5e4;
  --primary-foreground: #1c1917;
  --secondary: #292524;
  --secondary-foreground: #fafaf9;
  --muted: #292524;
  --muted-foreground: #a6a09b;
  --accent: #292524;
  --accent-foreground: #fafaf9;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #79716b;
  --chart-1: #d6d3d1;
  --chart-2: #79716b;
  --chart-3: #57534d;
  --chart-4: #44403b;
  --chart-5: #292524;
  --sidebar: #1c1917;
  --sidebar-foreground: #fafaf9;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fafaf9;
  --sidebar-accent: #292524;
  --sidebar-accent-foreground: #fafaf9;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #79716b;
}

Related colours

Light primary: oklch(0.216 0.006 56.043) · #1c1917

← All shadcn/ui themes