paletta
Token de Tailwind CSS

Tailwind Slate 500 en OKLCH

Quick answer: Tailwind Slate 500 es #64748B, que convierte a oklch(0.554 0.041 257.40). Sobre blanco, tiene una relación de contraste WCAG de 4.76:1 y un puntaje APCA de Lc +73.04.

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.554 0.041 257.40)

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

Especificaciones

oklch(0.554 0.041 257.40)
#64748B

Mayor contraste: white

4.76: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 +73.04
Probar en Studio

Lente de accesibilidad

  • Base#64748B
  • 300#99A6B8
  • 500#64748B
  • 700#384456

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#64748B
oklch
oklch(0.554 0.041 257.40)

Semantic

Bound to a role token that UI reads by name.

--primary: #64748B

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.

AA4.76:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (4.76:1 on #64748B).

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

Tailwind Slate 500
50 to 950
#F2F5FB
#D4DAE3
#B6C0CE
#99A6B8
#7E8DA2
#64748B
#4D5C71
#384456
#252E3C
#131A24
#04070E
  • 50oklch(0.970 0.009 264.52)
  • 100oklch(0.886 0.014 258.35)
  • 200oklch(0.804 0.023 256.75)
  • 300oklch(0.721 0.030 256.51)
  • 400oklch(0.639 0.036 256.80)
  • 500oklch(0.554 0.041 257.42)
  • 600oklch(0.470 0.039 256.83)
  • 700oklch(0.384 0.035 258.35)
  • 800oklch(0.299 0.028 259.11)
  • 900oklch(0.216 0.022 257.29)
  • 950oklch(0.128 0.018 260.70)

¿Qué puntaje obtiene Tailwind Slate 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.68Below AA
Aa3.09Below AA
Aa6.23AA
Aa12.53AAA
Aa18.46AAA
Aa1.68Below AA
Aa1.00Below AA
Aa1.84Below AA
Aa3.70Below AA
Aa7.44AAA
Aa10.96AAA
Aa3.09Below AA
Aa1.84Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa4.05Below AA
Aa5.97AA
Aa6.23AA
Aa3.70Below AA
Aa2.02Below AA
Aa1.00Below AA
Aa2.01Below AA
Aa2.96Below AA
Aa12.53AAA
Aa7.44AAA
Aa4.05Below AA
Aa2.01Below AA
Aa1.00Below AA
Aa1.47Below AA
Aa18.46AAA
Aa10.96AAA
Aa5.97AA
Aa2.96Below AA
Aa1.47Below AA
Aa1.00Below AA

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

  • Aa4.76AA

    Blanco #FFFFFF

  • Aa4.36Below AA

    Neutro 100 #F5F5F5

  • Aa3.78Below AA

    Neutro 200 #E5E5E5

  • Aa1.89Below AA

    Neutro 400 #A3A3A3

  • Aa1.64Below AA

    Neutro 600 #525252

  • Aa3.77Below AA

    Neutro 900 #171717

  • Aa4.41Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Slate 500?

Análogos

  • #648B82
  • #64848B
  • #64748B
  • #64648B
  • #74648B

Complementarios

  • #8E9BAE
  • #64748B

Triádicos

  • #64748B
  • #3E4756
  • #8B6474

¿Dónde usar Tailwind Slate 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
#64748B
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 Slate 500

Slate 500 se ubica casi sobre el eje del gris, oklch(0.554 0.041 257.4), así que se comporta como un neutro frío con apenas un toque de azul. Eso lo convierte en la elección natural para texto secundario, iconos apagados, bordes y texto de placeholder, en lugar de algo pensado para destacar. Sobre blanco cumple con WCAG 2.2 AA para texto normal (4.76:1, APCA Lc +73.04); contra un fondo casi negro baja a AA Large (4.41:1), lo cual está bien para etiquetas secundarias pero no para párrafos largos. Como su croma es tan bajo, los hex de armonía se quedan cerca de casa: el complementario #8E9BAE y el análogo #64848B están apenas a un paso de distancia, y por eso justamente slate se lee como calmado. Combínalo con un solo acento saturado, un azul o un ámbar, para que la interfaz tenga un único color focal claro. El lente de accesibilidad es amable aquí; la protanopia y la deuteranopia lo dejan cerca de #6A6984, y la tritanopia en #658180 es casi idéntica, así que nunca colapsa en una pareja confusa.

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

Explora todos los colores

@theme {
  --color-primary-50: #f2f5fb;
  --color-primary-100: #d4dae3;
  --color-primary-200: #b6c0ce;
  --color-primary-300: #99a6b8;
  --color-primary-400: #7e8da2;
  --color-primary-500: #64748b;
  --color-primary-600: #4d5c71;
  --color-primary-700: #384456;
  --color-primary-800: #252e3c;
  --color-primary-900: #131a24;
  --color-primary-950: #04070e;

  --color-secondary-50: #f5f4fb;
  --color-secondary-100: #d8d7e2;
  --color-secondary-200: #bbbbcb;
  --color-secondary-300: #a09fb4;
  --color-secondary-400: #85849d;
  --color-secondary-500: #6c6a85;
  --color-secondary-600: #55536c;
  --color-secondary-700: #403e53;
  --color-secondary-800: #2b2a3a;
  --color-secondary-900: #181723;
  --color-secondary-950: #07060d;

  --color-accent-50: #f1f6f7;
  --color-accent-100: #d5dedf;
  --color-accent-200: #b8c7c8;
  --color-accent-300: #9db0b1;
  --color-accent-400: #82999b;
  --color-accent-500: #6a8385;
  --color-accent-600: #51686a;
  --color-accent-700: #3a4e4f;
  --color-accent-800: #253536;
  --color-accent-900: #121d1e;
  --color-accent-950: #030909;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #eff0f1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c6ca;
  --color-neutral-400: #9ea2a9;
  --color-neutral-500: #787e87;
  --color-neutral-600: #5b6067;
  --color-neutral-700: #43474c;
  --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 Slate 500 como design tokens?

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