paletta

Token de Tailwind CSS

Tailwind Emerald 500 en OKLCH

Quick answer: Tailwind Emerald 500 es #10B981, que convierte a oklch(0.696 0.149 162.50). Sobre blanco, tiene una relación de contraste WCAG de 2.53:1 y un puntaje APCA de Lc +49.11.

Esto no alcanza el umbral de texto grande AA de WCAG 2.2 (3:1) sobre blanco. Combínalo con un primer plano más oscuro. 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.696 0.149 162.50)

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

  • Especificaciones

    oklch(0.696 0.149 162.50)
    #10B981

    Mayor contraste: black

    8.27: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 -52.86
    Probar en Studio

  • Lente de accesibilidad

    • Base#10B981
    • 300#77D6AA
    • 500#10B981
    • 700#006F45

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#10B981
oklch
oklch(0.696 0.149 162.50)

Semantic

Bound to a role token that UI reads by name.

--primary: #10B981

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.

AAA8.27:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (8.27:1 on #10B981).

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

Tailwind Emerald 500
50 to 950
#E4FCEF
#C5EED9
#A0E2C1
#77D6AA
#4CC895
#10B981
#009461
#006F45
#004C2B
#002B13
#000D02
  • 50oklch(0.970 0.030 162.22)
  • 100oklch(0.914 0.051 162.97)
  • 200oklch(0.859 0.081 162.35)
  • 300oklch(0.805 0.111 162.42)
  • 400oklch(0.750 0.134 162.75)
  • 500oklch(0.696 0.149 162.48)
  • 600oklch(0.588 0.133 160.22)
  • 700oklch(0.477 0.110 158.72)
  • 800oklch(0.366 0.088 156.72)
  • 900oklch(0.254 0.064 153.63)
  • 950oklch(0.139 0.040 148.38)

¿Qué puntaje obtiene Tailwind Emerald 500 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.37Below AA
Aa1.94Below AA
Aa3.59Below AA
Aa9.41AAA
Aa18.39AAA
Aa1.37Below AA
Aa1.00Below AA
Aa1.41Below AA
Aa2.61Below AA
Aa6.83AA
Aa13.36AAA
Aa1.94Below AA
Aa1.41Below AA
Aa1.00Below AA
Aa1.84Below AA
Aa4.83AA
Aa9.45AAA
Aa3.59Below AA
Aa2.61Below AA
Aa1.84Below AA
Aa1.00Below AA
Aa2.61Below AA
Aa5.10AA
Aa9.41AAA
Aa6.83AA
Aa4.83AA
Aa2.61Below AA
Aa1.00Below AA
Aa1.95Below AA
Aa18.39AAA
Aa13.36AAA
Aa9.45AAA
Aa5.10AA
Aa1.95Below AA
Aa1.00Below AA

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

  • Aa2.53Below AA

    Blanco #FFFFFF

  • Aa2.32Below AA

    Neutro 100 #F5F5F5

  • Aa2.01Below AA

    Neutro 200 #E5E5E5

  • Aa1.00Below AA

    Neutro 400 #A3A3A3

  • Aa3.08Below AA

    Neutro 600 #525252

  • Aa7.06AAA

    Neutro 900 #171717

  • Aa8.27AAA

    Negro #000000

¿Qué paletas combinan con Tailwind Emerald 500?

  • Análogos

    • #2CB910
    • #10B93B
    • #10B981
    • #10ABB9
    • #1064B9

  • Complementarios

    • #29ECAC
    • #10B981

  • Triádicos

    • #10B981
    • #096546
    • #8110B9

¿Dónde usar Tailwind Emerald 500 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: black
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
#10B981
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600 / blackbutton-secondary: primary-50 / primary-700
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notas sobre Tailwind Emerald 500

Emerald 500 es el verde canónico de Tailwind, oklch(0.696 0.149 162.5), el tono que la mayoría imagina para éxito, crecimiento e interfaces financieras. Es brillante, así que aplica la misma limitación que al Emerald más claro: sobre blanco queda en Below AA (2.53:1, APCA Lc +49.11), inadecuado para texto pequeño en una página clara. Sobre una superficie casi negra alcanza WCAG 2.2 AAA (8.27:1, APCA Lc -52.86), que es donde pertenece. En cuanto a armonía, el complementario #29ECAC lo mantiene dentro de la familia verde-verde azulado, mientras que la tríada llega a un #096546 profundo y a un morado #8110B9 para un acento firme. Su historia de accesibilidad es el titular: bajo protanopia y deuteranopia el verde se desatura hacia un gris azul violáceo (#4F4392), así que para quienes tienen visión rojo-verde se lee como cualquier cosa menos verde. Nunca dejes que el verde por sí solo signifique éxito, acompáñalo de una marca de verificación, una etiqueta o una posición fija.

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

Bloque @theme de Tailwind v4

@theme {
  --color-primary-50: #e4fcef;
  --color-primary-100: #c5eed9;
  --color-primary-200: #a0e2c1;
  --color-primary-300: #77d6aa;
  --color-primary-400: #4cc895;
  --color-primary-500: #10b981;
  --color-primary-600: #009461;
  --color-primary-700: #006f45;
  --color-primary-800: #004c2b;
  --color-primary-900: #002b13;
  --color-primary-950: #000d02;

  --color-secondary-50: #e8f9fd;
  --color-secondary-100: #c5e2ea;
  --color-secondary-200: #9fcdd8;
  --color-secondary-300: #77b7c7;
  --color-secondary-400: #51a1b4;
  --color-secondary-500: #298ba0;
  --color-secondary-600: #026f82;
  --color-secondary-700: #005364;
  --color-secondary-800: #003946;
  --color-secondary-900: #00202a;
  --color-secondary-950: #000a10;

  --color-accent-50: #e7fce8;
  --color-accent-100: #c6e9c7;
  --color-accent-200: #a0d8a2;
  --color-accent-300: #78c77e;
  --color-accent-400: #52b45d;
  --color-accent-500: #29a03e;
  --color-accent-600: #008023;
  --color-accent-700: #00610d;
  --color-accent-800: #004300;
  --color-accent-900: #002700;
  --color-accent-950: #000d00;

  --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 500 como design tokens?

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

FAQ

Frequently asked questions

Tailwind Emerald 500 (#10B981) is oklch(0.696 0.149 162.5) in the OKLCH color space.

Tailwind Emerald 500 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 2.53:1 on white, 8.27:1 on black.

On white, Tailwind Emerald 500 has an APCA Lc of 49.1. On black, Lc is -52.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 500 simulates to #4f4392. Under protanopia it shifts to #595b8f. Under tritanopia it appears as #18999c. 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