paletta

Tailwind CSS token

Tailwind Emerald 600 in OKLCH

Quick answer: Tailwind Emerald 600 is #059669, which converts to oklch(0.596 0.127 163.20). On white, it has a WCAG contrast ratio of 3.76:1 and an APCA score of Lc +64.63.

This meets the WCAG 2.2 AA Large text threshold (3: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.596 0.127 163.20)

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

  • Specs

    oklch(0.596 0.127 163.20)
    #059669

    Highest contrast: black

    5.57:1
    Normal AAmeets WCAG 2.2
    Normal AAAdoes not meet WCAG 2.2
    Large AAmeets WCAG 2.2
    Large AAAmeets WCAG 2.2
    Lc -37.04
    Try in Studio

  • Accessibility lens

    • Base#059669
    • 300#70C09B
    • 500#059669
    • 700#005B39

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

How does Tailwind Emerald 600 go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#059669
oklch
oklch(0.596 0.127 163.20)

Semantic

Bound to a role token that UI reads by name.

--primary: #059669

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

On-color text: black (5.57:1 on #059669).

How does Tailwind Emerald 600 scale from 50 to 950?

Tailwind Emerald 600
50 to 950
#E7FBF0
#C3E6D4
#9BD3B7
#70C09B
#45AB81
#059669
#007950
#005B39
#003F24
#002511
#000D03
  • 50oklch(0.970 0.025 161.95)
  • 100oklch(0.895 0.044 163.07)
  • 200oklch(0.820 0.070 162.65)
  • 300oklch(0.746 0.096 162.85)
  • 400oklch(0.670 0.114 163.19)
  • 500oklch(0.596 0.127 163.23)
  • 600oklch(0.509 0.113 161.05)
  • 700oklch(0.416 0.095 159.57)
  • 800oklch(0.324 0.076 157.74)
  • 900oklch(0.232 0.057 155.20)
  • 950oklch(0.139 0.037 151.65)

How does Tailwind Emerald 600 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.56Below AA
Aa2.63Below AA
Aa5.05AA
Aa11.20AAA
Aa18.37AAA
Aa1.56Below AA
Aa1.00Below AA
Aa1.67Below AA
Aa3.21Below AA
Aa7.13AAA
Aa11.70AAA
Aa2.63Below AA
Aa1.67Below AA
Aa1.00Below AA
Aa1.92Below AA
Aa4.25Below AA
Aa6.98AA
Aa5.05AA
Aa3.21Below AA
Aa1.92Below AA
Aa1.00Below AA
Aa2.21Below AA
Aa3.63Below AA
Aa11.20AAA
Aa7.13AAA
Aa4.25Below AA
Aa2.21Below AA
Aa1.00Below AA
Aa1.63Below AA
Aa18.37AAA
Aa11.70AAA
Aa6.98AA
Aa3.63Below AA
Aa1.63Below AA
Aa1.00Below AA

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

  • Aa3.76Below AA

    White #FFFFFF

  • Aa3.45Below AA

    Neutral 100 #F5F5F5

  • Aa2.99Below AA

    Neutral 200 #E5E5E5

  • Aa1.49Below AA

    Neutral 400 #A3A3A3

  • Aa2.07Below AA

    Neutral 600 #525252

  • Aa4.75AA

    Neutral 900 #171717

  • Aa5.57AA

    Black #000000

What palettes pair with Tailwind Emerald 600?

  • Analogous

    • #1A9605
    • #05962D
    • #059669
    • #058796
    • #054A96

  • Complementary

    • #07E09D
    • #059669

  • Triadic

    • #059669
    • #023D2B
    • #690596

Where should you use Tailwind Emerald 600 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 / black
$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 · 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
#059669
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600 / whitebutton-secondary: primary-50 / primary-700
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notes on Tailwind Emerald 600

Emerald 600 pulls the green darker and slightly cooler, oklch(0.596 0.127 163.2), which is where Tailwind greens start to become usable on light surfaces. As text on white it reaches AA Large (3.76:1), enough for headings and chunky labels but not paragraphs; on a near-black surface it improves to WCAG 2.2 AA (5.57:1, APCA Lc -37.04) for normal text. That makes it a decent two-mode accent if you respect the size limits. The complementary #07E09D is a bright mint for highlights, and the triad grounds on a forest #023D2B and a purple #690596. Keep neutrals cool so the green stays clean. The accessibility lens still needs attention; protanopia and deuteranopia turn it toward a desaturated purple (#3B3177), a large shift away from green, and tritanopia reads it as teal (#0C7C7E). As with every green here, back status meaning with an icon or text, not the hue.

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

Tailwind v4 @theme block

@theme {
  --color-primary-50: #e7fbf0;
  --color-primary-100: #c3e6d4;
  --color-primary-200: #9bd3b7;
  --color-primary-300: #70c09b;
  --color-primary-400: #45ab81;
  --color-primary-500: #059669;
  --color-primary-600: #007950;
  --color-primary-700: #005b39;
  --color-primary-800: #003f24;
  --color-primary-900: #002511;
  --color-primary-950: #000d03;

  --color-secondary-50: #eaf8fc;
  --color-secondary-100: #c2dbe2;
  --color-secondary-200: #99bfca;
  --color-secondary-300: #6fa4b3;
  --color-secondary-400: #46889a;
  --color-secondary-500: #1b6d80;
  --color-secondary-600: #005869;
  --color-secondary-700: #004352;
  --color-secondary-800: #002e3a;
  --color-secondary-900: #001b24;
  --color-secondary-950: #000a0f;

  --color-accent-50: #e9fbe9;
  --color-accent-100: #c3e2c4;
  --color-accent-200: #9aca9c;
  --color-accent-300: #70b274;
  --color-accent-400: #489950;
  --color-accent-500: #1b802e;
  --color-accent-600: #006719;
  --color-accent-700: #004f08;
  --color-accent-800: #003701;
  --color-accent-900: #002100;
  --color-accent-950: #000c00;

  --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 600 as design tokens?

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

FAQ

Frequently asked questions

Tailwind Emerald 600 (#059669) is oklch(0.596 0.127 163.2) in the OKLCH color space.

Tailwind Emerald 600 passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.76:1 on white, 5.57:1 on black.

On white, Tailwind Emerald 600 has an APCA Lc of 64.6. On black, Lc is -37. 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 600 simulates to #3b3177. Under protanopia it shifts to #444574. Under tritanopia it appears as #0c7c7e. Always pair color with shape, label, or icon for accessibility.

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