OKLCH Studio

OKLCH Studio · shadcn/ui base colour

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

shadcn/ui Mist: primary #161b1d light / #e3e7e8 dark (oklch(0.218 0.008 223.9)). 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.

Mist 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

Mist light mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(1 0 0)#ffffffYes
--foregroundoklch(0.148 0.004 228.8)#090b0cYes
--cardoklch(1 0 0)#ffffffYes
--card-foregroundoklch(0.148 0.004 228.8)#090b0cYes
--popoveroklch(1 0 0)#ffffffYes
--popover-foregroundoklch(0.148 0.004 228.8)#090b0cYes
--primaryoklch(0.218 0.008 223.9)#161b1dYes
--primary-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--secondaryoklch(0.963 0.002 197.1)#f1f3f3Yes
--secondary-foregroundoklch(0.218 0.008 223.9)#161b1dYes
--mutedoklch(0.963 0.002 197.1)#f1f3f3Yes
--muted-foregroundoklch(0.56 0.021 213.5)#67787cYes
--accentoklch(0.963 0.002 197.1)#f1f3f3Yes
--accent-foregroundoklch(0.218 0.008 223.9)#161b1dYes
--destructiveoklch(0.577 0.245 27.325)#e7000bNo — hex is clipped
--borderoklch(0.925 0.005 214.3)#e3e7e8Yes
--inputoklch(0.925 0.005 214.3)#e3e7e8Yes
--ringoklch(0.723 0.014 214.4)#9ca8abYes
--chart-1oklch(0.872 0.007 219.6)#d0d6d8Yes
--chart-2oklch(0.56 0.021 213.5)#67787cYes
--chart-3oklch(0.45 0.017 213.2)#4b585bYes
--chart-4oklch(0.378 0.015 216)#394447Yes
--chart-5oklch(0.275 0.011 216.9)#22292bYes
--sidebaroklch(0.987 0.002 197.1)#f9fbfbYes
--sidebar-foregroundoklch(0.148 0.004 228.8)#090b0cYes
--sidebar-primaryoklch(0.218 0.008 223.9)#161b1dYes
--sidebar-primary-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--sidebar-accentoklch(0.963 0.002 197.1)#f1f3f3Yes
--sidebar-accent-foregroundoklch(0.218 0.008 223.9)#161b1dYes
--sidebar-borderoklch(0.925 0.005 214.3)#e3e7e8Yes
--sidebar-ringoklch(0.723 0.014 214.4)#9ca8abYes

dark mode tokens

Mist dark mode colour tokens with oklch, hex and sRGB gamut
TokenSwatchoklch()HexIn sRGB
--backgroundoklch(0.148 0.004 228.8)#090b0cYes
--foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--cardoklch(0.218 0.008 223.9)#161b1dYes
--card-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--popoveroklch(0.218 0.008 223.9)#161b1dYes
--popover-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--primaryoklch(0.925 0.005 214.3)#e3e7e8Yes
--primary-foregroundoklch(0.218 0.008 223.9)#161b1dYes
--secondaryoklch(0.275 0.011 216.9)#22292bYes
--secondary-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--mutedoklch(0.275 0.011 216.9)#22292bYes
--muted-foregroundoklch(0.723 0.014 214.4)#9ca8abYes
--accentoklch(0.275 0.011 216.9)#22292bYes
--accent-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--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.56 0.021 213.5)#67787cYes
--chart-1oklch(0.872 0.007 219.6)#d0d6d8Yes
--chart-2oklch(0.56 0.021 213.5)#67787cYes
--chart-3oklch(0.45 0.017 213.2)#4b585bYes
--chart-4oklch(0.378 0.015 216)#394447Yes
--chart-5oklch(0.275 0.011 216.9)#22292bYes
--sidebaroklch(0.218 0.008 223.9)#161b1dYes
--sidebar-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--sidebar-primaryoklch(0.488 0.243 264.376)#1447e6Yes
--sidebar-primary-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--sidebar-accentoklch(0.275 0.011 216.9)#22292bYes
--sidebar-accent-foregroundoklch(0.987 0.002 197.1)#f9fbfbYes
--sidebar-borderoklch(1 0 0 / 10%)#ffffff (10% alpha)Yes
--sidebar-ringoklch(0.56 0.021 213.5)#67787cYes

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#090b0c on #ffffff19.72:1106PassPassPair page →
card-foreground on card#090b0c on #ffffff19.72:1106PassPassPair page →
popover-foreground on popover#090b0c on #ffffff19.72:1106PassPassPair page →
primary-foreground on primary#f9fbfb on #161b1d16.72:1-104PassPass
secondary-foreground on secondary#161b1d on #f1f3f315.60:197PassPass
muted-foreground on muted#67787c on #f1f3f34.13:165FailPassSet muted-foreground to oklch(0.520 0.021 213.5) (#5c6c70, 4.91:1).
muted-foreground on background#67787c on #ffffff4.61:172PassPassPair page →
accent-foreground on accent#161b1d on #f1f3f315.60:197PassPass
destructive on background#e7000b on #ffffff4.76:170PassPassPair page →
sidebar-foreground on sidebar#090b0c on #f9fbfb18.98:1103PassPass
sidebar-primary-foreground on sidebar-primary#f9fbfb on #161b1d16.72:1-104PassPass
dark mode
PairRatioAPCA LcAA 4.5AA large 3Fix / details
foreground on background#f9fbfb on #090b0c18.98:1-105PassPass
card-foreground on card#f9fbfb on #161b1d16.72:1-104PassPass
popover-foreground on popover#f9fbfb on #161b1d16.72:1-104PassPass
primary-foreground on primary#161b1d on #e3e7e813.95:190PassPass
secondary-foreground on secondary#f9fbfb on #22292b14.23:1-102PassPass
muted-foreground on muted#9ca8ab on #22292b6.05:1-51PassPass
muted-foreground on background#9ca8ab on #090b0c8.07:1-54PassPass
accent-foreground on accent#f9fbfb on #22292b14.23:1-102PassPass
destructive on background#ff6467 on #090b0c6.82:1-47PassPass
sidebar-foreground on sidebar#f9fbfb on #161b1d16.72:1-104PassPass
sidebar-primary-foreground on sidebar-primary#f9fbfb on #1447e66.57:1-85PassPass

Copy code

shadcn/ui v4 globals.css (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.148 0.004 228.8);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.148 0.004 228.8);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.148 0.004 228.8);
  --primary: oklch(0.218 0.008 223.9);
  --primary-foreground: oklch(0.987 0.002 197.1);
  --secondary: oklch(0.963 0.002 197.1);
  --secondary-foreground: oklch(0.218 0.008 223.9);
  --muted: oklch(0.963 0.002 197.1);
  --muted-foreground: oklch(0.56 0.021 213.5);
  --accent: oklch(0.963 0.002 197.1);
  --accent-foreground: oklch(0.218 0.008 223.9);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.925 0.005 214.3);
  --input: oklch(0.925 0.005 214.3);
  --ring: oklch(0.723 0.014 214.4);
  --chart-1: oklch(0.872 0.007 219.6);
  --chart-2: oklch(0.56 0.021 213.5);
  --chart-3: oklch(0.45 0.017 213.2);
  --chart-4: oklch(0.378 0.015 216);
  --chart-5: oklch(0.275 0.011 216.9);
  --radius: 0.625rem;
  --sidebar: oklch(0.987 0.002 197.1);
  --sidebar-foreground: oklch(0.148 0.004 228.8);
  --sidebar-primary: oklch(0.218 0.008 223.9);
  --sidebar-primary-foreground: oklch(0.987 0.002 197.1);
  --sidebar-accent: oklch(0.963 0.002 197.1);
  --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
  --sidebar-border: oklch(0.925 0.005 214.3);
  --sidebar-ring: oklch(0.723 0.014 214.4);
}

.dark {
  --background: oklch(0.148 0.004 228.8);
  --foreground: oklch(0.987 0.002 197.1);
  --card: oklch(0.218 0.008 223.9);
  --card-foreground: oklch(0.987 0.002 197.1);
  --popover: oklch(0.218 0.008 223.9);
  --popover-foreground: oklch(0.987 0.002 197.1);
  --primary: oklch(0.925 0.005 214.3);
  --primary-foreground: oklch(0.218 0.008 223.9);
  --secondary: oklch(0.275 0.011 216.9);
  --secondary-foreground: oklch(0.987 0.002 197.1);
  --muted: oklch(0.275 0.011 216.9);
  --muted-foreground: oklch(0.723 0.014 214.4);
  --accent: oklch(0.275 0.011 216.9);
  --accent-foreground: oklch(0.987 0.002 197.1);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.56 0.021 213.5);
  --chart-1: oklch(0.872 0.007 219.6);
  --chart-2: oklch(0.56 0.021 213.5);
  --chart-3: oklch(0.45 0.017 213.2);
  --chart-4: oklch(0.378 0.015 216);
  --chart-5: oklch(0.275 0.011 216.9);
  --sidebar: oklch(0.218 0.008 223.9);
  --sidebar-foreground: oklch(0.987 0.002 197.1);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.987 0.002 197.1);
  --sidebar-accent: oklch(0.275 0.011 216.9);
  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.56 0.021 213.5);
}

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: #090b0c;
  --card: #ffffff;
  --card-foreground: #090b0c;
  --popover: #ffffff;
  --popover-foreground: #090b0c;
  --primary: #161b1d;
  --primary-foreground: #f9fbfb;
  --secondary: #f1f3f3;
  --secondary-foreground: #161b1d;
  --muted: #f1f3f3;
  --muted-foreground: #67787c;
  --accent: #f1f3f3;
  --accent-foreground: #161b1d;
  --destructive: #e7000b;
  --border: #e3e7e8;
  --input: #e3e7e8;
  --ring: #9ca8ab;
  --chart-1: #d0d6d8;
  --chart-2: #67787c;
  --chart-3: #4b585b;
  --chart-4: #394447;
  --chart-5: #22292b;
  --radius: 0.625rem;
  --sidebar: #f9fbfb;
  --sidebar-foreground: #090b0c;
  --sidebar-primary: #161b1d;
  --sidebar-primary-foreground: #f9fbfb;
  --sidebar-accent: #f1f3f3;
  --sidebar-accent-foreground: #161b1d;
  --sidebar-border: #e3e7e8;
  --sidebar-ring: #9ca8ab;
}

.dark {
  --background: #090b0c;
  --foreground: #f9fbfb;
  --card: #161b1d;
  --card-foreground: #f9fbfb;
  --popover: #161b1d;
  --popover-foreground: #f9fbfb;
  --primary: #e3e7e8;
  --primary-foreground: #161b1d;
  --secondary: #22292b;
  --secondary-foreground: #f9fbfb;
  --muted: #22292b;
  --muted-foreground: #9ca8ab;
  --accent: #22292b;
  --accent-foreground: #f9fbfb;
  --destructive: #ff6467;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #67787c;
  --chart-1: #d0d6d8;
  --chart-2: #67787c;
  --chart-3: #4b585b;
  --chart-4: #394447;
  --chart-5: #22292b;
  --sidebar: #161b1d;
  --sidebar-foreground: #f9fbfb;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #f9fbfb;
  --sidebar-accent: #22292b;
  --sidebar-accent-foreground: #f9fbfb;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #67787c;
}

Related colours

Light primary: oklch(0.218 0.008 223.9) · #161b1d

← All shadcn/ui themes