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)

shadcn Zinc Dark is a shadcn theme token. This page frames #27272A as a theme token: paste the :root and .dark blocks below to theme every component at once.

Specs

oklch(0.274 0.005 286.00)
#27272A

Highest contrast: white

14.89:1
Normal AAmeets WCAG 2.2
Normal AAAmeets WCAG 2.2
Large AAmeets WCAG 2.2
Large AAAmeets WCAG 2.2
Lc +101.77
Try in Studio

Accessibility lens

  • Base#27272A
  • 300#727275
  • 500#27272A
  • 700#19191C

Toggle a lens to preview this color under color vision differences.

How does shadcn Zinc Dark go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#27272A
oklch
oklch(0.274 0.005 286.00)

Semantic

Bound to a role token that UI reads by name.

--primary: #27272A

One primitive feeds the role. --primary then drives --ring and the hover and active states below, so a single value stays in sync everywhere.

Component

Applied to real UI across states.

AAA14.89:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (14.89:1 on #27272A).

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

Does shadcn Zinc Dark pass WCAG 2.2 on common neutral backgrounds?

  • Aa14.89AAA

    White #FFFFFF

  • Aa13.66AAA

    Neutral 100 #F5F5F5

  • Aa11.82AAA

    Neutral 200 #E5E5E5

  • Aa5.90AA

    Neutral 400 #A3A3A3

  • Aa1.91Below AA

    Neutral 600 #525252

  • Aa1.20Below AA

    Neutral 900 #171717

  • Aa1.41Below AA

    Black #000000

What palettes pair with shadcn Zinc Dark?

Analogous

  • #27292A
  • #27282A
  • #27272A
  • #28272A
  • #29272A

Complementary

  • #4C4C52
  • #27272A

Triadic

  • #27272A
  • #1D1D20
  • #2A2727

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
"One color system, every screen in sync."
Maya Okafor
Design systems lead
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

Notes on shadcn Zinc Dark

Zinc Dark is not really a hue, it is a surface, oklch(0.274 0.005 286) with almost no chroma. In a shadcn theme this is the value behind cards, popovers, and the dark-mode background, the quiet floor everything else sits on. As an ink color it reads at WCAG 2.2 AAA on white (14.89:1, APCA Lc +101.77), so #27272A text or icons on a light page are as legible as near-black. The inverse is the rule you cannot break: on a true black background it lands Below AA (1.41:1), so never set it as text on black, only as the panel that holds lighter text. Its harmonies are nearly meaningless by design; the complementary #4C4C52 is just a lighter charcoal for borders. The accessibility lens leaves it untouched, protanopia, deuteranopia, and tritanopia all land within a shade of #272729, which is exactly what you want from a neutral: it never changes the story for anyone.

What other Tailwind and shadcn colors relate to shadcn Zinc Dark?

Browse all colors

: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: 240 4% 16%;
  --primary-foreground: 0 0% 100%;
  --secondary: 300 1% 83%;
  --secondary-foreground: 270 5% 8%;
  --muted: 240 7% 94%;
  --muted-foreground: 240 6% 50%;
  --accent: 180 1% 83%;
  --accent-foreground: 180 2% 8%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 5% 88%;
  --input: 240 5% 88%;
  --ring: 240 4% 16%;
  --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 2% 30%;
  --primary-foreground: 0 0% 100%;
  --secondary: 260 4% 14%;
  --secondary-foreground: 300 1% 83%;
  --muted: 240 7% 18%;
  --muted-foreground: 240 6% 64%;
  --accent: 210 3% 14%;
  --accent-foreground: 180 1% 83%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 7% 18%;
  --input: 240 7% 18%;
  --ring: 240 2% 30%;
  --radius: 0.5rem;
}

How do you export shadcn Zinc Dark as design tokens?

Export a W3C DTCG token document for the shadcn Zinc Dark 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.

Frequently asked questions

Ready to build your color system?

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

Built by a product designer who ships to code.

Generate system See pricing