# Brown, mustard and teal linear gradient

Brown, mustard and teal linear gradient with 7 colors: #3c3f23, #4a3e13, #876316, #c19628, #c3b745, #88b16b, #548981. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYWyFRMJi9MwpvrgscHXSnDUsVRu`
- Page: https://grabient.com/kYWyFRMJi9MwpvrgscHXSnDUsVRu
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.2 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 | `#3c3f23` | `oklch(35.83% 0.0455 113.91)` | Deep Seaweed | white, 10.8 to 1 |
| 2 | `#4a3e13` | `oklch(36.65% 0.0622 94.07)` | Xanthophobia | white, 10.5 to 1 |
| 3 | `#876316` | `oklch(52.32% 0.0997 81.19)` | Kumera | white, 5.4 to 1 |
| 4 | `#c19628` | `oklch(69.44% 0.1297 85.57)` | Tawny Olive | black, 7.6 to 1 |
| 5 | `#c3b745` | `oklch(76.89% 0.1336 103.38)` | Warm Olive | black, 10.2 to 1 |
| 6 | `#88b16b` | `oklch(71.36% 0.1063 133.25)` | Nasturtium Leaf | black, 8.5 to 1 |
| 7 | `#548981` | `oklch(59.06% 0.0579 183.65)` | Wintergreen Dream | black, 5.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #3c3f23 0.0%, #4a3e13 16.7%, #876316 33.3%, #c19628 50.0%, #c3b745 66.7%, #88b16b 83.3%, #548981 100.0%);
background: linear-gradient(90deg in oklch, oklch(35.83% 0.0455 113.91) 0.0%, oklch(36.65% 0.0622 94.07) 16.7%, oklch(52.32% 0.0997 81.19) 33.3%, oklch(69.44% 0.1297 85.57) 50.0%, oklch(76.89% 0.1336 103.38) 66.7%, oklch(71.36% 0.1063 133.25) 83.3%, oklch(59.06% 0.0579 183.65) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.358 | 0.045 | 113.9 |
| 2 | 0.382 | 0.068 | 90.7 |
| 3 | 0.598 | 0.114 | 80.1 |
| 4 | 0.76 | 0.136 | 95.9 |
| 5 | 0.732 | 0.114 | 124.5 |
| 6 | 0.591 | 0.058 | 183.7 |

## In these collections

- [Golden pollen](https://grabient.com/golden-pollen)

## Other forms

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