# Brown, blue, teal and tan linear gradient

Brown, blue, teal and tan linear gradient with 7 colors: #94463b, #9f9133, #54b1a2, #678da2, #75945d, #be8d57, #c9a682. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWfU4VWihNE8TSvSJC43xc-A`
- Page: https://grabient.com/kWfU4VWihNE8TSvSJC43xc-A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 2.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 | `#94463b` | `oklch(49.21% 0.1075 29.53)` | Morocco Red | white, 6.5 to 1 |
| 2 | `#9f9133` | `oklch(65.09% 0.1137 100.72)` | Gecko | black, 6.5 to 1 |
| 3 | `#54b1a2` | `oklch(69.82% 0.0916 181.82)` | Sacred Turquoise | black, 8.1 to 1 |
| 4 | `#678da2` | `oklch(62.20% 0.0524 233.48)` | French Court | black, 5.8 to 1 |
| 5 | `#75945d` | `oklch(62.79% 0.0858 132.51)` | Vegetarian Veteran | black, 6.1 to 1 |
| 6 | `#be8d57` | `oklch(67.77% 0.0921 67.61)` | Summer Weasel | black, 7.1 to 1 |
| 7 | `#c9a682` | `oklch(74.80% 0.0634 67.57)` | Totally Tan | black, 9.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #94463b 0.0%, #9f9133 16.7%, #54b1a2 33.3%, #678da2 50.0%, #75945d 66.7%, #be8d57 83.3%, #c9a682 100.0%);
background: linear-gradient(90deg in oklch, oklch(49.21% 0.1075 29.53) 0.0%, oklch(65.09% 0.1137 100.72) 16.7%, oklch(69.82% 0.0916 181.82) 33.3%, oklch(62.20% 0.0524 233.48) 50.0%, oklch(62.79% 0.0858 132.51) 66.7%, oklch(67.77% 0.0921 67.61) 83.3%, oklch(74.80% 0.0634 67.57) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.492 | 0.107 | 29.5 |
| 2 | 0.709 | 0.11 | 140.5 |
| 3 | 0.622 | 0.052 | 233.5 |
| 4 | 0.646 | 0.099 | 83.4 |
| 5 | 0.748 | 0.063 | 67.6 |

## Other forms

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