shadcn Slate Accessible en OKLCH
Quick answer: shadcn Slate Accessible es #1E293B, que convierte a oklch(0.279 0.037 260.00). Sobre blanco, tiene una relación de contraste WCAG de 14.63:1 y un puntaje APCA de Lc +101.41.
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 Slate Accessible es un token de tema de shadcn. Esta página presenta #1E293B 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#1E293B
- 300#6A7484
- 500#1E293B
- 700#121B29
Toggle a lens to preview this color under color vision differences.
¿Cómo pasa shadcn Slate Accessible de primitivo a componente?
- Primitive
- Semantic
- Component
Primitive
The raw value, before it means anything.
- hex
- #1E293B
- oklch
- oklch(0.279 0.037 260.00)
Semantic
Bound to a role token that UI reads by name.
--primary: #1E293BOne 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.63:1 on #1E293B).
¿Cómo escala shadcn Slate Accessible de 50 a 950?
- 50oklch(0.969 0.007 260.73)
- 100oklch(0.832 0.014 262.37)
- 200oklch(0.693 0.020 258.36)
- 300oklch(0.556 0.028 259.80)
- 400oklch(0.418 0.033 260.21)
- 500oklch(0.279 0.037 260.03)
- 600oklch(0.251 0.034 259.58)
- 700oklch(0.221 0.031 259.02)
- 800oklch(0.190 0.025 259.24)
- 900oklch(0.159 0.021 261.35)
- 950oklch(0.129 0.015 266.38)
¿Qué puntaje obtiene shadcn Slate Accessible en contraste WCAG 2.2?
Cada combinación de primer plano y fondo, con el veredicto de WCAG 2.2.
¿shadcn Slate Accessible cumple WCAG 2.2 sobre fondos neutros comunes?
- Aa14.63AAA
Blanco #FFFFFF
- Aa13.42AAA
Neutro 100 #F5F5F5
- Aa11.61AAA
Neutro 200 #E5E5E5
- Aa5.80AA
Neutro 400 #A3A3A3
- Aa1.87Below AA
Neutro 600 #525252
- Aa1.23Below AA
Neutro 900 #171717
- Aa1.44Below AA
Negro #000000
¿Qué paletas combinan con shadcn Slate Accessible?
Análogos
- #1E3B35
- #1E353B
- #1E293B
- #1F1E3B
- #2B1E3B
Complementarios
- #384C6E
- #1E293B
Triádicos
- #1E293B
- #151C29
- #3B1E29
¿Dónde usar shadcn Slate Accessible en UI de producción?
Notas sobre shadcn Slate Accessible
Slate Accessible es el slate casi negro, oklch(0.279 0.037 260), un poco más cálido y azulado que el zinc simple. Está construido para ser el color de texto y encabezados de alto contraste en un tema de shadcn, y los números lo respaldan: sobre blanco se lee en WCAG 2.2 AAA (14.63:1, APCA Lc +101.41), así que el texto de cuerpo, las etiquetas y los íconos en #1E293B se mantienen cómodos en cualquier tamaño. Trata el lado negro como fuera de límites; sobre una superficie negra verdadera cae en Below AA (1.44:1), así que es un primer plano para fondos claros, no un relleno para fondos oscuros. Cuando sí quieras profundidad en una tarjeta, el complementario #384C6E aporta un azul apagado, y el análogo #1E353B se inclina hacia el verde azulado para el chrome secundario. El lente de accesibilidad no es un problema aquí: las simulaciones de CVD se ubican en #222136 y #1F3332, tan cerca del origen que su papel como tinta confiable se mantiene para todo tipo de visión del color.
¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Slate Accessible?
Otros temas de shadcn
shadcn Primary Blue en OKLCH
oklch(0.623 0.188 259.80)
shadcn Zinc Dark en OKLCH
oklch(0.274 0.005 286.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: 220 6% 10%;
--card: 240 7% 97%;
--card-foreground: 220 6% 10%;
--popover: 240 7% 97%;
--popover-foreground: 220 6% 10%;
--primary: 217 33% 17%;
--primary-foreground: 0 0% 100%;
--secondary: 244 21% 84%;
--secondary-foreground: 247 36% 10%;
--muted: 240 7% 94%;
--muted-foreground: 216 6% 50%;
--accent: 188 17% 83%;
--accent-foreground: 187 50% 7%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 220 5% 88%;
--input: 220 5% 88%;
--ring: 217 33% 17%;
--radius: 0.5rem;
}
.dark {
--background: 210 7% 6%;
--foreground: 240 7% 97%;
--card: 220 6% 10%;
--card-foreground: 240 7% 97%;
--popover: 220 6% 10%;
--popover-foreground: 240 7% 97%;
--primary: 217 18% 32%;
--primary-foreground: 0 0% 100%;
--secondary: 247 32% 15%;
--secondary-foreground: 244 21% 84%;
--muted: 220 7% 18%;
--muted-foreground: 218 6% 64%;
--accent: 187 37% 13%;
--accent-foreground: 188 17% 83%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 220 7% 18%;
--input: 220 7% 18%;
--ring: 217 18% 32%;
--radius: 0.5rem;
}¿Cómo exportas shadcn Slate Accessible como design tokens?
Exporta un documento de tokens W3C DTCG para la escala de shadcn Slate Accessible 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.