Tailwind lime color palette
lime-50 to lime-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. lime-500 is #7CCF00 in v4 and #84CC16 in v3.
Every lime shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| lime-50 | bg-lime-50 | oklch(98.6% 0.031 120.757) | #F7FEE7 | #F7FEE7 | Off White #FFFFE4 |
| lime-100 | bg-lime-100 | oklch(96.7% 0.067 122.328) | #ECFCCA | #ECFCCB | Light Goldenrod Yellow #FAFAD2 |
| lime-200 | bg-lime-200 | oklch(93.8% 0.127 124.321) | #D8F999 | #D9F99D | Light Light Green #C8FFB0 |
| lime-300 | bg-lime-300 | oklch(89.7% 0.196 126.665) | #BBF451 | #BEF264 | Yellowy Green #BFF128 |
| lime-400 | bg-lime-400 | oklch(84.1% 0.238 128.85) | #9AE600 | #A3E635 | Kiwi Green #8EE53F |
| lime-500 | bg-lime-500 | oklch(76.8% 0.233 130.85) | #7CCF00 | #84CC16 | Apple Green #76CD26 |
| lime-600 | bg-lime-600 | oklch(64.8% 0.2 131.684) | #5EA500 | #65A30D | Leaf Green #5CA904 |
| lime-700 | bg-lime-700 | oklch(53.2% 0.157 131.589) | #497D00 | #4D7C0F | Dark Grass Green #388004 |
| lime-800 | bg-lime-800 | oklch(45.3% 0.124 130.933) | #3C6300 | #3F6212 | Camouflage Green #4B6113 |
| lime-900 | bg-lime-900 | oklch(40.5% 0.101 131.063) | #35530E | #365314 | Navy Green #35530A |
| lime-950 | bg-lime-950 | oklch(27.4% 0.072 132.109) | #192E03 | #1A2E05 | Very Dark Green #062E03 |
lime contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, lime shades 700, 800, 900, 950 pass; on black, lime shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| lime-50 | #F7FEE7 | 1.03:1 Fail | 20.28:1 AA |
| lime-100 | #ECFCCA | 1.08:1 Fail | 19.34:1 AA |
| lime-200 | #D8F999 | 1.17:1 Fail | 17.93:1 AA |
| lime-300 | #BBF451 | 1.29:1 Fail | 16.17:1 AA |
| lime-400 | #9AE600 | 1.53:1 Fail | 13.69:1 AA |
| lime-500 | #7CCF00 | 1.94:1 Fail | 10.78:1 AA |
| lime-600 | #5EA500 | 3.06:1 AA large | 6.85:1 AA |
| lime-700 | #497D00 | 4.98:1 AA | 4.21:1 AA large |
| lime-800 | #3C6300 | 7.05:1 AA | 2.97:1 Fail |
| lime-900 | #35530E | 8.76:1 AA | 2.39:1 Fail |
| lime-950 | #192E03 | 14.64:1 AA | 1.43:1 Fail |
Use lime in your project
Utility class: bg-lime-500. CSS variable: var(--color-lime-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-lime-50: oklch(98.6% 0.031 120.757);
--color-lime-100: oklch(96.7% 0.067 122.328);
--color-lime-200: oklch(93.8% 0.127 124.321);
--color-lime-300: oklch(89.7% 0.196 126.665);
--color-lime-400: oklch(84.1% 0.238 128.85);
--color-lime-500: oklch(76.8% 0.233 130.85);
--color-lime-600: oklch(64.8% 0.2 131.684);
--color-lime-700: oklch(53.2% 0.157 131.589);
--color-lime-800: oklch(45.3% 0.124 130.933);
--color-lime-900: oklch(40.5% 0.101 131.063);
--color-lime-950: oklch(27.4% 0.072 132.109);
}
More Tailwind colors
Previous: yellow | Next: green
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #7CCF00 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.