# Gray to tan linear gradient

Gray to tan linear gradient with 7 colors: #927a70, #a68d82, #bca396, #cfb7a8, #e2cfbf, #e3cfb6, #d2ba91. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWmBgeWQzAmUMwJwC8GZZZBo`
- Page: https://grabient.com/kWmBgeWQzAmUMwJwC8GZZZBo
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: neutral, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.6 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 | `#927a70` | `oklch(59.84% 0.0331 42.19)` | Miami Spice | black, 5.2 to 1 |
| 2 | `#a68d82` | `oklch(66.35% 0.0340 45.51)` | Ecru Ochre | black, 6.7 to 1 |
| 3 | `#bca396` | `oklch(73.32% 0.0347 48.92)` | Sand Trap | black, 8.7 to 1 |
| 4 | `#cfb7a8` | `oklch(79.53% 0.0344 52.76)` | Likeable Sand | black, 10.9 to 1 |
| 5 | `#e2cfbf` | `oklch(86.59% 0.0304 61.52)` | Ice Cream Cone | black, 13.9 to 1 |
| 6 | `#e3cfb6` | `oklch(86.38% 0.0401 71.89)` | Warm Croissant | black, 13.8 to 1 |
| 7 | `#d2ba91` | `oklch(79.92% 0.0606 81.29)` | Stacked Limestone | black, 11.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #927a70 0.0%, #a68d82 16.7%, #bca396 33.3%, #cfb7a8 50.0%, #e2cfbf 66.7%, #e3cfb6 83.3%, #d2ba91 100.0%);
background: linear-gradient(90deg in oklch, oklch(59.84% 0.0331 42.19) 0.0%, oklch(66.35% 0.0340 45.51) 16.7%, oklch(73.32% 0.0347 48.92) 33.3%, oklch(79.53% 0.0344 52.76) 50.0%, oklch(86.59% 0.0304 61.52) 66.7%, oklch(86.38% 0.0401 71.89) 83.3%, oklch(79.92% 0.0606 81.29) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.598 | 0.033 | 42.2 |
| 2 | 0.701 | 0.034 | 47.5 |
| 3 | 0.795 | 0.034 | 52.8 |
| 4 | 0.882 | 0.032 | 66.5 |
| 5 | 0.799 | 0.061 | 81.3 |

## In these collections

- [Beige swatches](https://grabient.com/beige-swatches)

## Other forms

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