Tailwind Olive
The Tailwind Olive shades with hex codes and contrast against white and black.
| Token | HEX | Contrast on white / black |
|---|---|---|
| olive-50 | #fbfbf9 |
1.03:1 / 20.26:1 |
| olive-100 | #f4f4f0 |
1.10:1 / 19.04:1 |
| olive-200 | #e8e8e3 |
1.22:1 / 17.08:1 |
| olive-300 | #d8d8d0 |
1.43:1 / 14.65:1 |
| olive-400 | #abab9c |
2.32:1 / 9.03:1 |
| olive-500 | #7c7c67 |
4.25:1 / 4.93:1 |
| olive-600 | #5b5b4b |
6.90:1 / 3.04:1 |
| olive-700 | #474739 |
9.42:1 / 2.22:1 |
| olive-800 | #2b2b22 |
14.27:1 / 1.47:1 |
| olive-900 | #1d1d16 |
16.94:1 / 1.23:1 |
| olive-950 | #0c0c09 |
19.58:1 / 1.07:1 |
CSS variables
:root {
--color-olive-50: #fbfbf9;
--color-olive-100: #f4f4f0;
--color-olive-200: #e8e8e3;
--color-olive-300: #d8d8d0;
--color-olive-400: #abab9c;
--color-olive-500: #7c7c67;
--color-olive-600: #5b5b4b;
--color-olive-700: #474739;
--color-olive-800: #2b2b22;
--color-olive-900: #1d1d16;
--color-olive-950: #0c0c09;
}
Open as palette Shades and tints