paletta

Token de Tailwind CSS

Tailwind Blue 600 en OKLCH

Quick answer: Tailwind Blue 600 es #2563EB, que convierte a oklch(0.546 0.215 262.90). Sobre blanco, tiene una relación de contraste WCAG de 5.16:1 y un puntaje APCA de Lc +74.86.

Esto cumple el umbral de texto AA 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.546 0.215 262.90)

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

  • Especificaciones

    oklch(0.546 0.215 262.90)
    #2563EB

    Mayor contraste: white

    5.16: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 +74.86
    Probar en Studio

  • Lente de accesibilidad

    • Base#2563EB
    • 300#6CA0FF
    • 500#2563EB
    • 700#0333A1

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#2563EB
oklch
oklch(0.546 0.215 262.90)

Semantic

Bound to a role token that UI reads by name.

--primary: #2563EB

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

On-color text: white (5.16:1 on #2563EB).

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

Tailwind Blue 600
50 to 950
#E6F6FF
#BFDAFF
#95BDFF
#6CA0FF
#4782FD
#2563EB
#114AC8
#0333A1
#002076
#000E4E
#000129
  • 50oklch(0.964 0.021 232.12)
  • 100oklch(0.881 0.059 256.32)
  • 200oklch(0.794 0.104 260.20)
  • 300oklch(0.712 0.150 261.60)
  • 400oklch(0.632 0.194 262.84)
  • 500oklch(0.546 0.215 262.88)
  • 600oklch(0.463 0.204 262.86)
  • 700oklch(0.380 0.183 262.94)
  • 800oklch(0.297 0.150 263.03)
  • 900oklch(0.215 0.117 263.67)
  • 950oklch(0.131 0.085 264.20)

¿Qué puntaje obtiene Tailwind Blue 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.72Below AA
Aa3.23Below AA
Aa6.69AA
Aa12.93AAA
Aa18.32AAA
Aa1.72Below AA
Aa1.00Below AA
Aa1.87Below AA
Aa3.87Below AA
Aa7.49AAA
Aa10.61AAA
Aa3.23Below AA
Aa1.87Below AA
Aa1.00Below AA
Aa2.07Below AA
Aa4.00Below AA
Aa5.67AA
Aa6.69AA
Aa3.87Below AA
Aa2.07Below AA
Aa1.00Below AA
Aa1.93Below AA
Aa2.73Below AA
Aa12.93AAA
Aa7.49AAA
Aa4.00Below AA
Aa1.93Below AA
Aa1.00Below AA
Aa1.41Below AA
Aa18.32AAA
Aa10.61AAA
Aa5.67AA
Aa2.73Below AA
Aa1.41Below AA
Aa1.00Below AA

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

  • Aa5.16AA

    Blanco #FFFFFF

  • Aa4.74AA

    Neutro 100 #F5F5F5

  • Aa4.10Below AA

    Neutro 200 #E5E5E5

  • Aa2.04Below AA

    Neutro 400 #A3A3A3

  • Aa1.51Below AA

    Neutro 600 #525252

  • Aa3.46Below AA

    Neutro 900 #171717

  • Aa4.06Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Blue 600?

  • Análogos

    • #25EBCE
    • #25B5EB
    • #2563EB
    • #3A25EB
    • #8C25EB

  • Complementarios

    • #6B95F1
    • #2563EB

  • Triádicos

    • #2563EB
    • #0F3EA5
    • #EB2563

¿Dónde usar Tailwind Blue 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 / white
$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
#2563EB
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 Tailwind Blue 600

Blue 600 es el primario todoterreno para la mayoría de las construcciones en Tailwind, lo suficientemente oscuro para sostener botones sólidos y enlaces, pero lo bastante saturado como para seguir leyéndose como azul de marca y no como azul marino. En oklch(0.546 0.215 262.9) conserva croma real, así que mantiene su identidad en toda la rampa de 50 a 950. Como texto de cuerpo sobre blanco cumple con WCAG 2.2 AA (5.16:1, APCA Lc +74.86), lo cual cubre enlaces y etiquetas de formulario; el mismo tono sobre una superficie casi negra baja a AA Large (4.06:1), así que resérvalo para encabezados o UI de mayor tamaño en modo oscuro. La tríada se ancla en un #0F3EA5 profundo y responde con un #EB2563 cálido, mientras que el complementario más suave #6B95F1 funciona bien para estados hover y visited. Apoya todo esto sobre los neutros de Tailwind Slate para el chrome. La visión rojo-verde lo mantiene claramente azul (la protanopia lo simula cerca de #4040CA), pero la tritanopia lo arrastra hacia un verde azulado (#28B0AA), así que nunca dejes que una señal de azul contra verde azulado cargue significado por sí sola.

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

Bloque @theme de Tailwind v4

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

  --color-secondary-50: #f2f2ff;
  --color-secondary-100: #d0d0ff;
  --color-secondary-200: #b0adfc;
  --color-secondary-300: #928af3;
  --color-secondary-400: #7667e3;
  --color-secondary-500: #5d43cd;
  --color-secondary-600: #4a2daf;
  --color-secondary-700: #381b8d;
  --color-secondary-800: #270e68;
  --color-secondary-900: #160345;
  --color-secondary-950: #080025;

  --color-accent-50: #e6f9fe;
  --color-accent-100: #caebf4;
  --color-accent-200: #a8deec;
  --color-accent-300: #85d0e4;
  --color-accent-400: #64c2da;
  --color-accent-500: #43b3cd;
  --color-accent-600: #1a8ea6;
  --color-accent-700: #006a7e;
  --color-accent-800: #004757;
  --color-accent-900: #002732;
  --color-accent-950: #000a12;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c6ca;
  --color-neutral-400: #9ea1a9;
  --color-neutral-500: #787d87;
  --color-neutral-600: #5b5f67;
  --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: #787D87;
  --color-border: #DFE0E2;
}

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

Exporta un documento de tokens W3C DTCG para la escala de Tailwind Blue 600 de 50 a 950, listo para Style Dictionary o cualquier pipeline compatible con DTCG.

FAQ

Frequently asked questions

Tailwind Blue 600 (#2563EB) is oklch(0.546 0.215 262.9) in the OKLCH color space.

Tailwind Blue 600 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 5.16:1 on white, 4.06:1 on black.

On white, Tailwind Blue 600 has an APCA Lc of 74.9. On black, Lc is -26.9. APCA is a perceptual contrast model, not a WCAG compliance standard.

Paste the snippet above into your tailwind.config (or globals.css with @theme).

Under deuteranopia (most common, around 5 percent of men), Tailwind Blue 600 simulates to #3c38c2. Under protanopia it shifts to #4040ca. Under tritanopia it appears as #28b0aa. 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