paletta
Token de Tailwind CSS

Tailwind Rose 600 en OKLCH

Quick answer: Tailwind Rose 600 es #E11D48, que convierte a oklch(0.586 0.222 17.60). Sobre blanco, tiene una relación de contraste WCAG de 4.70:1 y un puntaje APCA de Lc +70.50.

Esto cumple el umbral de texto AA Normal de WCAG 2.2 (4.5:1) sobre blanco. Este color se lanzó en Tailwind CSS v4.0 (January 2025) como parte de la paleta OKLCH predeterminada, que tiene 92% de soporte global en navegadores (caniuse, April 2026).

oklch(0.586 0.222 17.60)

Tailwind Rose 600 es un color utilitario de Tailwind. Esta página presenta #E11D48 como un stop utilitario: copia la escala @theme generada abajo, o mapéala a tus propios tokens.

Especificaciones

oklch(0.586 0.222 17.60)
#E11D48

Mayor contraste: white

4.70: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 +70.50
Probar en Studio

Lente de accesibilidad

  • Base#E11D48
  • 300#FF7983
  • 500#E11D48
  • 700#94001F

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

¿Cómo pasa Tailwind Rose 600 de primitivo a componente?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#E11D48
oklch
oklch(0.586 0.222 17.60)

Semantic

Bound to a role token that UI reads by name.

--primary: #E11D48

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.

AA4.70:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (4.70:1 on #E11D48).

¿Cómo escala Tailwind Rose 600 de 50 a 950?

Tailwind Rose 600
50 to 950
#FFEAEA
#FFC8C9
#FFA2A6
#FF7983
#F45064
#E11D48
#BC0031
#94001F
#6A0010
#430004
#200000
  • 50oklch(0.954 0.023 17.56)
  • 100oklch(0.882 0.063 17.20)
  • 200oklch(0.806 0.111 17.02)
  • 300oklch(0.735 0.163 17.38)
  • 400oklch(0.662 0.199 17.56)
  • 500oklch(0.586 0.222 17.58)
  • 600oklch(0.503 0.202 19.44)
  • 700oklch(0.421 0.170 21.59)
  • 800oklch(0.331 0.134 23.17)
  • 900oklch(0.241 0.098 25.47)
  • 950oklch(0.153 0.063 29.23)

¿Qué puntaje obtiene Tailwind Rose 600 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.66Below AA
Aa2.95Below AA
Aa5.72AA
Aa11.24AAA
Aa17.16AAA
Aa1.66Below AA
Aa1.00Below AA
Aa1.78Below AA
Aa3.45Below AA
Aa6.77AA
Aa10.34AAA
Aa2.95Below AA
Aa1.78Below AA
Aa1.00Below AA
Aa1.94Below AA
Aa3.81Below AA
Aa5.82AA
Aa5.72AA
Aa3.45Below AA
Aa1.94Below AA
Aa1.00Below AA
Aa1.96Below AA
Aa3.00Below AA
Aa11.24AAA
Aa6.77AA
Aa3.81Below AA
Aa1.96Below AA
Aa1.00Below AA
Aa1.53Below AA
Aa17.16AAA
Aa10.34AAA
Aa5.82AA
Aa3.00Below AA
Aa1.53Below AA
Aa1.00Below AA

¿Tailwind Rose 600 cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa4.70AA

    Blanco #FFFFFF

  • Aa4.31Below AA

    Neutro 100 #F5F5F5

  • Aa3.73Below AA

    Neutro 200 #E5E5E5

  • Aa1.86Below AA

    Neutro 400 #A3A3A3

  • Aa1.66Below AA

    Neutro 600 #525252

  • Aa3.82Below AA

    Neutro 900 #171717

  • Aa4.47Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Rose 600?

Análogos

  • #D71DE1
  • #E11D9A
  • #E11D48
  • #E1441D
  • #E1951D

Complementarios

  • #EB607E
  • #E11D48

Triádicos

  • #E11D48
  • #90132E
  • #48E11D

¿Dónde usar Tailwind Rose 600 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
$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
"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
#E11D48
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600button-secondary: primary-50
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notas sobre Tailwind Rose 600

Rose 600 es el punto medio equilibrado de la familia rose, oklch(0.586 0.222 17.6), un rojo frambuesa seguro de sí mismo que funciona bien para acciones destructivas primarias y acentos audaces. Es una de las pocas variantes que se lee de forma similar en ambos sentidos: como texto sobre blanco apenas alcanza WCAG 2.2 AA para texto normal (4.7:1, APCA Lc +70.5), y sobre una superficie casi negra se ubica en AA Large (4.47:1), justo por debajo de la línea AA, así que conviene usar fondos claros para texto pequeño y aumentar el tamaño en modo oscuro. El complementario #EB607E es un rose más suave para estados hover, y la tríada va de un #90132E profundo a un verde #48E11D. Los neutros slate fríos evitan que se sienta dulce. La lente de accesibilidad es lo que hay que tener presente: la protanopia y la deuteranopia lo apagan a un olivo (#98A63B), el colapso rojo-verde habitual, aunque la tritanopia lo mantiene rojo (#D73534). Si el rose marca peligro, agrega un ícono y una palabra para que el significado se mantenga sin depender del color.

¿Qué otros colores de Tailwind y shadcn se relacionan con Tailwind Rose 600?

Explora todos los colores

@theme {
  --color-primary-50: #ffeaea;
  --color-primary-100: #ffc8c9;
  --color-primary-200: #ffa2a6;
  --color-primary-300: #ff7983;
  --color-primary-400: #f45064;
  --color-primary-500: #e11d48;
  --color-primary-600: #bc0031;
  --color-primary-700: #94001f;
  --color-primary-800: #6a0010;
  --color-primary-900: #430004;
  --color-primary-950: #200000;

  --color-secondary-50: #fff0e7;
  --color-secondary-100: #fad3c5;
  --color-secondary-200: #f1b6a0;
  --color-secondary-300: #e6987b;
  --color-secondary-400: #d77c59;
  --color-secondary-500: #c4613a;
  --color-secondary-600: #a14721;
  --color-secondary-700: #7e300d;
  --color-secondary-800: #591c01;
  --color-secondary-900: #370a00;
  --color-secondary-950: #180000;

  --color-accent-50: #ffebfd;
  --color-accent-100: #fdcae9;
  --color-accent-200: #f4a6d7;
  --color-accent-300: #e981c6;
  --color-accent-400: #d85db2;
  --color-accent-500: #c43a9d;
  --color-accent-600: #a21e80;
  --color-accent-700: #7f0362;
  --color-accent-800: #5a0045;
  --color-accent-900: #380029;
  --color-accent-950: #190010;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1efef;
  --color-neutral-200: #e2dfdf;
  --color-neutral-300: #cac4c5;
  --color-neutral-400: #a99ea0;
  --color-neutral-500: #87787b;
  --color-neutral-600: #675b5e;
  --color-neutral-700: #4c4345;
  --color-neutral-800: #312b2c;
  --color-neutral-900: #1b1819;
  --color-neutral-950: #100e0f;

  --color-success-50: #e6fce9;
  --color-success-100: #c4eaca;
  --color-success-200: #9ddaa7;
  --color-success-300: #74c985;
  --color-success-400: #4ab766;
  --color-success-500: #16a34a;
  --color-success-600: #008330;
  --color-success-700: #00631a;
  --color-success-800: #00440a;
  --color-success-900: #002700;
  --color-success-950: #000d00;

  --color-error-50: #ffebe6;
  --color-error-100: #ffc9c0;
  --color-error-200: #ffa398;
  --color-error-300: #fe7c6f;
  --color-error-400: #f0544a;
  --color-error-500: #dc2626;
  --color-error-600: #b8000a;
  --color-error-700: #910000;
  --color-error-800: #680000;
  --color-error-900: #420000;
  --color-error-950: #200000;

  --color-warning-50: #fff1e1;
  --color-warning-100: #fed9be;
  --color-warning-200: #f9c095;
  --color-warning-300: #f2a66a;
  --color-warning-400: #e78e40;
  --color-warning-500: #d97706;
  --color-warning-600: #b25800;
  --color-warning-700: #893d00;
  --color-warning-800: #612500;
  --color-warning-900: #3a0f00;
  --color-warning-950: #180000;

  --color-info-50: #e6f6ff;
  --color-info-100: #bfdaff;
  --color-info-200: #95bdff;
  --color-info-300: #6ca0ff;
  --color-info-400: #4782fd;
  --color-info-500: #2563eb;
  --color-info-600: #114ac8;
  --color-info-700: #0333a1;
  --color-info-800: #002076;
  --color-info-900: #000e4e;
  --color-info-950: #000129;

  /* Surfaces */
  --color-background: #F8F7F7;
  --color-surface: #FFFFFF;
  --color-elevated: #F8F7F7;
  --color-foreground: #1B1819;
  --color-muted: #87787B;
  --color-border: #E2DFDF;
}

¿Cómo exportas Tailwind Rose 600 como design tokens?

Exporta un documento de tokens W3C DTCG para la escala de Tailwind Rose 600 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.

Genera un sistema Ver precios