# Dark gray, gray, brown and tan linear gradient

Dark gray, gray, brown and tan linear gradient with 7 colors: #384149, #686f70, #a5ad9e, #e1d8c5, #dcb59c, #ae5847, #bf9b42. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYXg2ryQO5-YKtdyDDwR6i6tmpxu`
- Page: https://grabient.com/kYXg2ryQO5-YKtdyDDwR6i6tmpxu
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, neutral
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.3 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 | `#384149` | `oklch(37.01% 0.0179 241.17)` | Cool Operator’s Overalls | white, 10.3 to 1 |
| 2 | `#686f70` | `oklch(53.69% 0.0095 201.51)` | Nevada | white, 5.1 to 1 |
| 3 | `#a5ad9e` | `oklch(73.61% 0.0226 130.76)` | Moonwort | black, 9 to 1 |
| 4 | `#e1d8c5` | `oklch(88.56% 0.0273 85.90)` | Sentimental Beige | black, 14.8 to 1 |
| 5 | `#dcb59c` | `oklch(80.02% 0.0565 54.32)` | Mesa Sand | black, 11 to 1 |
| 6 | `#ae5847` | `oklch(56.07% 0.1165 32.26)` | Tibetan Orange | white, 4.8 to 1 |
| 7 | `#bf9b42` | `oklch(70.47% 0.1144 86.89)` | Underbrush | black, 7.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #384149 0.0%, #686f70 16.7%, #a5ad9e 33.3%, #e1d8c5 50.0%, #dcb59c 66.7%, #ae5847 83.3%, #bf9b42 100.0%);
background: linear-gradient(90deg in oklch, oklch(37.01% 0.0179 241.17) 0.0%, oklch(53.69% 0.0095 201.51) 16.7%, oklch(73.61% 0.0226 130.76) 33.3%, oklch(88.56% 0.0273 85.90) 50.0%, oklch(80.02% 0.0565 54.32) 66.7%, oklch(56.07% 0.1165 32.26) 83.3%, oklch(70.47% 0.1144 86.89) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.37 | 0.018 | 241.2 |
| 2 | 0.575 | 0.01 | 190.4 |
| 3 | 0.803 | 0.029 | 104.9 |
| 4 | 0.898 | 0.033 | 72.1 |
| 5 | 0.563 | 0.112 | 27.7 |
| 6 | 0.705 | 0.114 | 86.9 |

## In these collections

- [Back to school swatches](https://grabient.com/back-to-school-swatches)

## Other forms

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