paletta

Token de shadcn

shadcn Zinc Dark en OKLCH

Quick answer: shadcn Zinc Dark es #27272A, que convierte a oklch(0.274 0.005 286.00). Sobre blanco, tiene una relación de contraste WCAG de 14.89:1 y un puntaje APCA de Lc +101.77.

Esto cumple el umbral de texto AAA de WCAG 2.2 (7:1) sobre blanco. Los colores base OKLCH usados aquí están disponibles en shadcn/ui desde la actualización de Tailwind v4 (February 2025), con 92% de soporte global en navegadores para la notación OKLCH (caniuse, April 2026).

oklch(0.274 0.005 286.00)

shadcn Zinc Dark es un token de tema de shadcn. Esta página presenta #27272A como token de tema: pega los bloques :root y .dark de abajo para aplicar el tema a todos los componentes a la vez.

  • Especificaciones

    oklch(0.274 0.005 286.00)
    #27272A

    Mayor contraste: white

    14.89:1
    Normal AAcumple con WCAG 2.2
    Normal AAAcumple con WCAG 2.2
    Large AAcumple con WCAG 2.2
    Large AAAcumple con WCAG 2.2
    Lc +101.77
    Probar en Studio

  • Lente de accesibilidad

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

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

¿Cómo pasa shadcn Zinc Dark de primitivo a componente?

  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).

¿Cómo escala shadcn Zinc Dark de 50 a 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)

¿Qué puntaje obtiene shadcn Zinc Dark en contraste WCAG 2.2?

Cada combinación de primer plano y fondo, con el veredicto de WCAG 2.2.

AAA (7:1+)
AA (4.5:1+)
No cumple AA (menos de 4.5:1)
Pasa el cursor para ver APCA
Aa1.00Below AA
Aa2.54Below AA
Aa7.97AAA
Aa14.91AAA
Aa17.03AAA
Aa18.48AAA
Aa2.54Below AA
Aa1.00Below AA
Aa3.13Below AA
Aa5.86AA
Aa6.69AA
Aa7.26AAA
Aa7.97AAA
Aa3.13Below AA
Aa1.00Below AA
Aa1.86Below AA
Aa2.13Below AA
Aa2.31Below AA
Aa14.91AAA
Aa5.86AA
Aa1.86Below AA
Aa1.00Below AA
Aa1.14Below AA
Aa1.23Below AA
Aa17.03AAA
Aa6.69AA
Aa2.13Below AA
Aa1.14Below AA
Aa1.00Below AA
Aa1.08Below AA
Aa18.48AAA
Aa7.26AAA
Aa2.31Below AA
Aa1.23Below AA
Aa1.08Below AA
Aa1.00Below AA

¿shadcn Zinc Dark cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa14.89AAA

    Blanco #FFFFFF

  • Aa13.66AAA

    Neutro 100 #F5F5F5

  • Aa11.82AAA

    Neutro 200 #E5E5E5

  • Aa5.90AA

    Neutro 400 #A3A3A3

  • Aa1.90Below AA

    Neutro 600 #525252

  • Aa1.20Below AA

    Neutro 900 #171717

  • Aa1.40Below AA

    Negro #000000

¿Qué paletas combinan con shadcn Zinc Dark?

  • Análogos

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

  • Complementarios

    • #4C4C52
    • #27272A

  • Triádicos

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

¿Dónde usar shadcn Zinc Dark en UI de producción?

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 / white
$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 · fg: white
"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-600 / whitebutton-secondary: primary-50 / primary-700
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notas sobre shadcn Zinc Dark

Zinc Dark no es realmente un matiz, es una superficie, oklch(0.274 0.005 286) con casi nada de croma. En un tema de shadcn es el valor detrás de las tarjetas, los popovers y el fondo de modo oscuro, el piso silencioso sobre el que se apoya todo lo demás. Como color de tinta se lee en WCAG 2.2 AAA sobre blanco (14.89:1, APCA Lc +101.77), así que el texto o los íconos en #27272A sobre una página clara son tan legibles como el casi negro. Lo inverso es la regla que no puedes romper: sobre un fondo negro verdadero cae en Below AA (1.40:1), así que nunca lo pongas como texto sobre negro, solo como el panel que sostiene texto más claro. Sus armonías son casi irrelevantes por diseño; el complementario #4C4C52 es apenas un carbón más claro para bordes. El lente de accesibilidad lo deja intacto, la protanopia, la deuteranopia y la tritanopia caen todas dentro de un tono de #272729, que es exactamente lo que quieres de un neutro: nunca cambia la historia para nadie.

¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Zinc Dark?

Bloque :root de shadcn

: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;
}

¿Cómo exportas shadcn Zinc Dark como design tokens?

Exporta un documento de tokens W3C DTCG para la escala de shadcn Zinc Dark de 50 a 950, listo para Style Dictionary o cualquier pipeline compatible con DTCG.

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.

¿Listo para construir tu sistema de color?

Gratis para siempre, sin tarjeta, Pro cuando necesites más.

Hecho por un diseñador de producto que publica en código.

Genera un sistema Ver precios