paletta
Token de Tailwind CSS

Tailwind Slate 700 en OKLCH

Quick answer: Tailwind Slate 700 es #334155, que convierte a oklch(0.372 0.039 257.30). Sobre blanco, tiene una relación de contraste WCAG de 10.35:1 y un puntaje APCA de Lc +94.02.

Esto cumple el umbral de texto AAA Normal 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.372 0.039 257.30)

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

Especificaciones

oklch(0.372 0.039 257.30)
#334155

Mayor contraste: white

10.35: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 +94.02
Probar en Studio

Lente de accesibilidad

  • Base#334155
  • 300#798495
  • 500#334155
  • 700#1D2838

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#334155
oklch
oklch(0.372 0.039 257.30)

Semantic

Bound to a role token that UI reads by name.

--primary: #334155

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.

AAA10.35:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (10.35:1 on #334155).

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

Tailwind Slate 700
50 to 950
#F2F5FA
#C8CED7
#A0A9B6
#798495
#546275
#334155
#283447
#1D2838
#141D29
#0B121B
#04070D
  • 50oklch(0.969 0.007 260.73)
  • 100oklch(0.849 0.014 258.35)
  • 200oklch(0.732 0.021 257.49)
  • 300oklch(0.610 0.029 259.04)
  • 400oklch(0.492 0.035 256.10)
  • 500oklch(0.372 0.039 257.29)
  • 600oklch(0.323 0.038 259.43)
  • 700oklch(0.274 0.034 257.67)
  • 800oklch(0.228 0.027 255.80)
  • 900oklch(0.180 0.022 255.00)
  • 950oklch(0.127 0.016 257.84)

¿Qué puntaje obtiene Tailwind Slate 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
Aa2.17Below AA
Aa5.68AA
Aa11.49AAA
Aa15.53AAA
Aa18.45AAA
Aa2.17Below AA
Aa1.00Below AA
Aa2.62Below AA
Aa5.29AA
Aa7.15AAA
Aa8.49AAA
Aa5.68AA
Aa2.62Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa2.73Below AA
Aa3.25Below AA
Aa11.49AAA
Aa5.29AA
Aa2.02Below AA
Aa1.00Below AA
Aa1.35Below AA
Aa1.61Below AA
Aa15.53AAA
Aa7.15AAA
Aa2.73Below AA
Aa1.35Below AA
Aa1.00Below AA
Aa1.19Below AA
Aa18.45AAA
Aa8.49AAA
Aa3.25Below AA
Aa1.61Below AA
Aa1.19Below AA
Aa1.00Below AA

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

  • Aa10.35AAA

    Blanco #FFFFFF

  • Aa9.50AAA

    Neutro 100 #F5F5F5

  • Aa8.22AAA

    Neutro 200 #E5E5E5

  • Aa4.10Below AA

    Neutro 400 #A3A3A3

  • Aa1.33Below AA

    Neutro 600 #525252

  • Aa1.73Below AA

    Neutro 900 #171717

  • Aa2.03Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Slate 700?

Análogos

  • #33554D
  • #334F55
  • #334155
  • #333355
  • #413355

Complementarios

  • #506685
  • #334155

Triádicos

  • #334155
  • #171D26
  • #553341

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

Slate 700 es lo bastante oscuro para funcionar como tinta de texto de cuerpo, aunque se lee más frío y suave que el negro, oklch(0.372 0.039 257.3). Este es el color para el texto de párrafo principal en interfaces claras y para encabezados de alto énfasis. Su contraste sobre blanco es muy alto, WCAG 2.2 AAA (10.35:1, APCA Lc +94.02), lo que significa que el texto extenso en #334155 resulta cómodo a la vista en cualquier tamaño. El reverso es tajante: sobre una superficie negro puro cae en Below AA (2.03:1), así que pertenece solo a fondos claros, mientras que los slates más claros se encargan del modo oscuro. Cuando una tarjeta necesita un realce, el complementario #506685 ofrece un azul acero apagado, y el análogo #334F55 se inclina levemente hacia el verde azulado. Como con los demás slates, el lente de accesibilidad es una formalidad; las simulaciones de deficiencia en la visión del color se agrupan cerca de #38374F y #344C4C, así que su función como tinta de texto confiable se mantiene tanto para protanopia como para deuteranopia y tritanopia.

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

Explora todos los colores

@theme {
  --color-primary-50: #f2f5fa;
  --color-primary-100: #c8ced7;
  --color-primary-200: #a0a9b6;
  --color-primary-300: #798495;
  --color-primary-400: #546275;
  --color-primary-500: #334155;
  --color-primary-600: #283447;
  --color-primary-700: #1d2838;
  --color-primary-800: #141d29;
  --color-primary-900: #0b121b;
  --color-primary-950: #04070d;

  --color-secondary-50: #f5f4fb;
  --color-secondary-100: #cccbd6;
  --color-secondary-200: #a4a4b4;
  --color-secondary-300: #7f7e92;
  --color-secondary-400: #5b5a71;
  --color-secondary-500: #3a3850;
  --color-secondary-600: #2f2d43;
  --color-secondary-700: #242235;
  --color-secondary-800: #1a1827;
  --color-secondary-900: #100f1a;
  --color-secondary-950: #07060d;

  --color-accent-50: #f1f6f7;
  --color-accent-100: #c9d2d3;
  --color-accent-200: #a2afb0;
  --color-accent-300: #7c8e8f;
  --color-accent-400: #596d6f;
  --color-accent-500: #384e50;
  --color-accent-600: #2b3f41;
  --color-accent-700: #1f3032;
  --color-accent-800: #142223;
  --color-accent-900: #0b1516;
  --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 700 como design tokens?

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