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 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.85Below AA
Aa3.95Below AA
Aa8.29AAA
Aa14.07AAA
Aa18.35AAA
Aa1.85Below AA
Aa1.00Below AA
Aa2.12Below AA
Aa4.46Below AA
Aa7.57AAA
Aa9.88AAA
Aa3.95Below AA
Aa2.12Below AA
Aa1.00Below AA
Aa2.09Below AA
Aa3.55Below AA
Aa4.63AA
Aa8.29AAA
Aa4.46Below AA
Aa2.09Below AA
Aa1.00Below AA
Aa1.69Below AA
Aa2.21Below AA
Aa14.07AAA
Aa7.57AAA
Aa3.55Below AA
Aa1.69Below AA
Aa1.00Below AA
Aa1.30Below AA
Aa18.35AAA
Aa9.88AAA
Aa4.63AA
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.14AA

    Neutro 100 #F5F5F5

  • Aa5.32AA

    Neutro 200 #E5E5E5

  • Aa2.65Below AA

    Neutro 400 #A3A3A3

  • Aa1.16Below AA

    Neutro 600 #525252

  • Aa2.67Below 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 / 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
#1D4ED8
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 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?

Bloque @theme de Tailwind v4

@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.

FAQ

Frequently asked questions

Tailwind Blue 700 (#1D4ED8) is oklch(0.488 0.217 264.4) in the OKLCH color space.

Tailwind Blue 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 6.7:1 on white, 3.13:1 on black.

On white, Tailwind Blue 700 has an APCA Lc of 82.2. On black, Lc is -19.7. 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 700 simulates to #2f2caf. Under protanopia it shifts to #3233b7. Under tritanopia it appears as #1f9c96. 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