# Lavender to gray linear gradient

Lavender to gray linear gradient with 7 colors: #d9b2c1, #bcaac0, #9b9dae, #7c8d9d, #5e7c89, #526475, #4d5262. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUzCP72Qk3MgOuc4CcUA`
- Page: https://grabient.com/kUzCP72Qk3MgOuc4CcUA
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, neutral, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.1 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 | `#d9b2c1` | `oklch(80.31% 0.0482 353.67)` | Mauvelous | black, 11.1 to 1 |
| 2 | `#bcaac0` | `oklch(76.03% 0.0356 319.92)` | Lavender Frost | black, 9.6 to 1 |
| 3 | `#9b9dae` | `oklch(70.08% 0.0248 279.70)` | Screen Test | black, 7.8 to 1 |
| 4 | `#7c8d9d` | `oklch(63.53% 0.0318 246.48)` | Lucid Blue | black, 6.1 to 1 |
| 5 | `#5e7c89` | `oklch(56.69% 0.0400 227.92)` | Night Owl | black, 4.6 to 1 |
| 6 | `#526475` | `oklch(49.56% 0.0340 246.35)` | Midnight Show | white, 6 to 1 |
| 7 | `#4d5262` | `oklch(44.09% 0.0262 271.25)` | Mystical Shade | white, 7.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d9b2c1 0.0%, #bcaac0 16.7%, #9b9dae 33.3%, #7c8d9d 50.0%, #5e7c89 66.7%, #526475 83.3%, #4d5262 100.0%);
background: linear-gradient(90deg in oklch, oklch(80.31% 0.0482 353.67) 0.0%, oklch(76.03% 0.0356 319.92) 16.7%, oklch(70.08% 0.0248 279.70) 33.3%, oklch(63.53% 0.0318 246.48) 50.0%, oklch(56.69% 0.0400 227.92) 66.7%, oklch(49.56% 0.0340 246.35) 83.3%, oklch(44.09% 0.0262 271.25) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.803 | 0.048 | 353.7 |
| 2 | 0.701 | 0.025 | 279.7 |
| 3 | 0.567 | 0.04 | 227.9 |
| 4 | 0.441 | 0.026 | 271.2 |

## In these collections

- [Dusk gradients](https://grabient.com/dusk-gradients)

## Other forms

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