# Tan, black, olive and brown linear gradient

Tan, black, olive and brown linear gradient with 7 colors: #c3c091, #9c6950, #4b2509, #1d101b, #264947, #b3a348, #a68d6b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYyy5Kwhu4J6WQIfBCy16mwdOUu8`
- Page: https://grabient.com/kYyy5Kwhu4J6WQIfBCy16mwdOUu8
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 9.8 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 | `#c3c091` | `oklch(79.92% 0.0634 104.77)` | Brimstone Butterfly | black, 11.2 to 1 |
| 2 | `#9c6950` | `oklch(56.95% 0.0752 46.83)` | Old Driftwood | white, 4.5 to 1 |
| 3 | `#4b2509` | `oklch(31.23% 0.0693 52.59)` | Brown Study | white, 13.3 to 1 |
| 4 | `#1d101b` | `oklch(19.69% 0.0284 331.68)` | Shot in the Dark | white, 18.3 to 1 |
| 5 | `#264947` | `oklch(37.74% 0.0401 192.20)` | June Bug | white, 9.9 to 1 |
| 6 | `#b3a348` | `oklch(71.09% 0.1134 98.97)` | Moss Stone | black, 8.2 to 1 |
| 7 | `#a68d6b` | `oklch(65.75% 0.0565 75.88)` | Ammonite Fossil | black, 6.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c3c091 0.0%, #9c6950 16.7%, #4b2509 33.3%, #1d101b 50.0%, #264947 66.7%, #b3a348 83.3%, #a68d6b 100.0%);
background: linear-gradient(90deg in oklch, oklch(79.92% 0.0634 104.77) 0.0%, oklch(56.95% 0.0752 46.83) 16.7%, oklch(31.23% 0.0693 52.59) 33.3%, oklch(19.69% 0.0284 331.68) 50.0%, oklch(37.74% 0.0401 192.20) 66.7%, oklch(71.09% 0.1134 98.97) 83.3%, oklch(65.75% 0.0565 75.88) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.799 | 0.063 | 104.8 |
| 2 | 0.52 | 0.076 | 39.2 |
| 3 | 0.24 | 0.061 | 44.5 |
| 4 | 0.244 | 0.011 | -118.2 |
| 5 | 0.689 | 0.114 | -249.2 |
| 6 | 0.657 | 0.056 | -284.1 |

## Other forms

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