# Gray to dark purple linear gradient

Gray to dark purple linear gradient with 8 colors: #b0cfbb, #80b59a, #4f9c7e, #6c7f66, #a06955, #b85144, #893f43, #582e42. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kc0iBv3JlAlCgwHJEDySRw0cexvo7JT6rhi8o`
- Page: https://grabient.com/kc0iBv3JlAlCgwHJEDySRw0cexvo7JT6rhi8o?steps=8&angle=180
- Drawn as: linear gradient, 8 steps, 180 degrees
- Kinds: light to dark, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.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 | `#b0cfbb` | `oklch(82.68% 0.0441 156.80)` | Gossamer Green | black, 12.5 to 1 |
| 2 | `#80b59a` | `oklch(72.83% 0.0689 162.08)` | Mid-century Gem | black, 9 to 1 |
| 3 | `#4f9c7e` | `oklch(63.39% 0.0896 166.31)` | Wintergreen Shadow | black, 6.3 to 1 |
| 4 | `#6c7f66` | `oklch(57.48% 0.0441 137.78)` | Cliffside Park | black, 4.8 to 1 |
| 5 | `#a06955` | `oklch(57.48% 0.0772 40.55)` | Verminlord Hide | black, 4.6 to 1 |
| 6 | `#b85144` | `oklch(56.30% 0.1364 28.93)` | Amaryllis | white, 4.9 to 1 |
| 7 | `#893f43` | `oklch(46.46% 0.1020 18.36)` | Cordovan | white, 7.3 to 1 |
| 8 | `#582e42` | `oklch(36.22% 0.0675 350.89)` | Vistoris Lake | white, 11.1 to 1 |

## CSS

```css
background: linear-gradient(180deg, #b0cfbb 0.0%, #80b59a 14.3%, #4f9c7e 28.6%, #6c7f66 42.9%, #a06955 57.1%, #b85144 71.4%, #893f43 85.7%, #582e42 100.0%);
background: linear-gradient(180deg in oklch, oklch(82.68% 0.0441 156.80) 0.0%, oklch(72.83% 0.0689 162.08) 14.3%, oklch(63.39% 0.0896 166.31) 28.6%, oklch(57.48% 0.0441 137.78) 42.9%, oklch(57.48% 0.0772 40.55) 57.1%, oklch(56.30% 0.1364 28.93) 71.4%, oklch(46.46% 0.1020 18.36) 85.7%, oklch(36.22% 0.0675 350.89) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.827 | 0.044 | 156.8 |
| 2 | 0.728 | 0.069 | 162.1 |
| 3 | 0.634 | 0.09 | 166.3 |
| 4 | 0.575 | 0.044 | 137.8 |
| 5 | 0.575 | 0.077 | 40.6 |
| 6 | 0.563 | 0.136 | 28.9 |
| 7 | 0.465 | 0.102 | 18.4 |
| 8 | 0.362 | 0.068 | -9.1 |

## In these collections

- [Vintage wine and teal](https://grabient.com/vintage-wine-and-teal)
- [Spring thunder over veld](https://grabient.com/spring-thunder-over-veld)

## Other forms

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