# Gray, brown and lavender linear gradient

Gray, brown and lavender linear gradient with 7 colors: #d8e0e6, #99a767, #82803f, #80888c, #dcd7d9, #dcc0c7, #46608b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW5Qmtzqess8EUV4BdKvhuw4`
- Page: https://grabient.com/kW5Qmtzqess8EUV4BdKvhuw4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.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 | `#d8e0e6` | `oklch(90.16% 0.0124 243.98)` | Harbour Light | black, 15.6 to 1 |
| 2 | `#99a767` | `oklch(70.18% 0.0875 118.58)` | Whirled Peas | black, 8 to 1 |
| 3 | `#82803f` | `oklch(58.63% 0.0869 106.84)` | Green Commando | black, 5 to 1 |
| 4 | `#80888c` | `oklch(62.20% 0.0110 228.13)` | London Road | black, 5.8 to 1 |
| 5 | `#dcd7d9` | `oklch(88.32% 0.0058 354.51)` | Creek Pebble | black, 14.7 to 1 |
| 6 | `#dcc0c7` | `oklch(83.35% 0.0334 0.81)` | Mud Pink | black, 12.4 to 1 |
| 7 | `#46608b` | `oklch(48.82% 0.0758 259.84)` | Federal Blue | white, 6.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d8e0e6 0.0%, #99a767 16.7%, #82803f 33.3%, #80888c 50.0%, #dcd7d9 66.7%, #dcc0c7 83.3%, #46608b 100.0%);
background: linear-gradient(90deg in oklch, oklch(90.16% 0.0124 243.98) 0.0%, oklch(70.18% 0.0875 118.58) 16.7%, oklch(58.63% 0.0869 106.84) 33.3%, oklch(62.20% 0.0110 228.13) 50.0%, oklch(88.32% 0.0058 354.51) 66.7%, oklch(83.35% 0.0334 0.81) 83.3%, oklch(48.82% 0.0758 259.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.012 | 244 |
| 2 | 0.618 | 0.109 | 81.2 |
| 3 | 0.622 | 0.011 | 228.1 |
| 4 | 0.945 | 0.015 | 386.6 |
| 5 | 0.488 | 0.076 | 259.8 |

## Other forms

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