What is Tailwind Emerald 700 in OKLCH?

Tailwind Emerald 700 (#047857) is oklch(0.508 0.105 165.6) in the OKLCH color space.

Is Tailwind Emerald 700 WCAG 2.2 AA accessible?

Tailwind Emerald 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 5.48:1 on white, 3.83:1 on black.

What is the APCA Lc for Tailwind Emerald 700?

On white, Tailwind Emerald 700 has an APCA Lc of 76.8. On black, Lc is -24.9. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Emerald 700 in Tailwind?

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

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

Under deuteranopia (most common, around 5 percent of men), Tailwind Emerald 700 simulates to #302761. Under protanopia it shifts to #36375f. Under tritanopia it appears as #0a6567. Always pair color with shape, label, or icon for accessibility.

Tailwind CSS token

Tailwind Emerald 700 in OKLCH

Quick answer: Tailwind Emerald 700 is #047857, which converts to oklch(0.508 0.105 165.60). On white, it has a WCAG contrast ratio of 5.48:1 and an APCA score of Lc +76.83.

This meets the WCAG 2.2 AA Normal text threshold (4.5:1) on white. 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.508 0.105 165.60)

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

Specs

oklch(0.508 0.105 165.60)

#047857

Highest contrast: white

5.48:1

Normal AA

Normal AAA

Large AA

Large AAA

Lc +76.83

Try in Studio

Accessibility lens

Base#047857
300#6BAC91
500#047857
700#004A31

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

How does Tailwind Emerald 700 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #047857
oklch: oklch(0.508 0.105 165.60)

Semantic

Bound to a role token that UI reads by name.

--primary: #047857

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.

AA5.48:1

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: white (5.48:1 on #047857).

How does Tailwind Emerald 700 scale from 50 to 950?

Tailwind Emerald 700

50 to 950

#E9FAF2

#C1DFD1

#97C5B0

#6BAC91

#409273

#047857

#006143

#004A31

#003420

#001F11

#000C04

50oklch(0.970 0.021 166.11)
100oklch(0.878 0.037 165.71)
200oklch(0.785 0.057 165.28)
300oklch(0.693 0.078 165.95)
400oklch(0.600 0.094 165.80)
500oklch(0.508 0.105 165.61)
600oklch(0.436 0.093 163.72)
700oklch(0.362 0.079 162.58)
800oklch(0.287 0.064 161.11)
900oklch(0.211 0.047 160.50)
950oklch(0.136 0.033 156.52)

How does Tailwind Emerald 700 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.78Below AA

Aa3.48Below AA

Aa6.96AA

Aa12.84AAA

Aa18.42AAA

Aa1.78Below AA

Aa1.00Below AA

Aa1.96Below AA

Aa3.92Below AA

Aa7.23AAA

Aa10.37AAA

Aa3.48Below AA

Aa1.96Below AA

Aa1.00Below AA

Aa2.00Below AA

Aa3.69Below AA

Aa5.29AA

Aa6.96AA

Aa3.92Below AA

Aa2.00Below AA

Aa1.00Below AA

Aa1.85Below AA

Aa2.65Below AA

Aa12.84AAA

Aa7.23AAA

Aa3.69Below AA

Aa1.85Below AA

Aa1.00Below AA

Aa1.43Below AA

Aa18.42AAA

Aa10.37AAA

Aa5.29AA

Aa2.65Below AA

Aa1.43Below AA

Aa1.00Below AA

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

Aa5.48AA
White #FFFFFF
Aa5.03AA
Neutral 100 #F5F5F5
Aa4.35Below AA
Neutral 200 #E5E5E5
Aa2.17Below AA
Neutral 400 #A3A3A3
Aa1.42Below AA
Neutral 600 #525252
Aa3.27Below AA
Neutral 900 #171717
Aa3.83Below AA
Black #000000

What palettes pair with Tailwind Emerald 700?

Analogous

#127804
#047827
#047857
#046978
#043878

Complementary

#06C28D
#047857

Triadic

#047857
#023B2B
#570478

Where should you use Tailwind Emerald 700 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

#047857

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 700

By 700, Emerald finally works as text on white, oklch(0.508 0.105 165.6). This deep pine green clears WCAG 2.2 AA for normal text on a light page (5.48:1, APCA Lc +76.83), so it is the emerald stop to choose for links, success copy, and small labels that must stay legible. In dark mode it eases to AA Large (3.83:1), so size those instances up. Its harmonies are muted and grown up: the complementary #06C28D lifts a bright spearmint for contrast, the analogous #046978 slides toward teal, and the triad reaches a plum #570478. Grounded on neutral slate, it feels editorial rather than loud. The accessibility lens remains the standing caveat for greens; protanopia and deuteranopia shift it to a dark indigo (#302761), a long way from green, while tritanopia keeps it teal-leaning (#0A6567). Even at this readable stop, do not let green carry a status message on its own.

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

More Emerald in Tailwind

Nearest hues across families

Browse all colors

@theme {
  --color-primary-50: #e9faf2;
  --color-primary-100: #c1dfd1;
  --color-primary-200: #97c5b0;
  --color-primary-300: #6bac91;
  --color-primary-400: #409273;
  --color-primary-500: #047857;
  --color-primary-600: #006143;
  --color-primary-700: #004a31;
  --color-primary-800: #003420;
  --color-primary-900: #001f11;
  --color-primary-950: #000c04;

  --color-secondary-50: #e8f8fe;
  --color-secondary-100: #c4e0ea;
  --color-secondary-200: #9cc9d8;
  --color-secondary-300: #73b1c6;
  --color-secondary-400: #4c9ab2;
  --color-secondary-500: #21829c;
  --color-secondary-600: #006880;
  --color-secondary-700: #004e63;
  --color-secondary-800: #003646;
  --color-secondary-900: #001f2a;
  --color-secondary-950: #000a11;

  --color-accent-50: #e7fce8;
  --color-accent-100: #c5e9c6;
  --color-accent-200: #9ed7a1;
  --color-accent-300: #75c47c;
  --color-accent-400: #4eb15b;
  --color-accent-500: #219c3b;
  --color-accent-600: #007d21;
  --color-accent-700: #005f0b;
  --color-accent-800: #004100;
  --color-accent-900: #002600;
  --color-accent-950: #000d00;

  --color-neutral-50: #f7f8f8;
  --color-neutral-100: #eff1f0;
  --color-neutral-200: #dfe2e1;
  --color-neutral-300: #c4cac8;
  --color-neutral-400: #9ea9a6;
  --color-neutral-500: #788783;
  --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: #788783;
  --color-border: #DFE2E1;
}

How do you export Tailwind Emerald 700 as design tokens?

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

Accessibility lens

How does Tailwind Emerald 700 go from primitive to component?

How does Tailwind Emerald 700 scale from 50 to 950?

How does Tailwind Emerald 700 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Emerald 700?

Analogous

Complementary

Triadic

Where should you use Tailwind Emerald 700 in production UI?

Notes on Tailwind Emerald 700

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

More Emerald in Tailwind

Tailwind Emerald 400 in OKLCH

Tailwind Emerald 500 in OKLCH

Tailwind Emerald 600 in OKLCH

Nearest hues across families

shadcn Green in OKLCH

Tailwind Slate 600 in OKLCH

Tailwind Slate 700 in OKLCH

Tailwind Slate 500 in OKLCH

How do you export Tailwind Emerald 700 as design tokens?

Frequently asked questions

Ready to build your color system?