paletta
Token de Tailwind CSS

Tailwind Blue 700 en OKLCH

Quick answer: Tailwind Blue 700 es #1D4ED8, que convierte a oklch(0.488 0.217 264.40). Sobre blanco, tiene una relación de contraste WCAG de 6.70:1 y un puntaje APCA de Lc +82.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.488 0.217 264.40)

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

Especificaciones

oklch(0.488 0.217 264.40)
#1D4ED8

Mayor contraste: white

6.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 +82.17
Probar en Studio

Lente de accesibilidad

  • Base#1D4ED8
  • 300#6594FC
  • 500#1D4ED8
  • 700#052596

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#1D4ED8
oklch
oklch(0.488 0.217 264.40)

Semantic

Bound to a role token that UI reads by name.

--primary: #1D4ED8

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

On-color text: white (6.70:1 on #1D4ED8).

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

Tailwind Blue 700
50 to 950
#E7F6FF
#BDD6FF
#90B5FF
#6594FC
#3F71EE
#1D4ED8
#0E38BA
#052596
#021670
#00084B
#000129
  • 50oklch(0.965 0.020 233.85)
  • 100oklch(0.871 0.063 260.28)
  • 200oklch(0.775 0.114 263.57)
  • 300oklch(0.682 0.162 264.23)
  • 400oklch(0.584 0.196 264.59)
  • 500oklch(0.488 0.217 264.38)
  • 600oklch(0.417 0.207 264.39)
  • 700oklch(0.344 0.184 264.42)
  • 800oklch(0.273 0.153 264.50)
  • 900oklch(0.201 0.120 264.10)
  • 950oklch(0.131 0.085 264.20)

¿Qué puntaje obtiene Tailwind Blue 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.86Below AA
Aa3.96Below AA
Aa8.30AAA
Aa14.08AAA
Aa18.36AAA
Aa1.86Below AA
Aa1.00Below AA
Aa2.13Below AA
Aa4.46Below AA
Aa7.58AAA
Aa9.88AAA
Aa3.96Below AA
Aa2.13Below AA
Aa1.00Below AA
Aa2.10Below AA
Aa3.56Below AA
Aa4.64AA
Aa8.30AAA
Aa4.46Below AA
Aa2.10Below AA
Aa1.00Below AA
Aa1.70Below AA
Aa2.21Below AA
Aa14.08AAA
Aa7.58AAA
Aa3.56Below AA
Aa1.70Below AA
Aa1.00Below AA
Aa1.30Below AA
Aa18.36AAA
Aa9.88AAA
Aa4.64AA
Aa2.21Below AA
Aa1.30Below AA
Aa1.00Below AA

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

  • Aa6.70AA

    Blanco #FFFFFF

  • Aa6.15AA

    Neutro 100 #F5F5F5

  • Aa5.32AA

    Neutro 200 #E5E5E5

  • Aa2.66Below AA

    Neutro 400 #A3A3A3

  • Aa1.17Below AA

    Neutro 600 #525252

  • Aa2.68Below AA

    Neutro 900 #171717

  • Aa3.13Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Blue 700?

Análogos

  • #1DD8C6
  • #1D9CD8
  • #1D4ED8
  • #3A1DD8
  • #881DD8

Complementarios

  • #597FE9
  • #1D4ED8

Triádicos

  • #1D4ED8
  • #123187
  • #D81D4E

¿Dónde usar Tailwind Blue 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
#1D4ED8
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 700

Blue 700 es el azul profundo con tendencia a tinta, oklch(0.488 0.217 264.4), la parada que eligen los equipos cuando un enlace o un botón primario debe leerse como texto pequeño en una página blanca. Ahí está su fortaleza: sobre blanco supera WCAG 2.2 AA con comodidad (6.7:1, APCA Lc +82.17), cerca de AAA, así que sostiene enlaces de tamaño de cuerpo y etiquetas densas sin esfuerzo. La contrapartida es el modo oscuro, donde baja a AA Large (3.13:1) y solo debería aparecer en tamaño de encabezado sobre casi negro. Su armonía tiende a lo intenso; la tríada se ancla en un azul marino #123187 y responde con un rosa intenso #D81D4E, y #1D9CD8 se ubica un paso análogo hacia el celeste. Un slate neutro evita que la profundidad se vuelva pesada. El lente de accesibilidad es indulgente con este azul: protanopia y deuteranopia lo mantienen como azul profundo (#2F2CAF), y solo la tritanopia lo desplaza hacia verde azulado (#1F9C96). Es el azul más seguro de este grupo para texto sobre superficies claras.

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

Explora todos los colores

@theme {
  --color-primary-50: #e7f6ff;
  --color-primary-100: #bdd6ff;
  --color-primary-200: #90b5ff;
  --color-primary-300: #6594fc;
  --color-primary-400: #3f71ee;
  --color-primary-500: #1d4ed8;
  --color-primary-600: #0e38ba;
  --color-primary-700: #052596;
  --color-primary-800: #021670;
  --color-primary-900: #00084b;
  --color-primary-950: #000129;

  --color-secondary-50: #f3f2ff;
  --color-secondary-100: #d0ceff;
  --color-secondary-200: #afa9f4;
  --color-secondary-300: #8f84e7;
  --color-secondary-400: #725fd4;
  --color-secondary-500: #5839bc;
  --color-secondary-600: #4726a1;
  --color-secondary-700: #361682;
  --color-secondary-800: #260b61;
  --color-secondary-900: #160341;
  --color-secondary-950: #080024;

  --color-accent-50: #e7f9ff;
  --color-accent-100: #c8e6f1;
  --color-accent-200: #a4d4e6;
  --color-accent-300: #7fc2da;
  --color-accent-400: #5cb0cc;
  --color-accent-500: #399dbc;
  --color-accent-600: #157d99;
  --color-accent-700: #005d75;
  --color-accent-800: #003f52;
  --color-accent-900: #002331;
  --color-accent-950: #000a13;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c5ca;
  --color-neutral-400: #9ea1a9;
  --color-neutral-500: #787c87;
  --color-neutral-600: #5b5e67;
  --color-neutral-700: #43454c;
  --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: #787C87;
  --color-border: #DFE0E2;
}

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

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