paletta
Token de Tailwind CSS

Tailwind Emerald 700 en OKLCH

Quick answer: Tailwind Emerald 700 es #047857, que convierte a oklch(0.508 0.105 165.60). Sobre blanco, tiene una relación de contraste WCAG de 5.48:1 y un puntaje APCA de Lc +76.83.

Esto cumple el umbral de texto AA Normal de WCAG 2.2 (4.5: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.508 0.105 165.60)

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

Especificaciones

oklch(0.508 0.105 165.60)
#047857

Mayor contraste: white

5.48: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 +76.83
Probar en Studio

Lente de accesibilidad

  • Base#047857
  • 300#6BAC91
  • 500#047857
  • 700#004A31

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#047857
oklch
oklch(0.508 0.105 165.60)

Semantic

Bound to a role token that UI reads by name.

--primary: #047857

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.48:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (5.48:1 on #047857).

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

Tailwind Emerald 700
50 to 950
#E9FAF2
#C1DFD1
#97C5B0
#6BAC91
#409273
#047857
#006143
#004A31
#003420
#001F11
#000C04
  • 50oklch(0.970 0.021 166.11)
  • 100oklch(0.878 0.037 165.71)
  • 200oklch(0.785 0.057 165.28)
  • 300oklch(0.693 0.078 165.95)
  • 400oklch(0.600 0.094 165.80)
  • 500oklch(0.508 0.105 165.61)
  • 600oklch(0.436 0.093 163.72)
  • 700oklch(0.362 0.079 162.58)
  • 800oklch(0.287 0.064 161.11)
  • 900oklch(0.211 0.047 160.50)
  • 950oklch(0.136 0.033 156.52)

¿Qué puntaje obtiene Tailwind Emerald 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
Aa1.78Below AA
Aa3.48Below AA
Aa6.96AA
Aa12.84AAA
Aa18.42AAA
Aa1.78Below AA
Aa1.00Below AA
Aa1.96Below AA
Aa3.92Below AA
Aa7.23AAA
Aa10.37AAA
Aa3.48Below AA
Aa1.96Below AA
Aa1.00Below AA
Aa2.00Below AA
Aa3.69Below AA
Aa5.29AA
Aa6.96AA
Aa3.92Below AA
Aa2.00Below AA
Aa1.00Below AA
Aa1.85Below AA
Aa2.65Below AA
Aa12.84AAA
Aa7.23AAA
Aa3.69Below AA
Aa1.85Below AA
Aa1.00Below AA
Aa1.43Below AA
Aa18.42AAA
Aa10.37AAA
Aa5.29AA
Aa2.65Below AA
Aa1.43Below AA
Aa1.00Below AA

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

  • Aa5.48AA

    Blanco #FFFFFF

  • Aa5.03AA

    Neutro 100 #F5F5F5

  • Aa4.35Below AA

    Neutro 200 #E5E5E5

  • Aa2.17Below AA

    Neutro 400 #A3A3A3

  • Aa1.42Below AA

    Neutro 600 #525252

  • Aa3.27Below AA

    Neutro 900 #171717

  • Aa3.83Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Emerald 700?

Análogos

  • #127804
  • #047827
  • #047857
  • #046978
  • #043878

Complementarios

  • #06C28D
  • #047857

Triádicos

  • #047857
  • #023B2B
  • #570478

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

En el 700, Emerald por fin funciona como texto sobre blanco, oklch(0.508 0.105 165.6). Este verde pino profundo supera WCAG 2.2 AA para texto normal en una página clara (5.48:1, APCA Lc +76.83), así que es la parada de emerald indicada para enlaces, texto de éxito y etiquetas pequeñas que deben mantenerse legibles. En modo oscuro cede a AA Large (3.83:1), así que agranda esos casos. Sus armonías son apagadas y maduras: el complementario #06C28D aporta un menta espiga brillante para contraste, el análogo #046978 se desliza hacia el verde azulado, y la tríada llega a un ciruela #570478. Anclado sobre slate neutro, se siente editorial en vez de estridente. El lente de accesibilidad sigue siendo la advertencia constante para los verdes; protanopia y deuteranopia lo desplazan hacia un índigo oscuro (#302761), muy lejos del verde, mientras que la tritanopia lo conserva con tendencia a verde azulado (#0A6567). Incluso en esta parada legible, no dejes que el verde cargue solo con un mensaje de estado.

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

Explora todos los colores

@theme {
  --color-primary-50: #e9faf2;
  --color-primary-100: #c1dfd1;
  --color-primary-200: #97c5b0;
  --color-primary-300: #6bac91;
  --color-primary-400: #409273;
  --color-primary-500: #047857;
  --color-primary-600: #006143;
  --color-primary-700: #004a31;
  --color-primary-800: #003420;
  --color-primary-900: #001f11;
  --color-primary-950: #000c04;

  --color-secondary-50: #e8f8fe;
  --color-secondary-100: #c4e0ea;
  --color-secondary-200: #9cc9d8;
  --color-secondary-300: #73b1c6;
  --color-secondary-400: #4c9ab2;
  --color-secondary-500: #21829c;
  --color-secondary-600: #006880;
  --color-secondary-700: #004e63;
  --color-secondary-800: #003646;
  --color-secondary-900: #001f2a;
  --color-secondary-950: #000a11;

  --color-accent-50: #e7fce8;
  --color-accent-100: #c5e9c6;
  --color-accent-200: #9ed7a1;
  --color-accent-300: #75c47c;
  --color-accent-400: #4eb15b;
  --color-accent-500: #219c3b;
  --color-accent-600: #007d21;
  --color-accent-700: #005f0b;
  --color-accent-800: #004100;
  --color-accent-900: #002600;
  --color-accent-950: #000d00;

  --color-neutral-50: #f7f8f8;
  --color-neutral-100: #eff1f0;
  --color-neutral-200: #dfe2e1;
  --color-neutral-300: #c4cac8;
  --color-neutral-400: #9ea9a6;
  --color-neutral-500: #788783;
  --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: #788783;
  --color-border: #DFE2E1;
}

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

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