OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Olive: primary #1d1d16 light / #e8e8e3 dark (oklch(0.228 0.013 107.4)). 20 of 22 checked pairs meet WCAG AA 4.5:1 (light 9/11, dark 11/11). Copy the full light and dark token set as OKLCH, @theme mapping or hex.

Olive 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

Olive light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.153 0.006 107.1)#0c0c09Yes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.153 0.006 107.1)#0c0c09Yes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.153 0.006 107.1)#0c0c09Yes
--primaryoklch(0.228 0.013 107.4)#1d1d16Yes
--primary-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--secondaryoklch(0.966 0.005 106.5)#f4f4f0Yes
--secondary-foregroundoklch(0.228 0.013 107.4)#1d1d16Yes
--mutedoklch(0.966 0.005 106.5)#f4f4f0Yes
--muted-foregroundoklch(0.58 0.031 107.3)#7c7c67Yes
--accentoklch(0.966 0.005 106.5)#f4f4f0Yes
--accent-foregroundoklch(0.228 0.013 107.4)#1d1d16Yes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.93 0.007 106.5)#e8e8e3Yes
--inputoklch(0.93 0.007 106.5)#e8e8e3Yes
--ringoklch(0.737 0.021 106.9)#abab9cYes
--chart-1oklch(0.88 0.011 106.6)#d8d8d0Yes
--chart-2oklch(0.58 0.031 107.3)#7c7c67Yes
--chart-3oklch(0.466 0.025 107.3)#5b5b4bYes
--chart-4oklch(0.394 0.023 107.4)#474739Yes
--chart-5oklch(0.286 0.016 107.4)#2b2b22Yes
--sidebaroklch(0.988 0.003 106.5)#fbfbf9Yes
--sidebar-foregroundoklch(0.153 0.006 107.1)#0c0c09Yes
--sidebar-primaryoklch(0.228 0.013 107.4)#1d1d16Yes
--sidebar-primary-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--sidebar-accentoklch(0.966 0.005 106.5)#f4f4f0Yes
--sidebar-accent-foregroundoklch(0.228 0.013 107.4)#1d1d16Yes
--sidebar-borderoklch(0.93 0.007 106.5)#e8e8e3Yes
--sidebar-ringoklch(0.737 0.021 106.9)#abab9cYes

dark mode tokens

Olive dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.153 0.006 107.1)#0c0c09Yes
--foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--cardoklch(0.228 0.013 107.4)#1d1d16Yes
--card-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--popoveroklch(0.228 0.013 107.4)#1d1d16Yes
--popover-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--primaryoklch(0.93 0.007 106.5)#e8e8e3Yes
--primary-foregroundoklch(0.228 0.013 107.4)#1d1d16Yes
--secondaryoklch(0.286 0.016 107.4)#2b2b22Yes
--secondary-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--mutedoklch(0.286 0.016 107.4)#2b2b22Yes
--muted-foregroundoklch(0.737 0.021 106.9)#abab9cYes
--accentoklch(0.286 0.016 107.4)#2b2b22Yes
--accent-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--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.58 0.031 107.3)#7c7c67Yes
--chart-1oklch(0.88 0.011 106.6)#d8d8d0Yes
--chart-2oklch(0.58 0.031 107.3)#7c7c67Yes
--chart-3oklch(0.466 0.025 107.3)#5b5b4bYes
--chart-4oklch(0.394 0.023 107.4)#474739Yes
--chart-5oklch(0.286 0.016 107.4)#2b2b22Yes
--sidebaroklch(0.228 0.013 107.4)#1d1d16Yes
--sidebar-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--sidebar-primaryoklch(0.488 0.243 264.376)#1447e6Yes
--sidebar-primary-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--sidebar-accentoklch(0.286 0.016 107.4)#2b2b22Yes
--sidebar-accent-foregroundoklch(0.988 0.003 106.5)#fbfbf9Yes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.58 0.031 107.3)#7c7c67Yes

Contrast audit (WCAG 2)

20 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#0c0c09 on #ffffff19.58:1106PassPassPair page →
card-foreground on card#0c0c09 on #ffffff19.58:1106PassPassPair page →
popover-foreground on popover#0c0c09 on #ffffff19.58:1106PassPassPair page →
primary-foreground on primary#fbfbf9 on #1d1d1616.35:1-103PassPass
secondary-foreground on secondary#1d1d16 on #f4f4f015.36:197PassPass
muted-foreground on muted#7c7c67 on #f4f4f03.85:163FailPassSet muted-foreground to oklch(0.540 0.031 107.3) (#70705c, 4.57:1).
muted-foreground on background#7c7c67 on #ffffff4.25:169FailPassSet muted-foreground to oklch(0.540 0.031 107.3) (#70705c, 5.04:1). Pair page →
accent-foreground on accent#1d1d16 on #f4f4f015.36:197PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#0c0c09 on #fbfbf918.90:1103PassPass
sidebar-primary-foreground on sidebar-primary#fbfbf9 on #1d1d1616.35:1-103PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#fbfbf9 on #0c0c0918.90:1-105PassPass
card-foreground on card#fbfbf9 on #1d1d1616.35:1-103PassPass
popover-foreground on popover#fbfbf9 on #1d1d1616.35:1-103PassPass
primary-foreground on primary#1d1d16 on #e8e8e313.78:190PassPass
secondary-foreground on secondary#fbfbf9 on #2b2b2213.77:1-101PassPass
muted-foreground on muted#abab9c on #2b2b226.14:1-52PassPass
muted-foreground on background#abab9c on #0c0c098.42:1-56PassPass
accent-foreground on accent#fbfbf9 on #2b2b2213.77:1-101PassPass
destructive on background#ff6467 on #0c0c096.78:1-47PassPass
sidebar-foreground on sidebar#fbfbf9 on #1d1d1616.35:1-103PassPass
sidebar-primary-foreground on sidebar-primary#fbfbf9 on #1447e66.59:1-85PassPass

Copy code

shadcn/ui v4 globals.css (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.153 0.006 107.1);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.153 0.006 107.1);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.153 0.006 107.1);
  --primary: oklch(0.228 0.013 107.4);
  --primary-foreground: oklch(0.988 0.003 106.5);
  --secondary: oklch(0.966 0.005 106.5);
  --secondary-foreground: oklch(0.228 0.013 107.4);
  --muted: oklch(0.966 0.005 106.5);
  --muted-foreground: oklch(0.58 0.031 107.3);
  --accent: oklch(0.966 0.005 106.5);
  --accent-foreground: oklch(0.228 0.013 107.4);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.93 0.007 106.5);
  --input: oklch(0.93 0.007 106.5);
  --ring: oklch(0.737 0.021 106.9);
  --chart-1: oklch(0.88 0.011 106.6);
  --chart-2: oklch(0.58 0.031 107.3);
  --chart-3: oklch(0.466 0.025 107.3);
  --chart-4: oklch(0.394 0.023 107.4);
  --chart-5: oklch(0.286 0.016 107.4);
  --radius: 0.625rem;
  --sidebar: oklch(0.988 0.003 106.5);
  --sidebar-foreground: oklch(0.153 0.006 107.1);
  --sidebar-primary: oklch(0.228 0.013 107.4);
  --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
  --sidebar-accent: oklch(0.966 0.005 106.5);
  --sidebar-accent-foreground: oklch(0.228 0.013 107.4);
  --sidebar-border: oklch(0.93 0.007 106.5);
  --sidebar-ring: oklch(0.737 0.021 106.9);
}

.dark {
  --background: oklch(0.153 0.006 107.1);
  --foreground: oklch(0.988 0.003 106.5);
  --card: oklch(0.228 0.013 107.4);
  --card-foreground: oklch(0.988 0.003 106.5);
  --popover: oklch(0.228 0.013 107.4);
  --popover-foreground: oklch(0.988 0.003 106.5);
  --primary: oklch(0.93 0.007 106.5);
  --primary-foreground: oklch(0.228 0.013 107.4);
  --secondary: oklch(0.286 0.016 107.4);
  --secondary-foreground: oklch(0.988 0.003 106.5);
  --muted: oklch(0.286 0.016 107.4);
  --muted-foreground: oklch(0.737 0.021 106.9);
  --accent: oklch(0.286 0.016 107.4);
  --accent-foreground: oklch(0.988 0.003 106.5);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.58 0.031 107.3);
  --chart-1: oklch(0.88 0.011 106.6);
  --chart-2: oklch(0.58 0.031 107.3);
  --chart-3: oklch(0.466 0.025 107.3);
  --chart-4: oklch(0.394 0.023 107.4);
  --chart-5: oklch(0.286 0.016 107.4);
  --sidebar: oklch(0.228 0.013 107.4);
  --sidebar-foreground: oklch(0.988 0.003 106.5);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
  --sidebar-accent: oklch(0.286 0.016 107.4);
  --sidebar-accent-foreground: oklch(0.988 0.003 106.5);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.58 0.031 107.3);
}

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: #0c0c09;
  --card: #ffffff;
  --card-foreground: #0c0c09;
  --popover: #ffffff;
  --popover-foreground: #0c0c09;
  --primary: #1d1d16;
  --primary-foreground: #fbfbf9;
  --secondary: #f4f4f0;
  --secondary-foreground: #1d1d16;
  --muted: #f4f4f0;
  --muted-foreground: #7c7c67;
  --accent: #f4f4f0;
  --accent-foreground: #1d1d16;
  --destructive: #e7000b;
  --border: #e8e8e3;
  --input: #e8e8e3;
  --ring: #abab9c;
  --chart-1: #d8d8d0;
  --chart-2: #7c7c67;
  --chart-3: #5b5b4b;
  --chart-4: #474739;
  --chart-5: #2b2b22;
  --radius: 0.625rem;
  --sidebar: #fbfbf9;
  --sidebar-foreground: #0c0c09;
  --sidebar-primary: #1d1d16;
  --sidebar-primary-foreground: #fbfbf9;
  --sidebar-accent: #f4f4f0;
  --sidebar-accent-foreground: #1d1d16;
  --sidebar-border: #e8e8e3;
  --sidebar-ring: #abab9c;
}

.dark {
  --background: #0c0c09;
  --foreground: #fbfbf9;
  --card: #1d1d16;
  --card-foreground: #fbfbf9;
  --popover: #1d1d16;
  --popover-foreground: #fbfbf9;
  --primary: #e8e8e3;
  --primary-foreground: #1d1d16;
  --secondary: #2b2b22;
  --secondary-foreground: #fbfbf9;
  --muted: #2b2b22;
  --muted-foreground: #abab9c;
  --accent: #2b2b22;
  --accent-foreground: #fbfbf9;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #7c7c67;
  --chart-1: #d8d8d0;
  --chart-2: #7c7c67;
  --chart-3: #5b5b4b;
  --chart-4: #474739;
  --chart-5: #2b2b22;
  --sidebar: #1d1d16;
  --sidebar-foreground: #fbfbf9;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fbfbf9;
  --sidebar-accent: #2b2b22;
  --sidebar-accent-foreground: #fbfbf9;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #7c7c67;
}

Related colours

Light primary: oklch(0.228 0.013 107.4) · #1d1d16

← All shadcn/ui themes