Eleven shades, from lime-50 to lime-950
Tailwind lime colors
Tailwind CSS 4.3.3 defines eleven lime shades in OKLCH, from lime-50 (#f7fee7) to lime-950 (#192e03). On them white text passes WCAG AA from lime-700 to lime-950, and black text from lime-50 to lime-600. Recolor (recolor.page) shows the scale on a real page.
Last updated
- 50#f7fee7
- 100#ecfcca
- 200#d8f999
- 300#bbf451
- 400#9ae600
- 500#7ccf00
- 600#5ea500
- 700#497d00
- 800#3d6300
- 900#35530e
- 950#192e03
| Shade | OKLCH | Hex | White text | Black text |
|---|---|---|---|---|
| lime-50 | oklch(98.6% 0.031 120.757) | #f7fee7 | 1.04:1 fails | 20.29:1 passes |
| lime-100 | oklch(96.7% 0.067 122.328) | #ecfcca | 1.09:1 fails | 19.34:1 passes |
| lime-200 | oklch(93.8% 0.127 124.321) | #d8f999 | 1.17:1 fails | 17.93:1 passes |
| lime-300 | oklch(89.7% 0.196 126.665) | #bbf451 | 1.30:1 fails | 16.17:1 passes |
| lime-400 | oklch(84.1% 0.238 128.85) | #9ae600 | 1.53:1 fails | 13.69:1 passes |
| lime-500 | oklch(76.8% 0.233 130.85) | #7ccf00 | 1.95:1 fails | 10.78:1 passes |
| lime-600 | oklch(64.8% 0.2 131.684) | #5ea500 | 3.06:1 fails | 6.86:1 passes |
| lime-700 | oklch(53.2% 0.157 131.589) | #497d00 | 4.98:1 passes | 4.22:1 fails |
| lime-800 | oklch(45.3% 0.124 130.933) | #3d6300 | 7.04:1 passes | 2.98:1 fails |
| lime-900 | oklch(40.5% 0.101 131.063) | #35530e | 8.77:1 passes | 2.40:1 fails |
| lime-950 | oklch(27.4% 0.072 132.109) | #192e03 | 14.65:1 passes | 1.43:1 fails |
Text on lime, and lime as text
As a text color the rule turns around: lime text on a white page passes AA from lime-700 on, and on a black page up to lime-600, since a contrast ratio is the same whichever color is in front.
Chroma peaks at lime-400 (0.238) and falls toward both ends, while the hue drifts 11.4 degrees across the scale.
5 of the eleven lie outside sRGB, so their hex codes are the nearest sRGB colors, and a wide-gamut screen shows them stronger.
Sources
- Tailwind CSS: Colors tailwindcss.com
- WCAG 2.2: Contrast (Minimum) w3.org