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).
Specs
Highest contrast: black
Accessibility lens
How does Tailwind Emerald 400 scale from 50 to 950?
- 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.
Where should you use Tailwind Emerald 400 in production UI?
What other Tailwind and shadcn colors look like Tailwind Emerald 400?
Tailwind Blue 600 in OKLCH
oklch(0.546 0.215 262.90)
Tailwind Slate 500 in OKLCH
oklch(0.554 0.041 257.40)
Tailwind Violet 600 in OKLCH
oklch(0.541 0.247 293.00)
Tailwind Rose 500 in OKLCH
oklch(0.645 0.215 16.40)
shadcn Primary Blue in OKLCH
oklch(0.623 0.188 259.80)
shadcn Zinc Dark in OKLCH
oklch(0.274 0.005 286.00)
shadcn Slate Accessible in OKLCH
oklch(0.279 0.037 260.00)
shadcn Indigo Custom in OKLCH
oklch(0.585 0.204 277.10)
shadcn Orange in OKLCH
oklch(0.705 0.187 47.60)
@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.