paletta
Token de Tailwind CSS

Tailwind Blue 500 en OKLCH

Quick answer: Tailwind Blue 500 es #3B82F6, que convierte a oklch(0.623 0.188 259.80). Sobre blanco, tiene una relación de contraste WCAG de 3.68:1 y un puntaje APCA de Lc +63.89.

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.623 0.188 259.80)

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

Ver también

#3B82F6 está documentado desde más de un ángulo. Esta página lo presenta como color utilitario de Tailwind. El mismo hex también se cubre aquí:

Especificaciones

oklch(0.623 0.188 259.80)
#3B82F6

Mayor contraste: black

5.71: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.78
Probar en Studio

Lente de accesibilidad

  • Base#3B82F6
  • 300#7BB2FF
  • 500#3B82F6
  • 700#0B48A4

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#3B82F6
oklch
oklch(0.623 0.188 259.80)

Semantic

Bound to a role token that UI reads by name.

--primary: #3B82F6

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

On-color text: black (5.71:1 on #3B82F6).

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

Tailwind Blue 500
50 to 950
#E7F6FF
#C5E0FF
#A0C9FF
#7BB2FF
#5A9AFF
#3B82F6
#2164CF
#0B48A4
#002F76
#00174C
#000325
  • 50oklch(0.965 0.020 233.85)
  • 100oklch(0.897 0.052 251.98)
  • 200oklch(0.826 0.088 255.49)
  • 300oklch(0.757 0.126 256.93)
  • 400oklch(0.691 0.163 259.18)
  • 500oklch(0.623 0.188 259.81)
  • 600oklch(0.525 0.179 259.79)
  • 700oklch(0.426 0.160 259.76)
  • 800oklch(0.328 0.131 259.59)
  • 900oklch(0.231 0.103 261.49)
  • 950oklch(0.132 0.074 263.86)

¿Qué puntaje obtiene Tailwind Blue 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.55Below AA
Aa2.54Below AA
Aa5.02AA
Aa11.40AAA
Aa18.30AAA
Aa1.55Below AA
Aa1.00Below AA
Aa1.64Below AA
Aa3.24Below AA
Aa7.37AAA
Aa11.82AAA
Aa2.54Below AA
Aa1.64Below AA
Aa1.00Below AA
Aa1.98Below AA
Aa4.50Below AA
Aa7.21AAA
Aa5.02AA
Aa3.24Below AA
Aa1.98Below AA
Aa1.00Below AA
Aa2.27Below AA
Aa3.64Below AA
Aa11.40AAA
Aa7.37AAA
Aa4.50Below AA
Aa2.27Below AA
Aa1.00Below AA
Aa1.60Below AA
Aa18.30AAA
Aa11.82AAA
Aa7.21AAA
Aa3.64Below AA
Aa1.60Below AA
Aa1.00Below AA

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

  • Aa3.68Below AA

    Blanco #FFFFFF

  • Aa3.37Below AA

    Neutro 100 #F5F5F5

  • Aa2.92Below AA

    Neutro 200 #E5E5E5

  • Aa1.46Below AA

    Neutro 400 #A3A3A3

  • Aa2.12Below AA

    Neutro 600 #525252

  • Aa4.87AA

    Neutro 900 #171717

  • Aa5.71AA

    Negro #000000

¿Qué paletas combinan con Tailwind Blue 500?

Análogos

  • #3BF6CE
  • #3BD0F6
  • #3B82F6
  • #423BF6
  • #903BF6

Complementarios

  • #84B1F9
  • #3B82F6

Triádicos

  • #3B82F6
  • #0953CC
  • #F63B82

¿Dónde usar Tailwind Blue 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
#3B82F6
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 Blue 500

Blue 500 es el azul predeterminado que obtienes con bg-blue-500 o text-blue-500, la parada media que la mayoría de los equipos toma antes de personalizar cualquier cosa. Tiene el mismo valor que el primary de shadcn, pero el enfoque de utilidades cambia cómo lo usas: es una clase que aplicas a un elemento, no un token que repinta toda la app. En oklch(0.623 0.188 259.8) es brillante y amigable. Como texto sobre blanco solo alcanza AA Large (3.68:1) bajo WCAG 2.2, así que text-blue-500 sobre una tarjeta blanca es seguro para texto grande y encabezados, no para texto de cuerpo; baja a blue-600 o blue-700 para párrafos. Sobre una superficie casi negra alcanza AA (5.71:1, APCA Lc -37.78). Su tríada lo empareja con un azul profundo #0953CC y un rosa #F63B82, y #3BD0F6 se ubica un paso análogo hacia el cian. El lente de accesibilidad lo mantiene azul para la visión rojo-verde (#5A5ADA) pero lo desplaza hacia verde azulado bajo tritanopia (#3FC4BF). Para la vista de token de tema de este mismo hex, consulta shadcn Primary Blue.

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

Explora todos los colores

@theme {
  --color-primary-50: #e7f6ff;
  --color-primary-100: #c5e0ff;
  --color-primary-200: #a0c9ff;
  --color-primary-300: #7bb2ff;
  --color-primary-400: #5a9aff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2164cf;
  --color-primary-700: #0b48a4;
  --color-primary-800: #002f76;
  --color-primary-900: #00174c;
  --color-primary-950: #000325;

  --color-secondary-50: #f1f2ff;
  --color-secondary-100: #d2d4ff;
  --color-secondary-200: #b4b5ff;
  --color-secondary-300: #9895fa;
  --color-secondary-400: #7e76ed;
  --color-secondary-500: #6657da;
  --color-secondary-600: #513fb9;
  --color-secondary-700: #3c2a94;
  --color-secondary-800: #29196c;
  --color-secondary-900: #170947;
  --color-secondary-950: #070024;

  --color-accent-50: #e6f9fc;
  --color-accent-100: #cdf0f5;
  --color-accent-200: #b0e7f0;
  --color-accent-300: #90dfea;
  --color-accent-400: #72d5e3;
  --color-accent-500: #57cada;
  --color-accent-600: #2da0af;
  --color-accent-700: #007783;
  --color-accent-800: #004f59;
  --color-accent-900: #002b32;
  --color-accent-950: #000b10;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c6ca;
  --color-neutral-400: #9ea2a9;
  --color-neutral-500: #787e87;
  --color-neutral-600: #5b6067;
  --color-neutral-700: #43464c;
  --color-neutral-800: #2b2d31;
  --color-neutral-900: #18191b;
  --color-neutral-950: #0e0f10;

  --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: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F7F8;
  --color-foreground: #18191B;
  --color-muted: #787E87;
  --color-border: #DFE0E2;
}

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

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