# Black, green, olive and gray angular swatches

Black, green, olive and gray angular swatches with 21 colors: #212e20, #253724, #2c4428, #35532d, #406131, #4d6c35, #5c763b, #6b8041, #7a8947, #88914d, #959952, #a1a059, #aaa660, #afab67, #b3ae6f, #b3b176, #b0b37d, #a7b686, #9cb68f, #93b598, #8eb49e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYSBZmuZ4_Eyhvfaob5X5rAl2TRY`
- Page: https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY?style=angularSwatches&steps=21&angle=0
- Drawn as: angular swatches, 21 steps, 0 degrees
- Kinds: dark to light
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.5 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#212e20` | `oklch(28.35% 0.0303 144.14)` | Quartzite | white, 14.2 to 1 |
| 2 | `#253724` | `oklch(31.43% 0.0407 143.03)` | Black Leather Jacket | white, 12.7 to 1 |
| 3 | `#2c4428` | `oklch(35.88% 0.0559 141.50)` | Forestry | white, 10.6 to 1 |
| 4 | `#35532d` | `oklch(40.78% 0.0714 139.43)` | Kaitoke Green | white, 8.6 to 1 |
| 5 | `#406131` | `oklch(45.28% 0.0827 136.74)` | Greenhouse | white, 7.1 to 1 |
| 6 | `#4d6c35` | `oklch(49.25% 0.0883 133.11)` | Gully Green | white, 5.9 to 1 |
| 7 | `#5c763b` | `oklch(53.12% 0.0908 128.69)` | Majestic Jungle | white, 5 to 1 |
| 8 | `#6b8041` | `oklch(56.82% 0.0916 124.06)` | Moss Landing | black, 4.7 to 1 |
| 9 | `#7a8947` | `oklch(60.24% 0.0923 119.84)` | Green Suede | black, 5.4 to 1 |
| 10 | `#88914d` | `oklch(63.44% 0.0935 115.73)` | Vintage Vibe | black, 6.2 to 1 |
| 11 | `#959952` | `oklch(66.44% 0.0941 111.58)` | Salvia Divinorum | black, 6.9 to 1 |
| 12 | `#a1a059` | `oklch(69.09% 0.0939 108.12)` | Garden of Earthly Delights | black, 7.7 to 1 |
| 13 | `#aaa660` | `oklch(71.26% 0.0923 106.10)` | Wholemeal Cookie | black, 8.3 to 1 |
| 14 | `#afab67` | `oklch(72.87% 0.0889 105.09)` | Organic Garden | black, 8.8 to 1 |
| 15 | `#b3ae6f` | `oklch(74.02% 0.0840 104.91)` | Jalapeño Jelly | black, 9.2 to 1 |
| 16 | `#b3b176` | `oklch(74.77% 0.0784 106.64)` | Weeping Willow | black, 9.4 to 1 |
| 17 | `#b0b37d` | `oklch(75.20% 0.0730 111.38)` | Weeping Willow | black, 9.6 to 1 |
| 18 | `#a7b686` | `oklch(75.15% 0.0675 121.41)` | Great Green | black, 9.6 to 1 |
| 19 | `#9cb68f` | `oklch(74.66% 0.0615 135.49)` | Brookview | black, 9.5 to 1 |
| 20 | `#93b598` | `oklch(74.03% 0.0561 149.40)` | Liebermann Green | black, 9.3 to 1 |
| 21 | `#8eb49e` | `oklch(73.62% 0.0524 158.94)` | Garden District | black, 9.1 to 1 |

## CSS

```css
background: conic-gradient(from 0deg, #212e20 0.000% 4.762%, #253724 4.762% 9.524%, #2c4428 9.524% 14.286%, #35532d 14.286% 19.048%, #406131 19.048% 23.810%, #4d6c35 23.810% 28.571%, #5c763b 28.571% 33.333%, #6b8041 33.333% 38.095%, #7a8947 38.095% 42.857%, #88914d 42.857% 47.619%, #959952 47.619% 52.381%, #a1a059 52.381% 57.143%, #aaa660 57.143% 61.905%, #afab67 61.905% 66.667%, #b3ae6f 66.667% 71.429%, #b3b176 71.429% 76.190%, #b0b37d 76.190% 80.952%, #a7b686 80.952% 85.714%, #9cb68f 85.714% 90.476%, #93b598 90.476% 95.238%, #8eb49e 95.238% 100.000%);
background: conic-gradient(from 0deg, oklch(28.35% 0.0303 144.14) 0.000% 4.762%, oklch(31.43% 0.0407 143.03) 4.762% 9.524%, oklch(35.88% 0.0559 141.50) 9.524% 14.286%, oklch(40.78% 0.0714 139.43) 14.286% 19.048%, oklch(45.28% 0.0827 136.74) 19.048% 23.810%, oklch(49.25% 0.0883 133.11) 23.810% 28.571%, oklch(53.12% 0.0908 128.69) 28.571% 33.333%, oklch(56.82% 0.0916 124.06) 33.333% 38.095%, oklch(60.24% 0.0923 119.84) 38.095% 42.857%, oklch(63.44% 0.0935 115.73) 42.857% 47.619%, oklch(66.44% 0.0941 111.58) 47.619% 52.381%, oklch(69.09% 0.0939 108.12) 52.381% 57.143%, oklch(71.26% 0.0923 106.10) 57.143% 61.905%, oklch(72.87% 0.0889 105.09) 61.905% 66.667%, oklch(74.02% 0.0840 104.91) 66.667% 71.429%, oklch(74.77% 0.0784 106.64) 71.429% 76.190%, oklch(75.20% 0.0730 111.38) 76.190% 80.952%, oklch(75.15% 0.0675 121.41) 80.952% 85.714%, oklch(74.66% 0.0615 135.49) 85.714% 90.476%, oklch(74.03% 0.0561 149.40) 90.476% 95.238%, oklch(73.62% 0.0524 158.94) 95.238% 100.000%);
```

## Keyframes

6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.03 | 144.1 |
| 2 | 0.453 | 0.083 | 136.7 |
| 3 | 0.602 | 0.092 | 119.8 |
| 4 | 0.713 | 0.092 | 106.1 |
| 5 | 0.752 | 0.073 | 111.4 |
| 6 | 0.736 | 0.052 | 158.9 |

## In these collections

- [Green gradients](https://grabient.com/green-gradients)

## Other forms

- [JSON](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.json?style=angularSwatches&steps=21&angle=0)
- [PNG](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.png?style=angularSwatches&steps=21&angle=0)
- [SVG](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.svg?style=angularSwatches&steps=21&angle=0)
- [CSS](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.css?style=angularSwatches&steps=21&angle=0)
- [ASE](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.ase?style=angularSwatches&steps=21&angle=0)
- [GPL](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.gpl?style=angularSwatches&steps=21&angle=0)
- [GRD](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.grd?style=angularSwatches&steps=21&angle=0)
- [Design tokens](https://grabient.com/kYSBZmuZ4_Eyhvfaob5X5rAl2TRY.tokens.json?style=angularSwatches&steps=21&angle=0)
- [Social card](https://grabient.com/api/og?seed=kYSBZmuZ4_Eyhvfaob5X5rAl2TRY&style=angularSwatches&steps=21&angle=0)
- [Palettes like this one](https://grabient.com/palettes?q=kYSBZmuZ4_Eyhvfaob5X5rAl2TRY)
- [Guide for agents](https://grabient.com/llms.txt)