# Vivid green, olive and brown angular gradient

Vivid green, olive and brown angular gradient with 32 colors: #799700, #7c9700, #7f9900, #829a00, #869c00, #8b9e00, #8f9f00, #93a100, #98a200, #9ca300, #9fa300, #a2a200, #a5a100, #a89f00, #ab9e00, #ad9c00, #af9900, #b09700, #b29400, #b39200, #b38f00, #b38d01, #b38a02, #b28703, #b08303, #af8003, #ad7d03, #ab7a02, #a97702, #a87402, #a67202, #a57002. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUoHBXV7c-lQxPXKrL5A`
- Page: https://grabient.com/kUoHBXV7c-lQxPXKrL5A?style=angularGradient&steps=32&angle=210
- Drawn as: angular gradient, 32 steps, 210 degrees
- Kinds: even lightness, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.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 | `#799700` | `oklch(62.99% 0.1534 122.35)` | Mossy Woods | black, 6.2 to 1 |
| 2 | `#7c9700` | `oklch(63.37% 0.1532 121.72)` | Mossy Woods | black, 6.3 to 1 |
| 3 | `#7f9900` | `oklch(63.90% 0.1533 120.97)` | Mossy Woods | black, 6.4 to 1 |
| 4 | `#829a00` | `oklch(64.53% 0.1534 120.11)` | BioShock | black, 6.5 to 1 |
| 5 | `#869c00` | `oklch(65.25% 0.1535 119.13)` | BioShock | black, 6.7 to 1 |
| 6 | `#8b9e00` | `oklch(65.99% 0.1537 118.05)` | Noxious | black, 6.9 to 1 |
| 7 | `#8f9f00` | `oklch(66.73% 0.1537 116.86)` | Noxious | black, 7.1 to 1 |
| 8 | `#93a100` | `oklch(67.43% 0.1535 115.58)` | Noxious | black, 7.3 to 1 |
| 9 | `#98a200` | `oklch(68.03% 0.1532 114.22)` | Forest Lichen | black, 7.4 to 1 |
| 10 | `#9ca300` | `oklch(68.52% 0.1525 112.77)` | Fistfull of Green | black, 7.6 to 1 |
| 11 | `#9fa300` | `oklch(68.84% 0.1515 111.24)` | Fistfull of Green | black, 7.6 to 1 |
| 12 | `#a2a200` | `oklch(68.97% 0.1502 109.61)` | Fistfull of Green | black, 7.7 to 1 |
| 13 | `#a5a100` | `oklch(69.00% 0.1486 107.77)` | Countryside | black, 7.6 to 1 |
| 14 | `#a89f00` | `oklch(68.92% 0.1468 105.76)` | Countryside | black, 7.6 to 1 |
| 15 | `#ab9e00` | `oklch(68.75% 0.1449 103.62)` | Nuclear Fallout | black, 7.5 to 1 |
| 16 | `#ad9c00` | `oklch(68.51% 0.1431 101.40)` | Nuclear Fallout | black, 7.4 to 1 |
| 17 | `#af9900` | `oklch(68.19% 0.1414 99.15)` | Sunken Gold | black, 7.3 to 1 |
| 18 | `#b09700` | `oklch(67.82% 0.1398 96.92)` | Sunken Gold | black, 7.2 to 1 |
| 19 | `#b29400` | `oklch(67.40% 0.1383 94.74)` | Faint Gold | black, 7.1 to 1 |
| 20 | `#b39200` | `oklch(66.95% 0.1370 92.67)` | Faint Gold | black, 6.9 to 1 |
| 21 | `#b38f00` | `oklch(66.47% 0.1359 90.75)` | Cobra Leather | black, 6.8 to 1 |
| 22 | `#b38d01` | `oklch(65.97% 0.1346 89.02)` | Cobra Leather | black, 6.7 to 1 |
| 23 | `#b38a02` | `oklch(65.35% 0.1331 87.35)` | Loden Yellow | black, 6.5 to 1 |
| 24 | `#b28703` | `oklch(64.62% 0.1317 85.71)` | Arrowwood | black, 6.3 to 1 |
| 25 | `#b08303` | `oklch(63.81% 0.1303 84.12)` | Chestnut Gold | black, 6.1 to 1 |
| 26 | `#af8003` | `oklch(62.96% 0.1289 82.60)` | Murder Mustard | black, 5.9 to 1 |
| 27 | `#ad7d03` | `oklch(62.08% 0.1276 81.16)` | Murder Mustard | black, 5.7 to 1 |
| 28 | `#ab7a02` | `oklch(61.23% 0.1263 79.83)` | Brown Butter | black, 5.5 to 1 |
| 29 | `#a97702` | `oklch(60.43% 0.1252 78.61)` | Falafel | black, 5.3 to 1 |
| 30 | `#a87402` | `oklch(59.71% 0.1242 77.53)` | Cookie Dough | black, 5.1 to 1 |
| 31 | `#a67202` | `oklch(59.11% 0.1233 76.60)` | Golden Hind | black, 5 to 1 |
| 32 | `#a57002` | `oklch(58.66% 0.1226 75.85)` | Golden Hind | black, 4.9 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #799700 0.0%, #7c9700 3.2%, #7f9900 6.5%, #829a00 9.7%, #869c00 12.9%, #8b9e00 16.1%, #8f9f00 19.4%, #93a100 22.6%, #98a200 25.8%, #9ca300 29.0%, #9fa300 32.3%, #a2a200 35.5%, #a5a100 38.7%, #a89f00 41.9%, #ab9e00 45.2%, #ad9c00 48.4%, #af9900 51.6%, #b09700 54.8%, #b29400 58.1%, #b39200 61.3%, #b38f00 64.5%, #b38d01 67.7%, #b38a02 71.0%, #b28703 74.2%, #b08303 77.4%, #af8003 80.6%, #ad7d03 83.9%, #ab7a02 87.1%, #a97702 90.3%, #a87402 93.5%, #a67202 96.8%, #a57002 100.0%);
background: conic-gradient(from 210deg in oklch, oklch(62.99% 0.1534 122.35) 0.0%, oklch(63.37% 0.1532 121.72) 3.2%, oklch(63.90% 0.1533 120.97) 6.5%, oklch(64.53% 0.1534 120.11) 9.7%, oklch(65.25% 0.1535 119.13) 12.9%, oklch(65.99% 0.1537 118.05) 16.1%, oklch(66.73% 0.1537 116.86) 19.4%, oklch(67.43% 0.1535 115.58) 22.6%, oklch(68.03% 0.1532 114.22) 25.8%, oklch(68.52% 0.1525 112.77) 29.0%, oklch(68.84% 0.1515 111.24) 32.3%, oklch(68.97% 0.1502 109.61) 35.5%, oklch(69.00% 0.1486 107.77) 38.7%, oklch(68.92% 0.1468 105.76) 41.9%, oklch(68.75% 0.1449 103.62) 45.2%, oklch(68.51% 0.1431 101.40) 48.4%, oklch(68.19% 0.1414 99.15) 51.6%, oklch(67.82% 0.1398 96.92) 54.8%, oklch(67.40% 0.1383 94.74) 58.1%, oklch(66.95% 0.1370 92.67) 61.3%, oklch(66.47% 0.1359 90.75) 64.5%, oklch(65.97% 0.1346 89.02) 67.7%, oklch(65.35% 0.1331 87.35) 71.0%, oklch(64.62% 0.1317 85.71) 74.2%, oklch(63.81% 0.1303 84.12) 77.4%, oklch(62.96% 0.1289 82.60) 80.6%, oklch(62.08% 0.1276 81.16) 83.9%, oklch(61.23% 0.1263 79.83) 87.1%, oklch(60.43% 0.1252 78.61) 90.3%, oklch(59.71% 0.1242 77.53) 93.5%, oklch(59.11% 0.1233 76.60) 96.8%, oklch(58.66% 0.1226 75.85) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.63 | 0.154 | 122.3 |
| 2 | 0.689 | 0.152 | 110.7 |
| 3 | 0.661 | 0.135 | 89.6 |
| 4 | 0.587 | 0.123 | 75.8 |

## In these collections

- [Olive color palette](https://grabient.com/olive-color-palette)
- [Yellow gradients](https://grabient.com/yellow-gradients)

## Other forms

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