paletta
Tailwind CSS token

Tailwind Emerald 500 in OKLCH

Quick answer: Tailwind Emerald 500 is #10B981, which converts to oklch(0.696 0.149 162.50). On white, it has a WCAG contrast ratio of 2.54:1 and an APCA score of Lc +49.11.

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.696 0.149 162.50)

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

Specs

oklch(0.696 0.149 162.50)
#10B981

Highest contrast: black

8.28:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc -52.86
Try in Studio

Accessibility lens

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

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

How does Tailwind Emerald 500 go from primitive to component?

  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.28:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

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

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

How does Tailwind Emerald 500 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.38Below AA
Aa1.95Below AA
Aa3.60Below AA
Aa9.41AAA
Aa18.39AAA
Aa1.38Below AA
Aa1.00Below AA
Aa1.41Below AA
Aa2.61Below AA
Aa6.84AA
Aa13.36AAA
Aa1.95Below AA
Aa1.41Below AA
Aa1.00Below AA
Aa1.85Below AA
Aa4.84AA
Aa9.45AAA
Aa3.60Below AA
Aa2.61Below AA
Aa1.85Below AA
Aa1.00Below AA
Aa2.61Below AA
Aa5.11AA
Aa9.41AAA
Aa6.84AA
Aa4.84AA
Aa2.61Below AA
Aa1.00Below AA
Aa1.95Below AA
Aa18.39AAA
Aa13.36AAA
Aa9.45AAA
Aa5.11AA
Aa1.95Below AA
Aa1.00Below AA

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

  • Aa2.54Below AA

    White #FFFFFF

  • Aa2.33Below AA

    Neutral 100 #F5F5F5

  • Aa2.01Below AA

    Neutral 200 #E5E5E5

  • Aa1.01Below AA

    Neutral 400 #A3A3A3

  • Aa3.08Below AA

    Neutral 600 #525252

  • Aa7.07AAA

    Neutral 900 #171717

  • Aa8.28AAA

    Black #000000

What palettes pair with Tailwind Emerald 500?

Analogous

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

Complementary

  • #29ECAC
  • #10B981

Triadic

  • #10B981
  • #096546
  • #8110B9

Where should you use Tailwind Emerald 500 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
#10B981
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 500

Emerald 500 is the canonical Tailwind green, oklch(0.696 0.149 162.5), the shade most people picture for success, growth, and finance UI. It is bright, so the same limit applies as to the lighter Emerald: on white it is Below AA (2.54:1, APCA Lc +49.11), unfit for small text on a light page. On a near-black surface it reaches WCAG 2.2 AAA (8.28:1, APCA Lc -52.86), which is where it belongs. Harmony-wise the complementary #29ECAC keeps it in the green-teal family, while the triad reaches a deep #096546 and a purple #8110B9 for a firm accent. Its accessibility story is the headline: under protanopia and deuteranopia the green desaturates to a blue-purple gray (#4F4392), so it reads as anything but green to red-green viewers. Never let green alone mean success, pair it with a check mark, a label, or a fixed position.

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

Browse all colors

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

How do you export Tailwind Emerald 500 as design tokens?

Export a W3C DTCG token document for the Tailwind Emerald 500 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