# Beige, brown and off-white linear gradient

Beige, brown and off-white linear gradient with 7 colors: #eeddba, #deb16f, #c67b2c, #ac571e, #c48656, #ddc19c, #f3eedf. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW5SQ826u-MYvPZfnUG-IfC4`
- Page: https://grabient.com/kW5SQ826u-MYvPZfnUG-IfC4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, pastel, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#eeddba` | `oklch(90.16% 0.0496 85.08)` | Salt Steppe | black, 15.6 to 1 |
| 2 | `#deb16f` | `oklch(78.67% 0.0983 76.15)` | Sweet Maple | black, 10.6 to 1 |
| 3 | `#c67b2c` | `oklch(64.95% 0.1298 62.69)` | Maine Coon Orange | black, 6.2 to 1 |
| 4 | `#ac571e` | `oklch(55.12% 0.1295 50.21)` | Sienna | white, 5 to 1 |
| 5 | `#c48656` | `oklch(67.16% 0.0994 57.99)` | Mulling Spice | black, 6.8 to 1 |
| 6 | `#ddc19c` | `oklch(82.52% 0.0587 73.61)` | Slender Reed | black, 12.1 to 1 |
| 7 | `#f3eedf` | `oklch(94.88% 0.0207 90.36)` | Whipped White | black, 18 to 1 |

## CSS

```css
background: linear-gradient(90deg, #eeddba 0.0%, #deb16f 16.7%, #c67b2c 33.3%, #ac571e 50.0%, #c48656 66.7%, #ddc19c 83.3%, #f3eedf 100.0%);
background: linear-gradient(90deg in oklch, oklch(90.16% 0.0496 85.08) 0.0%, oklch(78.67% 0.0983 76.15) 16.7%, oklch(64.95% 0.1298 62.69) 33.3%, oklch(55.12% 0.1295 50.21) 50.0%, oklch(67.16% 0.0994 57.99) 66.7%, oklch(82.52% 0.0587 73.61) 83.3%, oklch(94.88% 0.0207 90.36) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.05 | 85.1 |
| 2 | 0.72 | 0.12 | 70.3 |
| 3 | 0.551 | 0.13 | 50.2 |
| 4 | 0.752 | 0.08 | 65 |
| 5 | 0.949 | 0.021 | 90.4 |

## In these collections

- [Pumpkin spice color palette](https://grabient.com/pumpkin-spice-color-palette)

## Other forms

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