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 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.77Below AA
Aa3.48Below AA
Aa6.95AA
Aa12.84AAA
Aa18.42AAA
Aa1.77Below AA
Aa1.00Below AA
Aa1.95Below AA
Aa3.91Below AA
Aa7.22AAA
Aa10.36AAA
Aa3.48Below AA
Aa1.95Below AA
Aa1.00Below AA
Aa1.99Below AA
Aa3.68Below AA
Aa5.28AA
Aa6.95AA
Aa3.91Below AA
Aa1.99Below AA
Aa1.00Below AA
Aa1.84Below AA
Aa2.64Below AA
Aa12.84AAA
Aa7.22AAA
Aa3.68Below AA
Aa1.84Below AA
Aa1.00Below AA
Aa1.43Below AA
Aa18.42AAA
Aa10.36AAA
Aa5.28AA
Aa2.64Below 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.26Below AA

    Neutro 900 #171717

  • Aa3.82Below 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 / 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
#047857
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 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.82: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?

Bloque @theme de Tailwind v4

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

FAQ

Frequently asked questions

Tailwind Emerald 700 (#047857) is oklch(0.508 0.105 165.6) in the OKLCH color space.

Tailwind Emerald 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 5.48:1 on white, 3.82:1 on black.

On white, Tailwind Emerald 700 has an APCA Lc of 76.8. On black, Lc is -24.9. 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 700 simulates to #302761. Under protanopia it shifts to #36375f. Under tritanopia it appears as #0a6567. 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