Tailwind Green

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

  1. green-50 #f0fdf4 · rgb(240, 253, 244) Black 20.1:1 AAA · White 1.0:1 Fail
  2. green-100 #dcfce7 · rgb(220, 252, 231) Black 19.1:1 AAA · White 1.1:1 Fail
  3. green-200 #bbf7d0 · rgb(187, 247, 208) Black 17.3:1 AAA · White 1.2:1 Fail
  4. green-300 #86efac · rgb(134, 239, 172) Black 15.0:1 AAA · White 1.4:1 Fail
  5. green-400 #4ade80 · rgb(74, 222, 128) Black 12.1:1 AAA · White 1.7:1 Fail
  6. green-500 #22c55e · rgb(34, 197, 94) Black 9.2:1 AAA · White 2.3:1 Fail
  7. green-600 #16a34a · rgb(22, 163, 74) Black 6.4:1 AA · White 3.3:1 Fail
  8. green-700 #15803d · rgb(21, 128, 61) Black 4.2:1 Fail · White 5.0:1 AA
  9. green-800 #166534 · rgb(22, 101, 52) Black 2.9:1 Fail · White 7.1:1 AAA
  10. green-900 #14532d · rgb(20, 83, 45) Black 2.3:1 Fail · White 9.1:1 AAA
  11. green-950 #052e16 · rgb(5, 46, 22) Black 1.4:1 Fail · White 14.9:1 AAA

Copy into CSS

The official green steps as Tailwind theme variables.

@theme {
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
}