# Vivid analogous blue to lavender linear gradient

Vivid analogous blue to lavender linear gradient with 7 colors: #415fd1, #4e64d4, #616bd8, #7a71db, #9678df, #b880e3, #d385e4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUhoK_STxA1I2wjdOMLg`
- Page: https://grabient.com/kUhoK_STxA1I2wjdOMLg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.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 | `#415fd1` | `oklch(52.76% 0.1791 268.59)` | Savoy Blue | white, 5.5 to 1 |
| 2 | `#4e64d4` | `oklch(54.68% 0.1732 271.10)` | Monarchist | white, 5.1 to 1 |
| 3 | `#616bd8` | `oklch(57.48% 0.1654 275.99)` | Exodus Fruit | black, 4.5 to 1 |
| 4 | `#7a71db` | `oklch(60.78% 0.1566 284.38)` | C64 Purple | black, 5.2 to 1 |
| 5 | `#9678df` | `oklch(64.57% 0.1502 295.01)` | Matt Purple | black, 6 to 1 |
| 6 | `#b880e3` | `oklch(69.34% 0.1520 308.88)` | Lavender Blossom | black, 7.2 to 1 |
| 7 | `#d385e4` | `oklch(73.23% 0.1557 320.37)` | Lavender Perceptions | black, 8.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #415fd1 0.0%, #4e64d4 16.7%, #616bd8 33.3%, #7a71db 50.0%, #9678df 66.7%, #b880e3 83.3%, #d385e4 100.0%);
background: linear-gradient(90deg in oklch, oklch(52.76% 0.1791 268.59) 0.0%, oklch(54.68% 0.1732 271.10) 16.7%, oklch(57.48% 0.1654 275.99) 33.3%, oklch(60.78% 0.1566 284.38) 50.0%, oklch(64.57% 0.1502 295.01) 66.7%, oklch(69.34% 0.1520 308.88) 83.3%, oklch(73.23% 0.1557 320.37) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.528 | 0.179 | 268.6 |
| 2 | 0.575 | 0.165 | 276 |
| 3 | 0.646 | 0.15 | 295 |
| 4 | 0.732 | 0.156 | 320.4 |

## In these collections

- [Violet swatches](https://grabient.com/violet-swatches)

## Other forms

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