# Duotone purple to light blue linear gradient

Duotone purple to light blue linear gradient with 7 colors: #774f75, #90628b, #ab79a0, #bb93b4, #b7aace, #9bbadd, #73b5e7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYezjpyR7AVUcwFelD5YxQ4d8kPi`
- Page: https://grabient.com/kYezjpyR7AVUcwFelD5YxQ4d8kPi
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: muted
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.3 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 | `#774f75` | `oklch(48.43% 0.0772 328.36)` | Birthstone | white, 6.6 to 1 |
| 2 | `#90628b` | `oklch(55.84% 0.0835 330.96)` | Hashita Purple | white, 4.8 to 1 |
| 3 | `#ab79a0` | `oklch(63.91% 0.0822 334.90)` | Usu Pink | black, 5.9 to 1 |
| 4 | `#bb93b4` | `oklch(71.04% 0.0665 331.99)` | Mauve Magic | black, 7.9 to 1 |
| 5 | `#b7aace` | `oklch(76.13% 0.0517 301.71)` | Jacey’s Favourite | black, 9.6 to 1 |
| 6 | `#9bbadd` | `oklch(77.78% 0.0604 252.11)` | Blues White Shoes | black, 10.4 to 1 |
| 7 | `#73b5e7` | `oklch(74.80% 0.0992 242.76)` | Life Force | black, 9.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #774f75 0.0%, #90628b 16.7%, #ab79a0 33.3%, #bb93b4 50.0%, #b7aace 66.7%, #9bbadd 83.3%, #73b5e7 100.0%);
background: linear-gradient(90deg in oklch, oklch(48.43% 0.0772 328.36) 0.0%, oklch(55.84% 0.0835 330.96) 16.7%, oklch(63.91% 0.0822 334.90) 33.3%, oklch(71.04% 0.0665 331.99) 50.0%, oklch(76.13% 0.0517 301.71) 66.7%, oklch(77.78% 0.0604 252.11) 83.3%, oklch(74.80% 0.0992 242.76) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.484 | 0.077 | 328.4 |
| 2 | 0.575 | 0.084 | 331.5 |
| 3 | 0.669 | 0.079 | 334.7 |
| 4 | 0.744 | 0.055 | 321 |
| 5 | 0.78 | 0.055 | 257.6 |
| 6 | 0.748 | 0.099 | 242.8 |

## In these collections

- [Blue and mauve gradients](https://grabient.com/blue-and-mauve-gradients)
- [Pink and blue gradients](https://grabient.com/pink-and-blue-gradients)

## Other forms

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