# Olive yellow palette

The Olive yellow palette brings together green and gold. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its lightest and darkest tones both fall within the gold color family.

- Also called: Vivid green, olive and brown angular gradient
- Seed: `kUoHBXV7c-lQxPXKrL5A`
- Page: https://grabient.com/kUoHBXV7c-lQxPXKrL5A?style=angularGradient&steps=15&angle=210
- Drawn as: angular gradient, 15 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 | `#7f9900` | `oklch(64.02% 0.1533 120.80)` | Mossy Woods | black, 6.4 to 1 |
| 3 | `#889d00` | `oklch(65.57% 0.1536 118.68)` | BioShock | black, 6.8 to 1 |
| 4 | `#92a000` | `oklch(67.19% 0.1536 116.05)` | Noxious | black, 7.2 to 1 |
| 5 | `#9ba200` | `oklch(68.46% 0.1526 112.98)` | Fistfull of Green | black, 7.5 to 1 |
| 6 | `#a3a200` | `oklch(68.98% 0.1501 109.48)` | Countryside | black, 7.7 to 1 |
| 7 | `#a99f00` | `oklch(68.88% 0.1463 105.16)` | Countryside | black, 7.6 to 1 |
| 8 | `#ae9a00` | `oklch(68.36% 0.1422 100.28)` | Nuclear Fallout | black, 7.4 to 1 |
| 9 | `#b19500` | `oklch(67.53% 0.1387 95.35)` | Banana Puree | black, 7.1 to 1 |
| 10 | `#b38f00` | `oklch(66.51% 0.1359 90.88)` | Cobra Leather | black, 6.8 to 1 |
| 11 | `#b38902` | `oklch(65.26% 0.1329 87.11)` | Loden Yellow | black, 6.5 to 1 |
| 12 | `#b08203` | `oklch(63.51% 0.1298 83.57)` | Chestnut Gold | black, 6 to 1 |
| 13 | `#ac7b02` | `oklch(61.59% 0.1269 80.38)` | Brown Butter | black, 5.5 to 1 |
| 14 | `#a87502` | `oklch(59.85% 0.1244 77.75)` | Falafel | black, 5.1 to 1 |
| 15 | `#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%, #7f9900 7.1%, #889d00 14.3%, #92a000 21.4%, #9ba200 28.6%, #a3a200 35.7%, #a99f00 42.9%, #ae9a00 50.0%, #b19500 57.1%, #b38f00 64.3%, #b38902 71.4%, #b08203 78.6%, #ac7b02 85.7%, #a87502 92.9%, #a57002 100.0%);
background: conic-gradient(from 210deg in oklch, oklch(62.99% 0.1534 122.35) 0.0%, oklch(64.02% 0.1533 120.80) 7.1%, oklch(65.57% 0.1536 118.68) 14.3%, oklch(67.19% 0.1536 116.05) 21.4%, oklch(68.46% 0.1526 112.98) 28.6%, oklch(68.98% 0.1501 109.48) 35.7%, oklch(68.88% 0.1463 105.16) 42.9%, oklch(68.36% 0.1422 100.28) 50.0%, oklch(67.53% 0.1387 95.35) 57.1%, oklch(66.51% 0.1359 90.88) 64.3%, oklch(65.26% 0.1329 87.11) 71.4%, oklch(63.51% 0.1298 83.57) 78.6%, oklch(61.59% 0.1269 80.38) 85.7%, oklch(59.85% 0.1244 77.75) 92.9%, 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=15&angle=210)
- [PNG](https://grabient.com/kUoHBXV7c-lQxPXKrL5A.png?style=angularGradient&steps=15&angle=210)
- [SVG](https://grabient.com/kUoHBXV7c-lQxPXKrL5A.svg?style=angularGradient&steps=15&angle=210)
- [CSS](https://grabient.com/kUoHBXV7c-lQxPXKrL5A.css?style=angularGradient&steps=15&angle=210)
- [ASE](https://grabient.com/kUoHBXV7c-lQxPXKrL5A.ase?style=angularGradient&steps=15&angle=210)
- [GPL](https://grabient.com/kUoHBXV7c-lQxPXKrL5A.gpl?style=angularGradient&steps=15&angle=210)
- [GRD](https://grabient.com/kUoHBXV7c-lQxPXKrL5A.grd?style=angularGradient&steps=15&angle=210)
- [Design tokens](https://grabient.com/kUoHBXV7c-lQxPXKrL5A.tokens.json?style=angularGradient&steps=15&angle=210)
- [Social card](https://grabient.com/api/og?seed=kUoHBXV7c-lQxPXKrL5A&style=angularGradient&steps=15&angle=210)
- [Palettes like this one](https://grabient.com/palettes?q=kUoHBXV7c-lQxPXKrL5A)
- [Guide for agents](https://grabient.com/llms.txt)