paletta

Token de Tailwind CSS

Tailwind Emerald 600 en OKLCH

Quick answer: Tailwind Emerald 600 es #059669, que convierte a oklch(0.596 0.127 163.20). Sobre blanco, tiene una relación de contraste WCAG de 3.76:1 y un puntaje APCA de Lc +64.63.

Esto cumple el umbral de texto AA Large de WCAG 2.2 (3: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.596 0.127 163.20)

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

  • Especificaciones

    oklch(0.596 0.127 163.20)
    #059669

    Mayor contraste: black

    5.57: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 -37.04
    Probar en Studio

  • Lente de accesibilidad

    • Base#059669
    • 300#70C09B
    • 500#059669
    • 700#005B39

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#059669
oklch
oklch(0.596 0.127 163.20)

Semantic

Bound to a role token that UI reads by name.

--primary: #059669

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.

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

On-color text: black (5.57:1 on #059669).

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

Tailwind Emerald 600
50 to 950
#E7FBF0
#C3E6D4
#9BD3B7
#70C09B
#45AB81
#059669
#007950
#005B39
#003F24
#002511
#000D03
  • 50oklch(0.970 0.025 161.95)
  • 100oklch(0.895 0.044 163.07)
  • 200oklch(0.820 0.070 162.65)
  • 300oklch(0.746 0.096 162.85)
  • 400oklch(0.670 0.114 163.19)
  • 500oklch(0.596 0.127 163.23)
  • 600oklch(0.509 0.113 161.05)
  • 700oklch(0.416 0.095 159.57)
  • 800oklch(0.324 0.076 157.74)
  • 900oklch(0.232 0.057 155.20)
  • 950oklch(0.139 0.037 151.65)

¿Qué puntaje obtiene Tailwind Emerald 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.56Below AA
Aa2.63Below AA
Aa5.05AA
Aa11.20AAA
Aa18.37AAA
Aa1.56Below AA
Aa1.00Below AA
Aa1.67Below AA
Aa3.21Below AA
Aa7.13AAA
Aa11.70AAA
Aa2.63Below AA
Aa1.67Below AA
Aa1.00Below AA
Aa1.92Below AA
Aa4.25Below AA
Aa6.98AA
Aa5.05AA
Aa3.21Below AA
Aa1.92Below AA
Aa1.00Below AA
Aa2.21Below AA
Aa3.63Below AA
Aa11.20AAA
Aa7.13AAA
Aa4.25Below AA
Aa2.21Below AA
Aa1.00Below AA
Aa1.63Below AA
Aa18.37AAA
Aa11.70AAA
Aa6.98AA
Aa3.63Below AA
Aa1.63Below AA
Aa1.00Below AA

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

  • Aa3.76Below AA

    Blanco #FFFFFF

  • Aa3.45Below AA

    Neutro 100 #F5F5F5

  • Aa2.99Below AA

    Neutro 200 #E5E5E5

  • Aa1.49Below AA

    Neutro 400 #A3A3A3

  • Aa2.07Below AA

    Neutro 600 #525252

  • Aa4.75AA

    Neutro 900 #171717

  • Aa5.57AA

    Negro #000000

¿Qué paletas combinan con Tailwind Emerald 600?

  • Análogos

    • #1A9605
    • #05962D
    • #059669
    • #058796
    • #054A96

  • Complementarios

    • #07E09D
    • #059669

  • Triádicos

    • #059669
    • #023D2B
    • #690596

¿Dónde usar Tailwind Emerald 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 / black
$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
#059669
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 Emerald 600

Emerald 600 lleva el verde hacia un tono más oscuro y ligeramente más frío, oklch(0.596 0.127 163.2), que es donde los verdes de Tailwind empiezan a volverse usables sobre superficies claras. Como texto sobre blanco alcanza AA Large (3.76:1), suficiente para encabezados y etiquetas gruesas pero no para párrafos; sobre una superficie casi negra mejora a WCAG 2.2 AA (5.57:1, APCA Lc -37.04) para texto normal. Eso lo convierte en un acento decente de dos modos si respetas los límites de tamaño. El complementario #07E09D es un menta brillante para resaltados, y la tríada se ancla en un verde bosque #023D2B y un morado #690596. Mantén los neutros fríos para que el verde se conserve limpio. El lente de accesibilidad todavía exige atención; protanopia y deuteranopia lo giran hacia un morado desaturado (#3B3177), un cambio grande que se aleja del verde, y la tritanopia lo lee como verde azulado (#0C7C7E). Como con todos los verdes de esta serie, respalda el significado de estado con un ícono o texto, no con el matiz.

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

Bloque @theme de Tailwind v4

@theme {
  --color-primary-50: #e7fbf0;
  --color-primary-100: #c3e6d4;
  --color-primary-200: #9bd3b7;
  --color-primary-300: #70c09b;
  --color-primary-400: #45ab81;
  --color-primary-500: #059669;
  --color-primary-600: #007950;
  --color-primary-700: #005b39;
  --color-primary-800: #003f24;
  --color-primary-900: #002511;
  --color-primary-950: #000d03;

  --color-secondary-50: #eaf8fc;
  --color-secondary-100: #c2dbe2;
  --color-secondary-200: #99bfca;
  --color-secondary-300: #6fa4b3;
  --color-secondary-400: #46889a;
  --color-secondary-500: #1b6d80;
  --color-secondary-600: #005869;
  --color-secondary-700: #004352;
  --color-secondary-800: #002e3a;
  --color-secondary-900: #001b24;
  --color-secondary-950: #000a0f;

  --color-accent-50: #e9fbe9;
  --color-accent-100: #c3e2c4;
  --color-accent-200: #9aca9c;
  --color-accent-300: #70b274;
  --color-accent-400: #489950;
  --color-accent-500: #1b802e;
  --color-accent-600: #006719;
  --color-accent-700: #004f08;
  --color-accent-800: #003701;
  --color-accent-900: #002100;
  --color-accent-950: #000c00;

  --color-neutral-50: #f7f8f8;
  --color-neutral-100: #eff1f0;
  --color-neutral-200: #dfe2e1;
  --color-neutral-300: #c4cac8;
  --color-neutral-400: #9ea9a5;
  --color-neutral-500: #788782;
  --color-neutral-600: #5b6763;
  --color-neutral-700: #434c49;
  --color-neutral-800: #2b312f;
  --color-neutral-900: #181b1a;
  --color-neutral-950: #0e1010;

  --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: #F7F8F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F8F8;
  --color-foreground: #181B1A;
  --color-muted: #788782;
  --color-border: #DFE2E1;
}

¿Cómo exportas Tailwind Emerald 600 como design tokens?

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

FAQ

Frequently asked questions

Tailwind Emerald 600 (#059669) is oklch(0.596 0.127 163.2) in the OKLCH color space.

Tailwind Emerald 600 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.76:1 on white, 5.57:1 on black.

On white, Tailwind Emerald 600 has an APCA Lc of 64.6. On black, Lc is -37. 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 Emerald 600 simulates to #3b3177. Under protanopia it shifts to #444574. Under tritanopia it appears as #0c7c7e. 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