paletta

Token de Tailwind CSS

Tailwind Slate 600 en OKLCH

Quick answer: Tailwind Slate 600 es #475569, que convierte a oklch(0.446 0.037 257.30). Sobre blanco, tiene una relación de contraste WCAG de 7.57:1 y un puntaje APCA de Lc +86.33.

Esto cumple el umbral de texto AAA de WCAG 2.2 (7: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.446 0.037 257.30)

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

  • Especificaciones

    oklch(0.446 0.037 257.30)
    #475569

    Mayor contraste: white

    7.57:1
    Normal AAcumple con WCAG 2.2
    Normal AAAcumple con WCAG 2.2
    Large AAcumple con WCAG 2.2
    Large AAAcumple con WCAG 2.2
    Lc +86.33
    Probar en Studio

  • Lente de accesibilidad

    • Base#475569
    • 300#8692A2
    • 500#475569
    • 700#283343

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#475569
oklch
oklch(0.446 0.037 257.30)

Semantic

Bound to a role token that UI reads by name.

--primary: #475569

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.

AAA7.57:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (7.57:1 on #475569).

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

Tailwind Slate 600
50 to 950
#F2F5FA
#CDD3DB
#A9B2BF
#8692A2
#657386
#475569
#374456
#283343
#1B2430
#0F151E
#04070D
  • 50oklch(0.969 0.007 260.73)
  • 100oklch(0.865 0.013 255.51)
  • 200oklch(0.761 0.021 257.49)
  • 300oklch(0.656 0.028 255.61)
  • 400oklch(0.551 0.034 256.08)
  • 500oklch(0.446 0.037 257.28)
  • 600oklch(0.383 0.035 256.59)
  • 700oklch(0.318 0.032 257.68)
  • 800oklch(0.257 0.026 255.76)
  • 900oklch(0.194 0.021 258.33)
  • 950oklch(0.127 0.016 257.84)

¿Qué puntaje obtiene Tailwind Slate 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.95Below AA
Aa4.41Below AA
Aa9.04AAA
Aa14.32AAA
Aa18.45AAA
Aa1.95Below AA
Aa1.00Below AA
Aa2.25Below AA
Aa4.61AA
Aa7.31AAA
Aa9.41AAA
Aa4.41Below AA
Aa2.25Below AA
Aa1.00Below AA
Aa2.04Below AA
Aa3.24Below AA
Aa4.17Below AA
Aa9.04AAA
Aa4.61AA
Aa2.04Below AA
Aa1.00Below AA
Aa1.58Below AA
Aa2.03Below AA
Aa14.32AAA
Aa7.31AAA
Aa3.24Below AA
Aa1.58Below AA
Aa1.00Below AA
Aa1.28Below AA
Aa18.45AAA
Aa9.41AAA
Aa4.17Below AA
Aa2.03Below AA
Aa1.28Below AA
Aa1.00Below AA

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

  • Aa7.57AAA

    Blanco #FFFFFF

  • Aa6.95AA

    Neutro 100 #F5F5F5

  • Aa6.01AA

    Neutro 200 #E5E5E5

  • Aa3.00Below AA

    Neutro 400 #A3A3A3

  • Aa1.03Below AA

    Neutro 600 #525252

  • Aa2.36Below AA

    Neutro 900 #171717

  • Aa2.77Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Slate 600?

  • Análogos

    • #476961
    • #476369
    • #475569
    • #474769
    • #554769

  • Complementarios

    • #667A97
    • #475569

  • Triádicos

    • #475569
    • #222932
    • #694755

¿Dónde usar Tailwind Slate 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
#475569
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 Slate 600

Slate 600 es un gris frío medio oscuro, oklch(0.446 0.037 257.3), la parada que hace el trabajo pesado para texto secundario y elementos de interfaz sobre fondos claros. Se lee con fuerza sobre blanco, WCAG 2.2 AAA (7.57:1, APCA Lc +86.33), así que subtítulos, leyendas y trazos de íconos en #475569 se mantienen nítidos en tamaños pequeños. Como cabría esperar de un neutro oscuro, no es un color de texto para modo oscuro; sobre casi negro queda en Below AA (2.77:1), así que ahí conviene invertir a un slate más claro. Su baja saturación mantiene las armonías sutiles: el complementario #667A97 es un compañero más claro para bordes, y la tríada apenas se aleja, hacia #222932 y #694755. Recurre al slate cada vez que necesites estructura sin que otro matiz compita por la atención. El lente de accesibilidad lo deja prácticamente sin cambios; las simulaciones de protanopia y deuteranopia se ubican cerca de #4C4B63 y la tritanopia en #486060, así que se mantiene como un neutro confiable para todos los observadores.

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

Bloque @theme de Tailwind v4

@theme {
  --color-primary-50: #f2f5fa;
  --color-primary-100: #cdd3db;
  --color-primary-200: #a9b2bf;
  --color-primary-300: #8692a2;
  --color-primary-400: #657386;
  --color-primary-500: #475569;
  --color-primary-600: #374456;
  --color-primary-700: #283343;
  --color-primary-800: #1b2430;
  --color-primary-900: #0f151e;
  --color-primary-950: #04070d;

  --color-secondary-50: #f5f4fa;
  --color-secondary-100: #d1d0da;
  --color-secondary-200: #aeadbc;
  --color-secondary-300: #8c8b9f;
  --color-secondary-400: #6c6b82;
  --color-secondary-500: #4e4c64;
  --color-secondary-600: #3e3c52;
  --color-secondary-700: #2f2d40;
  --color-secondary-800: #211f2e;
  --color-secondary-900: #13121d;
  --color-secondary-950: #07060d;

  --color-accent-50: #f1f6f7;
  --color-accent-100: #ced7d7;
  --color-accent-200: #abb8b9;
  --color-accent-300: #899b9c;
  --color-accent-400: #6a7e80;
  --color-accent-500: #4c6264;
  --color-accent-600: #3a4e50;
  --color-accent-700: #2a3b3d;
  --color-accent-800: #1c292a;
  --color-accent-900: #0e1819;
  --color-accent-950: #040809;

  --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 600 como design tokens?

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

FAQ

Frequently asked questions

Tailwind Slate 600 (#475569) is oklch(0.446 0.037 257.3) in the OKLCH color space.

Tailwind Slate 600 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 7.57:1 on white, 2.77:1 on black.

On white, Tailwind Slate 600 has an APCA Lc of 86.3. On black, Lc is -15.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 Slate 600 simulates to #4c4b63. Under protanopia it shifts to #4d4d64. Under tritanopia it appears as #486060. 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