paletta
Token de Tailwind CSS

Tailwind Rose 500 en OKLCH

Quick answer: Tailwind Rose 500 es #F43F5E, que convierte a oklch(0.645 0.215 16.40). Sobre blanco, tiene una relación de contraste WCAG de 3.67:1 y un puntaje APCA de Lc +62.85.

Esto cumple el umbral de texto AA Large de WCAG 2.2 (3: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.645 0.215 16.40)

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

Especificaciones

oklch(0.645 0.215 16.40)
#F43F5E

Mayor contraste: black

5.72: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 -38.83
Probar en Studio

Lente de accesibilidad

  • Base#F43F5E
  • 300#FF8691
  • 500#F43F5E
  • 700#9E002C

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#F43F5E
oklch
oklch(0.645 0.215 16.40)

Semantic

Bound to a role token that UI reads by name.

--primary: #F43F5E

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.72:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (5.72:1 on #F43F5E).

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

Tailwind Rose 500
50 to 950
#FFEAEB
#FFCCCE
#FFAAB0
#FF8691
#FF6376
#F43F5E
#CA1A43
#9E002C
#710019
#460008
#1F0000
  • 50oklch(0.954 0.023 14.25)
  • 100oklch(0.890 0.058 15.66)
  • 200oklch(0.822 0.100 14.87)
  • 300oklch(0.757 0.147 15.50)
  • 400oklch(0.704 0.190 16.19)
  • 500oklch(0.645 0.215 16.44)
  • 600oklch(0.541 0.204 16.53)
  • 700oklch(0.443 0.178 17.70)
  • 800oklch(0.347 0.139 19.75)
  • 900oklch(0.249 0.100 22.60)
  • 950oklch(0.150 0.062 29.23)

¿Qué puntaje obtiene Tailwind Rose 500 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.57Below AA
Aa2.50Below AA
Aa4.87AA
Aa10.62AAA
Aa17.22AAA
Aa1.57Below AA
Aa1.00Below AA
Aa1.59Below AA
Aa3.11Below AA
Aa6.78AA
Aa10.99AAA
Aa2.50Below AA
Aa1.59Below AA
Aa1.00Below AA
Aa1.95Below AA
Aa4.25Below AA
Aa6.90AA
Aa4.87AA
Aa3.11Below AA
Aa1.95Below AA
Aa1.00Below AA
Aa2.18Below AA
Aa3.53Below AA
Aa10.62AAA
Aa6.78AA
Aa4.25Below AA
Aa2.18Below AA
Aa1.00Below AA
Aa1.62Below AA
Aa17.22AAA
Aa10.99AAA
Aa6.90AA
Aa3.53Below AA
Aa1.62Below AA
Aa1.00Below AA

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

  • Aa3.67Below AA

    Blanco #FFFFFF

  • Aa3.37Below AA

    Neutro 100 #F5F5F5

  • Aa2.91Below AA

    Neutro 200 #E5E5E5

  • Aa1.46Below AA

    Neutro 400 #A3A3A3

  • Aa2.13Below AA

    Neutro 600 #525252

  • Aa4.88AA

    Neutro 900 #171717

  • Aa5.72AA

    Negro #000000

¿Qué paletas combinan con Tailwind Rose 500?

Análogos

  • #F33FF4
  • #F43FA9
  • #F43F5E
  • #F46B3F
  • #F4B73F

Complementarios

  • #F8879B
  • #F43F5E

Triádicos

  • #F43F5E
  • #CC0C2D
  • #5EF43F

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

Rose 500 se lee como un rosa-rojo intenso, oklch(0.645 0.215 16.4), lo bastante cálido para marketing y UI enérgica sin caer en el rojo de alarma puro. El panorama de contraste está dividido: como texto sobre blanco solo alcanza AA Large (3.67:1), así que trátalo ahí como un color de encabezado grande o de acento, mientras que sobre una superficie casi negra sube a WCAG 2.2 AA (5.72:1, APCA Lc -38.83) para texto normal. El complementario #F8879B es un rosa suave para fondos, y la serie análoga se desliza hacia el coral cálido #F46B3F y el ámbar #F4B73F, un gradiente listo para usar. Colócalo sobre neutros slate fríos para que resalte su calidez. El lente de accesibilidad es donde rose pide cuidado: la protanopia y la deuteranopia lo aplanan a un verde amarillento oliva (#B0BE55), el clásico intercambio rojo-verde, así que una señal de éxito o error en rose puede invertir su significado. La tritanopia lo mantiene rojo (#EB514F). Combínalo con etiquetas y no dejes que rose por sí solo separe lo positivo de lo negativo.

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

Explora todos los colores

@theme {
  --color-primary-50: #ffeaeb;
  --color-primary-100: #ffccce;
  --color-primary-200: #ffaab0;
  --color-primary-300: #ff8691;
  --color-primary-400: #ff6376;
  --color-primary-500: #f43f5e;
  --color-primary-600: #ca1a43;
  --color-primary-700: #9e002c;
  --color-primary-800: #710019;
  --color-primary-900: #460008;
  --color-primary-950: #1f0000;

  --color-secondary-50: #fff1e8;
  --color-secondary-100: #fcdbcc;
  --color-secondary-200: #f6c4ad;
  --color-secondary-300: #f0ae8e;
  --color-secondary-400: #e69872;
  --color-secondary-500: #d9845a;
  --color-secondary-600: #b1633c;
  --color-secondary-700: #884624;
  --color-secondary-800: #5e2c10;
  --color-secondary-900: #381301;
  --color-secondary-950: #150200;

  --color-accent-50: #ffecfc;
  --color-accent-100: #ffd0ec;
  --color-accent-200: #fbb2de;
  --color-accent-300: #f493d0;
  --color-accent-400: #e975c0;
  --color-accent-500: #d95aaf;
  --color-accent-600: #b23c8d;
  --color-accent-700: #8a236b;
  --color-accent-800: #610f4a;
  --color-accent-900: #3b002b;
  --color-accent-950: #18000f;

  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #f1efef;
  --color-neutral-200: #e2dfdf;
  --color-neutral-300: #cac4c5;
  --color-neutral-400: #a99ea0;
  --color-neutral-500: #87787a;
  --color-neutral-600: #675b5d;
  --color-neutral-700: #4c4345;
  --color-neutral-800: #312b2c;
  --color-neutral-900: #1b1818;
  --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: #1B1818;
  --color-muted: #87787A;
  --color-border: #E2DFDF;
}

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

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