shadcn Red en OKLCH
Quick answer: shadcn Red es #EF4444, que convierte a oklch(0.637 0.208 25.30). Sobre blanco, tiene una relación de contraste WCAG de 3.76:1 y un puntaje APCA de Lc +63.83.
Esto cumple el umbral de texto AA Large de WCAG 2.2 (3: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 Red es un token de tema de shadcn. Esta página presenta #EF4444 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: black
Lente de accesibilidad
- Base#EF4444
- 300#FF8980
- 500#EF4444
- 700#9B0014
Toggle a lens to preview this color under color vision differences.
¿Cómo pasa shadcn Red de primitivo a componente?
- Primitive
- Semantic
- Component
Primitive
The raw value, before it means anything.
- hex
- #EF4444
- oklch
- oklch(0.637 0.208 25.30)
Semantic
Bound to a role token that UI reads by name.
--primary: #EF4444One 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: black (5.58:1 on #EF4444).
¿Cómo escala shadcn Red de 50 a 950?
- 50oklch(0.955 0.023 31.10)
- 100oklch(0.890 0.058 26.23)
- 200oklch(0.823 0.099 26.25)
- 300oklch(0.758 0.145 25.58)
- 400oklch(0.703 0.188 25.36)
- 500oklch(0.637 0.208 25.33)
- 600oklch(0.535 0.197 25.23)
- 700oklch(0.434 0.176 25.52)
- 800oklch(0.341 0.139 27.53)
- 900oklch(0.245 0.101 29.23)
- 950oklch(0.150 0.062 29.23)
¿Qué puntaje obtiene shadcn Red en contraste WCAG 2.2?
Cada combinación de primer plano y fondo, con el veredicto de WCAG 2.2.
¿shadcn Red cumple WCAG 2.2 sobre fondos neutros comunes?
- Aa3.76Below AA
Blanco #FFFFFF
- Aa3.45Below AA
Neutro 100 #F5F5F5
- Aa2.99Below AA
Neutro 200 #E5E5E5
- Aa1.49Below AA
Neutro 400 #A3A3A3
- Aa2.08Below AA
Neutro 600 #525252
- Aa4.76AA
Neutro 900 #171717
- Aa5.58AA
Negro #000000
¿Qué paletas combinan con shadcn Red?
Análogos
- #EF44D2
- #EF448B
- #EF4444
- #EF8B44
- #EFD344
Complementarios
- #F58A8A
- #EF4444
Triádicos
- #EF4444
- #C61111
- #44EF44
¿Dónde usar shadcn Red en UI de producción?
Notas sobre shadcn Red
Red es la base destructiva de shadcn, oklch(0.637 0.208 25.3), el valor detrás de los botones de eliminar, el texto de error y los banners de peligro. Como texto blanco sobre un relleno rojo alcanza AA Large (3.76:1) bajo WCAG 2.2, adecuado para una etiqueta de botón grande estándar pero justo para texto pequeño, así que mantén el texto destructivo en ese tamaño u oscurece una variante. Ese mismo rojo como texto sobre una tarjeta casi negra es más fuerte, AA (5.58:1, APCA Lc -37.85). Su tríada es una advertencia en sí misma: combina #EF4444 con un verde #44EF44, y bajo la lente de accesibilidad esa combinación es una trampa, porque la protanopia y la deuteranopia convierten este rojo en olivo (#AFBC44) mientras desplazan los verdes de forma similar. Un esquema de rojo contra verde para destructivo y éxito puede convertirse en un solo color indistinguible para personas con visión rojo-verde. La tritanopia mantiene el rojo (#E64444). Acompaña siempre el significado destructivo con un ícono y un verbo, y nunca dependas solo del rojo contra el verde.
¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Red?
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 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 Violet en OKLCH
oklch(0.606 0.219 292.70)
Matices más cercanos entre familias
:root {
--background: 0 7% 97%;
--foreground: 0 6% 10%;
--card: 0 7% 97%;
--card-foreground: 0 6% 10%;
--popover: 0 7% 97%;
--popover-foreground: 0 6% 10%;
--primary: 0 84% 60%;
--primary-foreground: 0 0% 100%;
--secondary: 29 73% 88%;
--secondary-foreground: 31 100% 10%;
--muted: 0 7% 94%;
--muted-foreground: 0 6% 50%;
--accent: 335 100% 91%;
--accent-foreground: 325 90% 12%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 0 5% 88%;
--input: 0 5% 88%;
--ring: 0 84% 60%;
--radius: 0.5rem;
}
.dark {
--background: 0 7% 6%;
--foreground: 0 7% 97%;
--card: 0 6% 10%;
--card-foreground: 0 7% 97%;
--popover: 0 6% 10%;
--popover-foreground: 0 7% 97%;
--primary: 2 100% 69%;
--primary-foreground: 0 0% 100%;
--secondary: 32 73% 20%;
--secondary-foreground: 29 73% 88%;
--muted: 0 7% 18%;
--muted-foreground: 0 6% 64%;
--accent: 327 64% 23%;
--accent-foreground: 335 100% 91%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 0 7% 18%;
--input: 0 7% 18%;
--ring: 2 100% 69%;
--radius: 0.5rem;
}¿Cómo exportas shadcn Red como design tokens?
Exporta un documento de tokens W3C DTCG para la escala de shadcn Red 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.