# Beige, blue, pink and purple linear gradient

Beige, blue, pink and purple linear gradient with 7 colors: #f5e8d6, #a8e9be, #2da9e9, #7037a2, #dd4ea9, #aa4ba0, #141338. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW7hQ36CvOLs9TJXyEUGxm3w`
- Page: https://grabient.com/kW7hQ36CvOLs9TJXyEUGxm3w
- Drawn as: linear gradient, 7 steps, 90 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 14.8 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 | `#f5e8d6` | `oklch(93.70% 0.0276 78.05)` | Vanilla Delight | black, 17.4 to 1 |
| 2 | `#a8e9be` | `oklch(88.01% 0.0890 154.92)` | Glaucous Green | black, 15.1 to 1 |
| 3 | `#2da9e9` | `oklch(69.69% 0.1399 237.46)` | Huelveño Horizon | black, 7.9 to 1 |
| 4 | `#7037a2` | `oklch(46.46% 0.1681 305.25)` | Purple Heart | white, 7.6 to 1 |
| 5 | `#dd4ea9` | `oklch(64.46% 0.2007 344.78)` | Orion | black, 5.7 to 1 |
| 6 | `#aa4ba0` | `oklch(56.45% 0.1627 331.43)` | Aged Purple | white, 4.9 to 1 |
| 7 | `#141338` | `oklch(21.26% 0.0703 279.89)` | Spanish Roast | white, 17.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f5e8d6 0.0%, #a8e9be 16.7%, #2da9e9 33.3%, #7037a2 50.0%, #dd4ea9 66.7%, #aa4ba0 83.3%, #141338 100.0%);
background: linear-gradient(90deg in oklch, oklch(93.70% 0.0276 78.05) 0.0%, oklch(88.01% 0.0890 154.92) 16.7%, oklch(69.69% 0.1399 237.46) 33.3%, oklch(46.46% 0.1681 305.25) 50.0%, oklch(64.46% 0.2007 344.78) 66.7%, oklch(56.45% 0.1627 331.43) 83.3%, oklch(21.26% 0.0703 279.89) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.028 | 78 |
| 2 | 0.819 | 0.12 | 198.5 |
| 3 | 0.465 | 0.168 | 305.2 |
| 4 | 0.689 | 0.198 | 348.6 |
| 5 | 0.213 | 0.07 | 279.9 |

## In these collections

- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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