# Analogous gray, orange and brown linear gradient

Analogous gray, orange and brown linear gradient with 7 colors: #768d71, #98ab90, #ccd0bb, #f2ebdc, #eaa766, #c5611d, #904525. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWnSRj4w6-3eHupWtrxvSg-Y`
- Page: https://grabient.com/kWnSRj4w6-3eHupWtrxvSg-Y
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, pastel
- Hues: two-hue
- Contrast of its darkest and lightest colors: 5.7 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 | `#768d71` | `oklch(61.81% 0.0496 139.92)` | Toad | black, 5.8 to 1 |
| 2 | `#98ab90` | `oklch(71.97% 0.0442 136.60)` | Banyan Serenity | black, 8.5 to 1 |
| 3 | `#ccd0bb` | `oklch(84.89% 0.0287 117.34)` | Chinese Jade | black, 13.3 to 1 |
| 4 | `#f2ebdc` | `oklch(94.09% 0.0207 84.97)` | Painter’s White | black, 17.6 to 1 |
| 5 | `#eaa766` | `oklch(77.89% 0.1141 63.41)` | Apricot Sorbet | black, 10.2 to 1 |
| 6 | `#c5611d` | `oklch(60.24% 0.1480 49.43)` | Kvass | black, 5 to 1 |
| 7 | `#904525` | `oklch(48.03% 0.1102 42.70)` | Madeira Brown | white, 6.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #768d71 0.0%, #98ab90 16.7%, #ccd0bb 33.3%, #f2ebdc 50.0%, #eaa766 66.7%, #c5611d 83.3%, #904525 100.0%);
background: linear-gradient(90deg in oklch, oklch(61.81% 0.0496 139.92) 0.0%, oklch(71.97% 0.0442 136.60) 16.7%, oklch(84.89% 0.0287 117.34) 33.3%, oklch(94.09% 0.0207 84.97) 50.0%, oklch(77.89% 0.1141 63.41) 66.7%, oklch(60.24% 0.1480 49.43) 83.3%, oklch(48.03% 0.1102 42.70) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.618 | 0.05 | 139.9 |
| 2 | 0.78 | 0.04 | 130.4 |
| 3 | 0.941 | 0.021 | 85 |
| 4 | 0.681 | 0.15 | 55.4 |
| 5 | 0.48 | 0.11 | 42.7 |

## In these collections

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

## Other forms

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