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 Normal 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).
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
Mayor contraste: white
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?
- 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).
¿Cómo escala shadcn Zinc Dark de 50 a 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)
¿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.
¿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.91Below AA
Neutro 600 #525252
- Aa1.20Below AA
Neutro 900 #171717
- Aa1.41Below 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?
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.41: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?
Otros temas de shadcn
shadcn Primary Blue en OKLCH
oklch(0.623 0.188 259.80)
shadcn Slate Accessible en OKLCH
oklch(0.279 0.037 260.00)
shadcn Indigo Custom en OKLCH
oklch(0.585 0.204 277.10)
shadcn Orange en OKLCH
oklch(0.705 0.187 47.60)
shadcn Green en OKLCH
oklch(0.723 0.192 149.60)
shadcn Red en OKLCH
oklch(0.637 0.208 25.30)
shadcn Violet en OKLCH
oklch(0.606 0.219 292.70)
Matices más cercanos entre familias
: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.
Frequently asked questions
¿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.