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 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).
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)#27272AHighest contrast: white
14.89:1Normal AAmeets WCAG 2.2Normal AAAmeets WCAG 2.2Large AAmeets WCAG 2.2Large AAAmeets WCAG 2.2Lc +101.77Accessibility 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?
- Primitive
- Semantic
- 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: #27272AOne 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.
On-color text: white (14.89:1 on #27272A).
How does shadcn Zinc Dark scale from 50 to 950?
- 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.
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.90Below AA
Neutral 600 #525252
- Aa1.20Below AA
Neutral 900 #171717
- Aa1.40Below 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?
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.40: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?
Other shadcn themes
shadcn Primary Blue in OKLCH
oklch(0.623 0.188 259.80)
shadcn Slate Accessible in OKLCH
oklch(0.279 0.037 260.00)
shadcn Indigo Custom in OKLCH
oklch(0.585 0.204 277.10)
shadcn Orange in OKLCH
oklch(0.705 0.187 47.60)
shadcn Green in OKLCH
oklch(0.723 0.192 149.60)
shadcn Red in OKLCH
oklch(0.637 0.208 25.30)
shadcn Violet in OKLCH
oklch(0.606 0.219 292.70)
Nearest hues across families
shadcn :root block
: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.
FAQ
Frequently asked questions
shadcn Zinc Dark (#27272A) is oklch(0.274 0.005 286) in the OKLCH color space.
shadcn Zinc Dark passes WCAG 2.2 AA on white for normal text. Contrast ratios: 14.89:1 on white, 1.4:1 on black.
On white, shadcn Zinc Dark has an APCA Lc of 101.8. On black, Lc is 0. APCA is a perceptual contrast model, not a WCAG compliance standard.
Paste the snippet above into your globals.css (with :root and .dark blocks).
Under deuteranopia (most common, around 5 percent of men), shadcn Zinc Dark simulates to #272729. Under protanopia it shifts to #272729. Under tritanopia it appears as #272929. Always pair color with shape, label, or icon for accessibility.
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.