Tailwind Emerald

Eleven steps from emerald-50 to emerald-950. emerald-500 is #10b981. Open any hex in the explorer to see its OKLCH, a generated scale, and how it looks in color-vision simulations.

  1. emerald-50 #ecfdf5 · rgb(236, 253, 245) Black 19.9:1 AAA · White 1.1:1 Fail
  2. emerald-100 #d1fae5 · rgb(209, 250, 229) Black 18.5:1 AAA · White 1.1:1 Fail
  3. emerald-200 #a7f3d0 · rgb(167, 243, 208) Black 16.4:1 AAA · White 1.3:1 Fail
  4. emerald-300 #6ee7b7 · rgb(110, 231, 183) Black 13.8:1 AAA · White 1.5:1 Fail
  5. emerald-400 #34d399 · rgb(52, 211, 153) Black 10.9:1 AAA · White 1.9:1 Fail
  6. emerald-500 #10b981 · rgb(16, 185, 129) Black 8.3:1 AAA · White 2.5:1 Fail
  7. emerald-600 #059669 · rgb(5, 150, 105) Black 5.6:1 AA · White 3.8:1 Fail
  8. emerald-700 #047857 · rgb(4, 120, 87) Black 3.8:1 Fail · White 5.5:1 AA
  9. emerald-800 #065f46 · rgb(6, 95, 70) Black 2.7:1 Fail · White 7.7:1 AAA
  10. emerald-900 #064e3b · rgb(6, 78, 59) Black 2.2:1 Fail · White 9.7:1 AAA
  11. emerald-950 #022c22 · rgb(2, 44, 34) Black 1.4:1 Fail · White 15.2:1 AAA

Copy into CSS

The official emerald steps as Tailwind theme variables.

@theme {
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
}