# Blue mauve violet fade

Blue, lavender, pink and purple linear gradient with 21 colors: #3f53a1, #3c5fa1, #3e6da0, #4a79a1, #5a82aa, #6f8ab8, #858fc5, #9992cd, #ac92d1, #bd8fcf, #c98ac8, #ce83bd, #cd7ab1, #c76ea6, #bc60a0, #a9509e, #933fa1, #8031a7, #6c21b4, #580ac2, #4700c6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, lavender, pink and purple linear gradient
- Seed: `kad1zASJy9FaexJbKUT0jDBz7BPK0W7wA`
- Page: https://grabient.com/kad1zASJy9FaexJbKUT0jDBz7BPK0W7wA?steps=21&angle=180
- Drawn as: linear gradient, 21 steps, 180 degrees
- Kinds: light center
- Hues: wide
- Contrast of its darkest and lightest colors: 3.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 | `#3f53a1` | `oklch(46.85% 0.1268 270.00)` | Dazzling Blue | white, 7 to 1 |
| 2 | `#3c5fa1` | `oklch(49.14% 0.1142 262.50)` | Blue Dahlia | white, 6.3 to 1 |
| 3 | `#3e6da0` | `oklch(52.44% 0.0963 252.02)` | Star Sapphire | white, 5.3 to 1 |
| 4 | `#4a79a1` | `oklch(55.99% 0.0814 245.67)` | Zenith | white, 4.6 to 1 |
| 5 | `#5a82aa` | `oklch(59.36% 0.0758 249.41)` | Girls in Blue | black, 5.2 to 1 |
| 6 | `#6f8ab8` | `oklch(63.02% 0.0765 261.08)` | Debutante Ball | black, 5.9 to 1 |
| 7 | `#858fc5` | `oklch(66.37% 0.0806 275.76)` | Safflowerish Sky | black, 6.7 to 1 |
| 8 | `#9992cd` | `oklch(68.82% 0.0860 289.01)` | Violet Tulip | black, 7.3 to 1 |
| 9 | `#ac92d1` | `oklch(70.58% 0.0943 302.74)` | Middy’s Purple | black, 7.7 to 1 |
| 10 | `#bd8fcf` | `oklch(71.61% 0.1042 316.23)` | Pale Purple | black, 7.9 to 1 |
| 11 | `#c98ac8` | `oklch(71.65% 0.1130 327.06)` | Rose Souvenir | black, 7.9 to 1 |
| 12 | `#ce83bd` | `oklch(70.57% 0.1190 335.13)` | Peruvian Lily | black, 7.5 to 1 |
| 13 | `#cd7ab1` | `oklch(68.51% 0.1240 340.96)` | Peruvian Lily | black, 6.9 to 1 |
| 14 | `#c76ea6` | `oklch(65.66% 0.1306 343.20)` | Sugar Creek | black, 6.2 to 1 |
| 15 | `#bc60a0` | `oklch(61.91% 0.1407 340.28)` | Young Purple | black, 5.3 to 1 |
| 16 | `#a9509e` | `oklch(56.96% 0.1531 332.22)` | Orchid Dottyback | white, 4.8 to 1 |
| 17 | `#933fa1` | `oklch(51.96% 0.1679 321.97)` | Medium Purple | white, 6 to 1 |
| 18 | `#8031a7` | `oklch(48.06% 0.1856 312.23)` | Pleasant Purple | white, 7.2 to 1 |
| 19 | `#6c21b4` | `oklch(45.00% 0.2099 301.14)` | Rabbit-Ear Iris | white, 8.3 to 1 |
| 20 | `#580ac2` | `oklch(42.59% 0.2348 290.27)` | Purplue | white, 9.4 to 1 |
| 21 | `#4700c6` | `oklch(40.96% 0.2431 282.67)` | Violet Blue | white, 10.1 to 1 |

## CSS

```css
background: linear-gradient(180deg, #3f53a1 0.0%, #3c5fa1 5.0%, #3e6da0 10.0%, #4a79a1 15.0%, #5a82aa 20.0%, #6f8ab8 25.0%, #858fc5 30.0%, #9992cd 35.0%, #ac92d1 40.0%, #bd8fcf 45.0%, #c98ac8 50.0%, #ce83bd 55.0%, #cd7ab1 60.0%, #c76ea6 65.0%, #bc60a0 70.0%, #a9509e 75.0%, #933fa1 80.0%, #8031a7 85.0%, #6c21b4 90.0%, #580ac2 95.0%, #4700c6 100.0%);
background: linear-gradient(180deg in oklch, oklch(46.85% 0.1268 270.00) 0.0%, oklch(49.14% 0.1142 262.50) 5.0%, oklch(52.44% 0.0963 252.02) 10.0%, oklch(55.99% 0.0814 245.67) 15.0%, oklch(59.36% 0.0758 249.41) 20.0%, oklch(63.02% 0.0765 261.08) 25.0%, oklch(66.37% 0.0806 275.76) 30.0%, oklch(68.82% 0.0860 289.01) 35.0%, oklch(70.58% 0.0943 302.74) 40.0%, oklch(71.61% 0.1042 316.23) 45.0%, oklch(71.65% 0.1130 327.06) 50.0%, oklch(70.57% 0.1190 335.13) 55.0%, oklch(68.51% 0.1240 340.96) 60.0%, oklch(65.66% 0.1306 343.20) 65.0%, oklch(61.91% 0.1407 340.28) 70.0%, oklch(56.96% 0.1531 332.22) 75.0%, oklch(51.96% 0.1679 321.97) 80.0%, oklch(48.06% 0.1856 312.23) 85.0%, oklch(45.00% 0.2099 301.14) 90.0%, oklch(42.59% 0.2348 290.27) 95.0%, oklch(40.96% 0.2431 282.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.469 | 0.127 | 270 |
| 2 | 0.571 | 0.079 | 245.7 |
| 3 | 0.681 | 0.084 | 284.8 |
| 4 | 0.717 | 0.113 | 327.1 |
| 5 | 0.646 | 0.134 | 342.9 |
| 6 | 0.492 | 0.179 | 315.4 |
| 7 | 0.409 | 0.252 | 282.7 |

## In these collections

- [Synthwave gradients](https://grabient.com/synthwave-gradients)
- [Winter sunset gradients](https://grabient.com/winter-sunset-gradients)

## Other forms

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