paletta

Token de shadcn

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

oklch(0.637 0.208 25.30)

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

    oklch(0.637 0.208 25.30)
    #EF4444

    Mayor contraste: black

    5.58:1
    Normal AAcumple con WCAG 2.2
    Normal AAAno cumple con WCAG 2.2
    Large AAcumple con WCAG 2.2
    Large AAAcumple con WCAG 2.2
    Lc -37.85
    Probar en Studio

  • 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?

  1. Primitive
  2. Semantic
  3. 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: #EF4444

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.

AA5.58:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (5.58:1 on #EF4444).

¿Cómo escala shadcn Red de 50 a 950?

shadcn Red
50 to 950
#FFEBE7
#FFCDC7
#FFACA3
#FF8980
#FF6660
#EF4444
#C6222A
#9B0014
#6F0005
#450000
#1F0000
  • 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.

AAA (7:1+)
AA (4.5:1+)
No cumple AA (menos de 4.5:1)
Pasa el cursor para ver APCA
Aa1.00Below AA
Aa1.56Below AA
Aa2.49Below AA
Aa4.99AA
Aa10.89AAA
Aa17.28AAA
Aa1.56Below AA
Aa1.00Below AA
Aa1.59Below AA
Aa3.18Below AA
Aa6.96AA
Aa11.03AAA
Aa2.49Below AA
Aa1.59Below AA
Aa1.00Below AA
Aa1.99Below AA
Aa4.36Below AA
Aa6.91AA
Aa4.99AA
Aa3.18Below AA
Aa1.99Below AA
Aa1.00Below AA
Aa2.18Below AA
Aa3.46Below AA
Aa10.89AAA
Aa6.96AA
Aa4.36Below AA
Aa2.18Below AA
Aa1.00Below AA
Aa1.58Below AA
Aa17.28AAA
Aa11.03AAA
Aa6.91AA
Aa3.46Below AA
Aa1.58Below AA
Aa1.00Below AA

¿shadcn Red cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa3.76Below AA

    Blanco #FFFFFF

  • Aa3.45Below AA

    Neutro 100 #F5F5F5

  • Aa2.98Below AA

    Neutro 200 #E5E5E5

  • Aa1.49Below AA

    Neutro 400 #A3A3A3

  • Aa2.07Below 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?

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 / black
$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
#EF4444
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 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?

Bloque :root de shadcn

: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% 0%;
  --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% 0%;
  --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.

FAQ

Frequently asked questions

shadcn Red (#EF4444) is oklch(0.637 0.208 25.3) in the OKLCH color space.

shadcn Red passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.76:1 on white, 5.58:1 on black.

On white, shadcn Red has an APCA Lc of 63.8. On black, Lc is -37.8. 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 Red simulates to #afbc44. Under protanopia it shifts to #a5a344. Under tritanopia it appears as #e64444. 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