paletta
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)

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

Protanopia#797AA7
Deuteranopia#7064AA
Tritanopia#3CB2B5

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

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
"Paletta replaced our color brainstorm meetings."
Sora Mehta
Design lead, Northwind
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

What other Tailwind and shadcn colors look like Tailwind Emerald 400?

@theme {
  --color-primary-50: #eafaf4;
  --color-primary-100: #c5f2e2;
  --color-primary-200: #a1eacf;
  --color-primary-300: #7be2bc;
  --color-primary-400: #57daaa;
  --color-primary-500: #34d297;
  --color-primary-600: #29af7d;
  --color-primary-700: #208962;
  --color-primary-800: #186448;
  --color-primary-900: #0f3f2d;
  --color-primary-950: #09291d;

  --color-secondary-50: #edf6f8;
  --color-secondary-100: #cce7eb;
  --color-secondary-200: #abd8df;
  --color-secondary-300: #8ac9d3;
  --color-secondary-400: #69b9c6;
  --color-secondary-500: #48aaba;
  --color-secondary-600: #3b8d9a;
  --color-secondary-700: #2e6f79;
  --color-secondary-800: #225158;
  --color-secondary-900: #153337;
  --color-secondary-950: #0e2124;

  --color-accent-50: #edf8ee;
  --color-accent-100: #ccebd0;
  --color-accent-200: #abdfb2;
  --color-accent-300: #8ad394;
  --color-accent-400: #69c676;
  --color-accent-500: #48ba58;
  --color-accent-600: #3b9a47;
  --color-accent-700: #2e7938;
  --color-accent-800: #225829;
  --color-accent-900: #15371a;
  --color-accent-950: #0e2411;

  --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: #e9fcf0;
  --color-success-100: #c1f7d4;
  --color-success-200: #99f1b9;
  --color-success-300: #71ec9e;
  --color-success-400: #49e683;
  --color-success-500: #21e168;
  --color-success-600: #19bb55;
  --color-success-700: #149343;
  --color-success-800: #0e6b31;
  --color-success-900: #09431f;
  --color-success-950: #062c14;

  --color-error-50: #fbe9e9;
  --color-error-100: #f5c2c2;
  --color-error-200: #ef9b9b;
  --color-error-300: #e97474;
  --color-error-400: #e24d4d;
  --color-error-500: #dc2626;
  --color-error-600: #b71e1e;
  --color-error-700: #901717;
  --color-error-800: #691111;
  --color-error-900: #420b0b;
  --color-error-950: #2b0707;

  --color-warning-50: #fef3e6;
  --color-warning-100: #fddeba;
  --color-warning-200: #fcc98e;
  --color-warning-300: #fbb462;
  --color-warning-400: #f99f36;
  --color-warning-500: #f8890a;
  --color-warning-600: #cf7106;
  --color-warning-700: #a35904;
  --color-warning-800: #774103;
  --color-warning-900: #4a2902;
  --color-warning-950: #301b01;

  --color-info-50: #e8eefd;
  --color-info-100: #bed1f9;
  --color-info-200: #95b3f5;
  --color-info-300: #6b95f1;
  --color-info-400: #4277ee;
  --color-info-500: #185aea;
  --color-info-600: #1249c3;
  --color-info-700: #0e3a99;
  --color-info-800: #0a2a70;
  --color-info-900: #061a46;
  --color-info-950: #04112e;

  /* Surfaces */
  --color-background: #F7F8F7;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F8F7;
  --color-foreground: #181B1A;
  --color-muted: #788782;
  --color-border: #DFE2E1;
}

Frequently asked questions

Ready to build your color system?

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

Get started for free See pricing