Tailwind CSS 4.3.3
Tailwind olive 11 shades, 50 to 950
Every current olive shade, preserved in its native OKLCH color space. This family is available in Tailwind v4.2 and later; it is not part of the v3 palette.
- Shades
- 11
- Version
- 4.3.3
Tailwind CSS 4.3.3
olive: current colors
11 shades with exact official OKLCH values. Use bg-olive-500, text-olive-500 or border-olive-500 in Tailwind. Wide-gamut colors are preserved; these are not the v3 hex values.
| Color | Exact OKLCH | CSS variable |
|---|---|---|
| olive-50 | oklch(98.8% 0.003 106.5) | --color-olive-50 |
| olive-100 | oklch(96.6% 0.005 106.5) | --color-olive-100 |
| olive-200 | oklch(93% 0.007 106.5) | --color-olive-200 |
| olive-300 | oklch(88% 0.011 106.6) | --color-olive-300 |
| olive-400 | oklch(73.7% 0.021 106.9) | --color-olive-400 |
| olive-500 | oklch(58% 0.031 107.3) | --color-olive-500 |
| olive-600 | oklch(46.6% 0.025 107.3) | --color-olive-600 |
| olive-700 | oklch(39.4% 0.023 107.4) | --color-olive-700 |
| olive-800 | oklch(28.6% 0.016 107.4) | --color-olive-800 |
| olive-900 | oklch(22.8% 0.013 107.4) | --color-olive-900 |
| olive-950 | oklch(15.3% 0.006 107.1) | --color-olive-950 |
Source: Tailwind CSS 4.3.3 theme.css (MIT). Values are pinned to this release. For Tailwind v3 projects, configure these colors explicitly; they are not built in.