paletta
shadcn token

shadcn Zinc Dark in OKLCH

Quick answer: shadcn Zinc Dark is #27272A, which converts to oklch(0.274 0.005 286.00). On white, it has a WCAG contrast ratio of 14.89:1 and an APCA score of Lc +101.77.

This meets the WCAG 2.2 AAA Normal text threshold (7:1) on white. The OKLCH base colors used here are available in shadcn/ui since the Tailwind v4 update (February 2025), with 92% global browser support for OKLCH notation (caniuse, April 2026).

oklch(0.274 0.005 286.00)

Specs

oklch(0.274 0.005 286.00)
#27272A

Highest contrast: white

14.89:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc +101.77
Try in Studio

Accessibility lens

Protanopia#272729
Deuteranopia#272729
Tritanopia#272929

How does shadcn Zinc Dark scale from 50 to 950?

shadcn Zinc Dark
50 to 950
#F5F5F6
#C7C7C9
#9B9B9E
#727275
#4B4B4E
#27272A
#202023
#19191C
#131315
#0D0D0E
#070708
  • 50oklch(0.970 0.001 286.38)
  • 100oklch(0.830 0.003 286.34)
  • 200oklch(0.690 0.004 286.29)
  • 300oklch(0.553 0.005 286.25)
  • 400oklch(0.414 0.005 286.18)
  • 500oklch(0.274 0.005 286.03)
  • 600oklch(0.245 0.006 285.98)
  • 700oklch(0.215 0.006 285.90)
  • 800oklch(0.188 0.004 286.01)
  • 900oklch(0.160 0.002 286.16)
  • 950oklch(0.129 0.003 286.03)

How does shadcn Zinc Dark score on WCAG 2.2 contrast?

Every fg × bg combination, with WCAG 2.2 verdicts.

AAA (7:1+)
AA (4.5:1+)
Below AA (under 4.5:1)
Hover for APCA
Aa1.00Below AA
Aa2.54Below AA
Aa7.98AAA
Aa14.91AAA
Aa17.03AAA
Aa18.48AAA
Aa2.54Below AA
Aa1.00Below AA
Aa3.14Below AA
Aa5.86AA
Aa6.69AA
Aa7.26AAA
Aa7.98AAA
Aa3.14Below AA
Aa1.00Below AA
Aa1.87Below AA
Aa2.13Below AA
Aa2.32Below AA
Aa14.91AAA
Aa5.86AA
Aa1.87Below AA
Aa1.00Below AA
Aa1.14Below AA
Aa1.24Below AA
Aa17.03AAA
Aa6.69AA
Aa2.13Below AA
Aa1.14Below AA
Aa1.00Below AA
Aa1.09Below AA
Aa18.48AAA
Aa7.26AAA
Aa2.32Below AA
Aa1.24Below AA
Aa1.09Below AA
Aa1.00Below AA

Where should you use shadcn Zinc Dark in production UI?

bg: primary-50 · border: primary-100
Monthly revenue
$48,219
text: primary-900
+12.4% vs last mo.
badge: primary-100 / primary-700
primary-500
$8.2k
JANFEBMARAPRMAYJUNJUL
bg: primary-600 · fg: white
ONBOARDING · STEP 2
Export your first design system this week.
bg: surface · border: neutral-200
SYSTEM
All systems normal
APIprimary-50 / primary-700Webprimary-50 / primary-700Pluginprimary-50 / primary-700
Tokens
248
+18 this week
overlay: primary-700 → primary-800
"Paletta replaced our color brainstorm meetings."
Sora Mehta
Design lead, Northwind
EPISODE 14
Designing color systems that scale
28:14
bg: primary-900
--primary-500
#27272A
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600button-secondary: primary-50
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

What other Tailwind and shadcn colors look like shadcn Zinc Dark?

:root {
  --background: 240 7% 97%;
  --foreground: 240 6% 10%;
  --card: 240 7% 97%;
  --card-foreground: 240 6% 10%;
  --popover: 240 7% 97%;
  --popover-foreground: 240 6% 10%;
  --primary: 255 2% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 300 1% 86%;
  --secondary-foreground: 270 3% 15%;
  --muted: 240 7% 94%;
  --muted-foreground: 240 6% 50%;
  --accent: 180 1% 86%;
  --accent-foreground: 210 3% 15%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 5% 88%;
  --input: 240 5% 88%;
  --ring: 255 2% 49%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 7% 6%;
  --foreground: 240 7% 97%;
  --card: 240 6% 10%;
  --card-foreground: 240 7% 97%;
  --popover: 240 6% 10%;
  --popover-foreground: 240 7% 97%;
  --primary: 240 1% 59%;
  --primary-foreground: 0 0% 100%;
  --secondary: 280 2% 24%;
  --secondary-foreground: 300 1% 86%;
  --muted: 240 7% 18%;
  --muted-foreground: 240 6% 64%;
  --accent: 200 2% 24%;
  --accent-foreground: 180 1% 86%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 7% 18%;
  --input: 240 7% 18%;
  --ring: 240 1% 59%;
  --radius: 0.5rem;
}

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Get started for free See pricing