# Analogous pink, lavender and purple linear gradient

Analogous pink, lavender and purple linear gradient with 7 colors: #f45f7b, #f39ba8, #e2b6d3, #c2a3d2, #9676bb, #6a4b95, #3e2662. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYroUI5SI_WeVuxWIz3QSu_SolP4`
- Page: https://grabient.com/kYroUI5SI_WeVuxWIz3QSu_SolP4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#f45f7b` | `oklch(68.50% 0.1833 11.95)` | Ponceau | black, 6.7 to 1 |
| 2 | `#f39ba8` | `oklch(78.09% 0.1065 9.69)` | Sweet 60 | black, 10 to 1 |
| 3 | `#e2b6d3` | `oklch(82.34% 0.0634 338.80)` | Pink Gems | black, 11.8 to 1 |
| 4 | `#c2a3d2` | `oklch(75.76% 0.0742 314.23)` | Lilac Lace | black, 9.4 to 1 |
| 5 | `#9676bb` | `oklch(62.47% 0.1068 304.71)` | Lavender Purple | black, 5.6 to 1 |
| 6 | `#6a4b95` | `oklch(48.04% 0.1191 301.52)` | Parfait d’Amour | white, 6.8 to 1 |
| 7 | `#3e2662` | `oklch(33.07% 0.1020 299.04)` | Fading Horizon | white, 12.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f45f7b 0.0%, #f39ba8 16.7%, #e2b6d3 33.3%, #c2a3d2 50.0%, #9676bb 66.7%, #6a4b95 83.3%, #3e2662 100.0%);
background: linear-gradient(90deg in oklch, oklch(68.50% 0.1833 11.95) 0.0%, oklch(78.09% 0.1065 9.69) 16.7%, oklch(82.34% 0.0634 338.80) 33.3%, oklch(75.76% 0.0742 314.23) 50.0%, oklch(62.47% 0.1068 304.71) 66.7%, oklch(48.04% 0.1191 301.52) 83.3%, oklch(33.07% 0.1020 299.04) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.685 | 0.183 | 12 |
| 2 | 0.795 | 0.094 | 6.7 |
| 3 | 0.815 | 0.059 | -34.5 |
| 4 | 0.677 | 0.096 | -52.5 |
| 5 | 0.512 | 0.12 | -57.8 |
| 6 | 0.331 | 0.102 | -61 |

## In these collections

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

## Other forms

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