paletta
Token de Tailwind CSS

Tailwind Rose 700 en OKLCH

Quick answer: Tailwind Rose 700 es #BE123C, que convierte a oklch(0.514 0.198 16.90). Sobre blanco, tiene una relación de contraste WCAG de 6.29:1 y un puntaje APCA de Lc +79.17.

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.514 0.198 16.90)

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

Especificaciones

oklch(0.514 0.198 16.90)
#BE123C

Mayor contraste: white

6.29: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 +79.17
Probar en Studio

Lente de accesibilidad

  • Base#BE123C
  • 300#EB737C
  • 500#BE123C
  • 700#7E001A

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#BE123C
oklch
oklch(0.514 0.198 16.90)

Semantic

Bound to a role token that UI reads by name.

--primary: #BE123C

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.

AA6.29:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (6.29:1 on #BE123C).

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

Tailwind Rose 700
50 to 950
#FFEBEC
#FFC5C7
#F89DA1
#EB737C
#D7485A
#BE123C
#9F002A
#7E001A
#5C000E
#3B0005
#1E0000
  • 50oklch(0.956 0.022 14.06)
  • 100oklch(0.876 0.066 16.20)
  • 200oklch(0.789 0.109 16.98)
  • 300oklch(0.698 0.148 17.06)
  • 400oklch(0.605 0.178 17.03)
  • 500oklch(0.514 0.198 16.93)
  • 600oklch(0.445 0.178 18.64)
  • 700oklch(0.375 0.151 21.11)
  • 800oklch(0.300 0.121 22.38)
  • 900oklch(0.222 0.090 23.36)
  • 950oklch(0.148 0.061 29.23)

¿Qué puntaje obtiene Tailwind Rose 700 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.78Below AA
Aa3.70Below AA
Aa7.32AAA
Aa12.55AAA
Aa17.39AAA
Aa1.78Below AA
Aa1.00Below AA
Aa2.08Below AA
Aa4.12Below AA
Aa7.07AAA
Aa9.79AAA
Aa3.70Below AA
Aa2.08Below AA
Aa1.00Below AA
Aa1.98Below AA
Aa3.40Below AA
Aa4.70AA
Aa7.32AAA
Aa4.12Below AA
Aa1.98Below AA
Aa1.00Below AA
Aa1.72Below AA
Aa2.38Below AA
Aa12.55AAA
Aa7.07AAA
Aa3.40Below AA
Aa1.72Below AA
Aa1.00Below AA
Aa1.38Below AA
Aa17.39AAA
Aa9.79AAA
Aa4.70AA
Aa2.38Below AA
Aa1.38Below AA
Aa1.00Below AA

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

  • Aa6.29AA

    Blanco #FFFFFF

  • Aa5.76AA

    Neutro 100 #F5F5F5

  • Aa4.99AA

    Neutro 200 #E5E5E5

  • Aa2.49Below AA

    Neutro 400 #A3A3A3

  • Aa1.24Below AA

    Neutro 600 #525252

  • Aa2.85Below AA

    Neutro 900 #171717

  • Aa3.34Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Rose 700?

Análogos

  • #B112BE
  • #BE1284
  • #BE123C
  • #BE3012
  • #BE7712

Complementarios

  • #EB315F
  • #BE123C

Triádicos

  • #BE123C
  • #6A0A22
  • #3CBE12

¿Dónde usar Tailwind Rose 700 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
#BE123C
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 700

Rose 700 es un carmesí profundo, oklch(0.514 0.198 16.9), menos rosa y más vino que las variantes intermedias, lo que le da gravedad para botones destructivos y trabajo de acento serio. Sobre blanco es fuerte, WCAG 2.2 AA para texto normal (6.29:1, APCA Lc +79.17), así que #BE123C sostiene etiquetas pequeñas de eliminar y textos de error en una página clara sin esfuerzo. El modo oscuro es el lado débil, solo AA Large (3.34:1), así que mantén esos usos en tamaño grande sobre negro casi puro. El complementario #EB315F es un rose más brillante para hover, el análogo #BE3012 se inclina hacia el óxido, y la tríada responde con un verde #3CBE12. Colócalo sobre slate frío para que el carmesí se mantenga rico en vez de turbio. Bajo la lente de accesibilidad sigue el patrón del rose: la protanopia y la deuteranopia lo llevan a un olivo oscuro (#7E8A2F), así que una señal de carmesí contra verde no es confiable, mientras que la tritanopia lo mantiene rojo (#B52A28). Refuerza cualquier significado destructivo con una etiqueta.

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

Explora todos los colores

@theme {
  --color-primary-50: #ffebec;
  --color-primary-100: #ffc5c7;
  --color-primary-200: #f89da1;
  --color-primary-300: #eb737c;
  --color-primary-400: #d7485a;
  --color-primary-500: #be123c;
  --color-primary-600: #9f002a;
  --color-primary-700: #7e001a;
  --color-primary-800: #5c000e;
  --color-primary-900: #3b0005;
  --color-primary-950: #1e0000;

  --color-secondary-50: #fff0e9;
  --color-secondary-100: #f3cec2;
  --color-secondary-200: #e3ac9a;
  --color-secondary-300: #d28a72;
  --color-secondary-400: #bc6a4e;
  --color-secondary-500: #a44b2c;
  --color-secondary-600: #883618;
  --color-secondary-700: #6b2408;
  --color-secondary-800: #4d1602;
  --color-secondary-900: #300800;
  --color-secondary-950: #160100;

  --color-accent-50: #ffecfd;
  --color-accent-100: #f5c7e4;
  --color-accent-200: #e5a0cd;
  --color-accent-300: #d379b6;
  --color-accent-400: #be539e;
  --color-accent-500: #a42c85;
  --color-accent-600: #88156d;
  --color-accent-700: #6b0154;
  --color-accent-800: #4d003c;
  --color-accent-900: #310025;
  --color-accent-950: #170010;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1efef;
  --color-neutral-200: #e2dfdf;
  --color-neutral-300: #cac4c5;
  --color-neutral-400: #a99ea0;
  --color-neutral-500: #87787c;
  --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: #87787C;
  --color-border: #E2DFDF;
}

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

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