# Monochrome beige, gray and brown linear gradient

Monochrome beige, gray and brown linear gradient with 7 colors: #f5e9cf, #e7d4bf, #d1b39b, #b9936d, #acaa86, #8d8770, #513d34. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW7hs96o29FeZQHbjkVsAu3o`
- Page: https://grabient.com/kW7hs96o29FeZQHbjkVsAu3o
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: pastel, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.4 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 | `#f5e9cf` | `oklch(93.70% 0.0372 86.48)` | Fresh Zest | black, 17.4 to 1 |
| 2 | `#e7d4bf` | `oklch(87.88% 0.0349 69.07)` | Gentle Slumber | black, 14.5 to 1 |
| 3 | `#d1b39b` | `oklch(78.58% 0.0477 59.91)` | Milk Toast | black, 10.6 to 1 |
| 4 | `#b9936d` | `oklch(68.90% 0.0689 66.41)` | Windswept Leaves | black, 7.4 to 1 |
| 5 | `#acaa86` | `oklch(73.10% 0.0492 104.45)` | Green Grey Mist | black, 8.8 to 1 |
| 6 | `#8d8770` | `oklch(62.13% 0.0343 95.68)` | Mossy Bank | black, 5.8 to 1 |
| 7 | `#513d34` | `oklch(37.80% 0.0317 43.16)` | Obsidian Brown | white, 10.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f5e9cf 0.0%, #e7d4bf 16.7%, #d1b39b 33.3%, #b9936d 50.0%, #acaa86 66.7%, #8d8770 83.3%, #513d34 100.0%);
background: linear-gradient(90deg in oklch, oklch(93.70% 0.0372 86.48) 0.0%, oklch(87.88% 0.0349 69.07) 16.7%, oklch(78.58% 0.0477 59.91) 33.3%, oklch(68.90% 0.0689 66.41) 50.0%, oklch(73.10% 0.0492 104.45) 66.7%, oklch(62.13% 0.0343 95.68) 83.3%, oklch(37.80% 0.0317 43.16) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.037 | 86.5 |
| 2 | 0.839 | 0.037 | 62.2 |
| 3 | 0.689 | 0.069 | 66.4 |
| 4 | 0.72 | 0.039 | 112.9 |
| 5 | 0.378 | 0.032 | 43.2 |

## In these collections

- [Cream](https://grabient.com/cream)

## Other forms

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