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.77: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.57Below AA
Aa2.63Below AA
Aa5.05AA
Aa11.20AAA
Aa18.37AAA
Aa1.57Below AA
Aa1.00Below AA
Aa1.68Below AA
Aa3.22Below AA
Aa7.14AAA
Aa11.71AAA
Aa2.63Below AA
Aa1.68Below AA
Aa1.00Below AA
Aa1.92Below AA
Aa4.26Below AA
Aa6.98AA
Aa5.05AA
Aa3.22Below AA
Aa1.92Below AA
Aa1.00Below AA
Aa2.22Below AA
Aa3.64Below AA
Aa11.20AAA
Aa7.14AAA
Aa4.26Below AA
Aa2.22Below AA
Aa1.00Below AA
Aa1.64Below AA
Aa18.37AAA
Aa11.71AAA
Aa6.98AA
Aa3.64Below AA
Aa1.64Below AA
Aa1.00Below AA

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

  • Aa3.77Below AA

    Blanco #FFFFFF

  • Aa3.46Below AA

    Neutro 100 #F5F5F5

  • Aa2.99Below AA

    Neutro 200 #E5E5E5

  • Aa1.49Below AA

    Neutro 400 #A3A3A3

  • Aa2.07Below AA

    Neutro 600 #525252

  • Aa4.76AA

    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
$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
#059669
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 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.77: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?

Explora todos los colores

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

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