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 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.52AAA
Aa18.45AAA
Aa2.17Below AA
Aa1.00Below AA
Aa2.61Below AA
Aa5.28AA
Aa7.14AAA
Aa8.49AAA
Aa5.68AA
Aa2.61Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa2.73Below AA
Aa3.24Below AA
Aa11.49AAA
Aa5.28AA
Aa2.02Below AA
Aa1.00Below AA
Aa1.35Below AA
Aa1.60Below AA
Aa15.52AAA
Aa7.14AAA
Aa2.73Below AA
Aa1.35Below AA
Aa1.00Below AA
Aa1.18Below AA
Aa18.45AAA
Aa8.49AAA
Aa3.24Below AA
Aa1.60Below AA
Aa1.18Below AA
Aa1.00Below AA

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

  • Aa10.35AAA

    Blanco #FFFFFF

  • Aa9.49AAA

    Neutro 100 #F5F5F5

  • Aa8.22AAA

    Neutro 200 #E5E5E5

  • Aa4.10Below AA

    Neutro 400 #A3A3A3

  • Aa1.32Below AA

    Neutro 600 #525252

  • Aa1.73Below AA

    Neutro 900 #171717

  • Aa2.02Below 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 / 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
#334155
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 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.02: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?

Bloque @theme de Tailwind v4

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

FAQ

Frequently asked questions

Tailwind Slate 700 (#334155) is oklch(0.372 0.039 257.3) in the OKLCH color space.

Tailwind Slate 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 10.35:1 on white, 2.02:1 on black.

On white, Tailwind Slate 700 has an APCA Lc of 94. On black, Lc is -8.5. 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 700 simulates to #38374f. Under protanopia it shifts to #393950. Under tritanopia it appears as #344c4c. 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