paletta

Token de Tailwind CSS

Tailwind Emerald 400 en OKLCH

Quick answer: Tailwind Emerald 400 es #34D399, que convierte a oklch(0.773 0.153 163.20). Sobre blanco, tiene una relación de contraste WCAG de 1.92:1 y un puntaje APCA de Lc +36.29.

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.773 0.153 163.20)

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

  • Especificaciones

    oklch(0.773 0.153 163.20)
    #34D399

    Mayor contraste: black

    10.92: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 -66.19
    Probar en Studio

  • Lente de accesibilidad

    • Base#34D399
    • 300#82E6B9
    • 500#34D399
    • 700#007E52

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

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

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#34D399
oklch
oklch(0.773 0.153 163.20)

Semantic

Bound to a role token that UI reads by name.

--primary: #34D399

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.

AAA10.92:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (10.92:1 on #34D399).

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

Tailwind Emerald 400
50 to 950
#E4FCEF
#C9F4DE
#A7EDCB
#82E6B9
#5CDDA8
#34D399
#00A874
#007E52
#005533
#002F17
#000E02
  • 50oklch(0.970 0.030 162.22)
  • 100oklch(0.931 0.053 162.96)
  • 200oklch(0.890 0.084 163.03)
  • 300oklch(0.851 0.115 163.22)
  • 400oklch(0.811 0.138 163.28)
  • 500oklch(0.773 0.153 163.22)
  • 600oklch(0.647 0.141 162.45)
  • 700oklch(0.523 0.118 160.26)
  • 800oklch(0.396 0.092 158.22)
  • 900oklch(0.268 0.066 155.13)
  • 950oklch(0.143 0.041 147.86)

¿Qué puntaje obtiene Tailwind Emerald 400 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.24Below AA
Aa1.57Below AA
Aa2.84Below AA
Aa8.29AAA
Aa18.30AAA
Aa1.24Below AA
Aa1.00Below AA
Aa1.26Below AA
Aa2.27Below AA
Aa6.65AA
Aa14.68AAA
Aa1.57Below AA
Aa1.26Below AA
Aa1.00Below AA
Aa1.80Below AA
Aa5.26AA
Aa11.62AAA
Aa2.84Below AA
Aa2.27Below AA
Aa1.80Below AA
Aa1.00Below AA
Aa2.91Below AA
Aa6.44AA
Aa8.29AAA
Aa6.65AA
Aa5.26AA
Aa2.91Below AA
Aa1.00Below AA
Aa2.20Below AA
Aa18.30AAA
Aa14.68AAA
Aa11.62AAA
Aa6.44AA
Aa2.20Below AA
Aa1.00Below AA

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

  • Aa1.92Below AA

    Blanco #FFFFFF

  • Aa1.76Below AA

    Neutro 100 #F5F5F5

  • Aa1.52Below AA

    Neutro 200 #E5E5E5

  • Aa1.31Below AA

    Neutro 400 #A3A3A3

  • Aa4.06Below AA

    Neutro 600 #525252

  • Aa9.32AAA

    Neutro 900 #171717

  • Aa10.92AAA

    Negro #000000

¿Qué paletas combinan con Tailwind Emerald 400?

  • Análogos

    • #53D334
    • #34D357
    • #34D399
    • #34CBD3
    • #3488D3

  • Complementarios

    • #73E1B9
    • #34D399

  • Triádicos

    • #34D399
    • #1E8D65
    • #9934D3

¿Dónde usar Tailwind Emerald 400 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-800
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
#34D399
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 400

Este es un Emerald claro, tipo menta, oklch(0.773 0.153 163.2), el tipo de verde pensado para dashboards oscuros y acentos de éxito, no para papel. La claridad es el problema: como texto sobre blanco cae en Below AA (1.92:1, APCA Lc +36.29), así que no debe cargar texto pequeño en una página clara. Sobre una superficie casi negra se convierte en un color distinto, WCAG 2.2 AAA (10.92:1, APCA Lc -66.19), así que este es un verde de modo oscuro, o un relleno brillante debajo de etiquetas oscuras. En cuanto a armonía, el complementario #73E1B9 mantiene todo tonal, mientras que la tríada lanza hacia un #1E8D65 profundo y un sorprendente púrpura #9934D3. La verdadera advertencia está en el lente de accesibilidad: bajo protanopia y deuteranopia el verde se desvanece hacia un gris azulado apagado (#7064AA), así que para muchas personas no se lee como verde en absoluto. Respáldalo siempre con un ícono, una marca de verificación o una etiqueta de texto, nunca solo con color.

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

Bloque @theme de Tailwind v4

@theme {
  --color-primary-50: #e4fcef;
  --color-primary-100: #c9f4de;
  --color-primary-200: #a7edcb;
  --color-primary-300: #82e6b9;
  --color-primary-400: #5cdda8;
  --color-primary-500: #34d399;
  --color-primary-600: #00a874;
  --color-primary-700: #007e52;
  --color-primary-800: #005533;
  --color-primary-900: #002f17;
  --color-primary-950: #000e02;

  --color-secondary-50: #e8f9fc;
  --color-secondary-100: #cbe9ee;
  --color-secondary-200: #abdbe3;
  --color-secondary-300: #89ccd7;
  --color-secondary-400: #6abcca;
  --color-secondary-500: #4cacbb;
  --color-secondary-600: #2a8896;
  --color-secondary-700: #0a6672;
  --color-secondary-800: #00454e;
  --color-secondary-900: #00262d;
  --color-secondary-950: #000b0f;

  --color-accent-50: #e7fce8;
  --color-accent-100: #cbefcd;
  --color-accent-200: #abe3ae;
  --color-accent-300: #8ad78f;
  --color-accent-400: #6aca74;
  --color-accent-500: #4cbb5b;
  --color-accent-600: #28953c;
  --color-accent-700: #047022;
  --color-accent-800: #004c0e;
  --color-accent-900: #002b00;
  --color-accent-950: #000d00;

  --color-neutral-50: #f7f8f7;
  --color-neutral-100: #eff1f0;
  --color-neutral-200: #dfe2e1;
  --color-neutral-300: #c4cac8;
  --color-neutral-400: #9ea9a5;
  --color-neutral-500: #788782;
  --color-neutral-600: #5b6762;
  --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: #F7F8F7;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F8F7;
  --color-foreground: #181B1A;
  --color-muted: #788782;
  --color-border: #DFE2E1;
}

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

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

FAQ

Frequently asked questions

Tailwind Emerald 400 (#34D399) is oklch(0.773 0.153 163.2) in the OKLCH color space.

Tailwind Emerald 400 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 1.92:1 on white, 10.92:1 on black.

On white, Tailwind Emerald 400 has an APCA Lc of 36.3. On black, Lc is -66.2. 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 400 simulates to #7064aa. Under protanopia it shifts to #797aa7. Under tritanopia it appears as #3cb2b5. 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