# Monochrome lavender to purple linear gradient

Monochrome lavender to purple linear gradient with 4 colors: #d8b1e3, #b572de, #823bc9, #522aa6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUzjvi1L0_EJLvu1Qz6A`
- Page: https://grabient.com/kUzjvi1L0_EJLvu1Qz6A?steps=4
- Drawn as: linear gradient, 4 steps, 90 degrees
- Kinds: light to dark, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 5 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 | `#d8b1e3` | `oklch(81.10% 0.0813 318.52)` | Whisper of Plum | black, 11.3 to 1 |
| 2 | `#b572de` | `oklch(66.54% 0.1681 311.12)` | Lavender | black, 6.4 to 1 |
| 3 | `#823bc9` | `oklch(51.97% 0.2081 302.66)` | Purple Rain | white, 6.1 to 1 |
| 4 | `#522aa6` | `oklch(41.73% 0.1846 291.04)` | Royalty | white, 9.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d8b1e3 0.0%, #b572de 33.3%, #823bc9 66.7%, #522aa6 100.0%);
background: linear-gradient(90deg in oklch, oklch(81.10% 0.0813 318.52) 0.0%, oklch(66.54% 0.1681 311.12) 33.3%, oklch(51.97% 0.2081 302.66) 66.7%, oklch(41.73% 0.1846 291.04) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.811 | 0.081 | 318.5 |
| 2 | 0.665 | 0.168 | 311.1 |
| 3 | 0.52 | 0.208 | 302.7 |
| 4 | 0.417 | 0.185 | 291 |

## In these collections

- [Discord server banner gradients](https://grabient.com/discord-server-banner-gradients)

## Other forms

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