What is Tailwind Emerald 400 in OKLCH?

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

Is Tailwind Emerald 400 WCAG 2.2 AA accessible?

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.

What is the APCA Lc for Tailwind Emerald 400?

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.

How do I use Tailwind Emerald 400 in Tailwind?

Paste the snippet above into your tailwind.config (or globals.css with @theme).

How does Tailwind Emerald 400 look to people with color vision differences?

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.

Tailwind CSS token

Tailwind Emerald 400 in OKLCH

Quick answer: Tailwind Emerald 400 is #34D399, which converts to oklch(0.773 0.153 163.20). On white, it has a WCAG contrast ratio of 1.92:1 and an APCA score of Lc +36.29.

This falls below the WCAG 2.2 AA Large text threshold (3:1) on white; pair with a darker foreground. The color shipped in Tailwind CSS v4.0 (January 2025) as part of the OKLCH default palette, which has 92% global browser support (caniuse, April 2026).

oklch(0.773 0.153 163.20)

Tailwind Emerald 400 is a Tailwind utility color. This page frames #34D399 as a utility stop: copy the generated @theme scale below, or map it into your own tokens.

Specs

oklch(0.773 0.153 163.20)

#34D399

Highest contrast: black

10.92:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc -66.19

Try in Studio

Accessibility lens

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

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

How does Tailwind Emerald 400 go from primitive to component?

Primitive
Semantic
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).

How does Tailwind Emerald 400 scale from 50 to 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)

How does Tailwind Emerald 400 score on WCAG 2.2 contrast?

Every fg × bg combination, with WCAG 2.2 verdicts.

AAA (7:1+)

AA (4.5:1+)

Below AA (under 4.5:1)

Hover for APCA

Aa1.00Below AA

Aa1.25Below AA

Aa1.57Below AA

Aa2.84Below AA

Aa8.29AAA

Aa18.30AAA

Aa1.25Below AA

Aa1.00Below AA

Aa1.26Below AA

Aa2.28Below AA

Aa6.65AA

Aa14.68AAA

Aa1.57Below AA

Aa1.26Below AA

Aa1.00Below AA

Aa1.80Below AA

Aa5.27AA

Aa11.62AAA

Aa2.84Below AA

Aa2.28Below AA

Aa1.80Below AA

Aa1.00Below AA

Aa2.92Below AA

Aa6.44AA

Aa8.29AAA

Aa6.65AA

Aa5.27AA

Aa2.92Below AA

Aa1.00Below AA

Aa2.21Below AA

Aa18.30AAA

Aa14.68AAA

Aa11.62AAA

Aa6.44AA

Aa2.21Below AA

Aa1.00Below AA

Does Tailwind Emerald 400 pass WCAG 2.2 on common neutral backgrounds?

Aa1.92Below AA
White #FFFFFF
Aa1.76Below AA
Neutral 100 #F5F5F5
Aa1.53Below AA
Neutral 200 #E5E5E5
Aa1.31Below AA
Neutral 400 #A3A3A3
Aa4.06Below AA
Neutral 600 #525252
Aa9.33AAA
Neutral 900 #171717
Aa10.92AAA
Black #000000

What palettes pair with Tailwind Emerald 400?

Analogous

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

Complementary

#73E1B9
#34D399

Triadic

#34D399
#1E8D65
#9934D3

Where should you use Tailwind Emerald 400 in production UI?

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

#34D399

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

Notes on Tailwind Emerald 400

This is a light, minty Emerald, oklch(0.773 0.153 163.2), the kind of green for dark dashboards and success accents rather than for paper. Lightness is the catch: as text on white it falls Below AA (1.92:1, APCA Lc +36.29), so it must not carry small copy on a light page. On a near-black surface it becomes a different color, WCAG 2.2 AAA (10.92:1, APCA Lc -66.19), so this is a dark-mode green, or a bright fill sitting under dark labels. For harmony, the complementary #73E1B9 keeps things tonal, while the triad throws to a deep #1E8D65 and a surprising purple #9934D3. The real watch-out is the accessibility lens: under protanopia and deuteranopia the green drains toward a muted blue-gray (#7064AA), so it reads nothing like green to many viewers. Always back it with an icon, a check mark, or a text label, never color alone.

What other Tailwind and shadcn colors relate to Tailwind Emerald 400?

More Emerald in Tailwind

Nearest hues across families

Browse all colors

@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;
}

How do you export Tailwind Emerald 400 as design tokens?

Export a W3C DTCG token document for the Tailwind Emerald 400 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Built by a product designer who ships to code.

Generate system See pricing

Tailwind Emerald 400 in OKLCH

Accessibility lens

How does Tailwind Emerald 400 go from primitive to component?

How does Tailwind Emerald 400 scale from 50 to 950?

How does Tailwind Emerald 400 score on WCAG 2.2 contrast?

Does Tailwind Emerald 400 pass WCAG 2.2 on common neutral backgrounds?

What palettes pair with Tailwind Emerald 400?

Analogous

Complementary

Triadic

Where should you use Tailwind Emerald 400 in production UI?

Notes on Tailwind Emerald 400

What other Tailwind and shadcn colors relate to Tailwind Emerald 400?

More Emerald in Tailwind

Tailwind Emerald 500 in OKLCH

Tailwind Emerald 600 in OKLCH

Tailwind Emerald 700 in OKLCH

Nearest hues across families

shadcn Green in OKLCH

Tailwind Amber 500 in OKLCH

Tailwind Slate 600 in OKLCH

Tailwind Slate 700 in OKLCH

How do you export Tailwind Emerald 400 as design tokens?

Frequently asked questions

Ready to build your color system?