Tailwind Lime

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

  1. lime-50 #f7fee7 · rgb(247, 254, 231) Black 20.3:1 AAA · White 1.0:1 Fail
  2. lime-100 #ecfccb · rgb(236, 252, 203) Black 19.4:1 AAA · White 1.1:1 Fail
  3. lime-200 #d9f99d · rgb(217, 249, 157) Black 18.0:1 AAA · White 1.2:1 Fail
  4. lime-300 #bef264 · rgb(190, 242, 100) Black 16.1:1 AAA · White 1.3:1 Fail
  5. lime-400 #a3e635 · rgb(163, 230, 53) Black 13.9:1 AAA · White 1.5:1 Fail
  6. lime-500 #84cc16 · rgb(132, 204, 22) Black 10.6:1 AAA · White 2.0:1 Fail
  7. lime-600 #65a30d · rgb(101, 163, 13) Black 6.8:1 AA · White 3.1:1 Fail
  8. lime-700 #4d7c0f · rgb(77, 124, 15) Black 4.2:1 Fail · White 5.0:1 AA
  9. lime-800 #3f6212 · rgb(63, 98, 18) Black 3.0:1 Fail · White 7.1:1 AAA
  10. lime-900 #365314 · rgb(54, 83, 20) Black 2.4:1 Fail · White 8.7:1 AAA
  11. lime-950 #1a2e05 · rgb(26, 46, 5) Black 1.4:1 Fail · White 14.6:1 AAA

Copy into CSS

The official lime steps as Tailwind theme variables.

@theme {
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
}