# Vivid analogous purple to light blue linear gradient

Vivid analogous purple to light blue linear gradient with 32 colors: #8220fe, #8026ff, #7d2dff, #7933ff, #7539ff, #703fff, #6b45ff, #664bff, #6151ff, #5c57fe, #575dfe, #5262fe, #4e69ff, #496fff, #4575ff, #417bff, #3d82ff, #3a88ff, #368eff, #3394ff, #2f9aff, #2ba0ff, #26a6ff, #21adff, #1cb3ff, #18baff, #16c0ff, #16c6ff, #17ccff, #1ad1ff, #1dd5ff, #1fd8ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUis3RSVS9lc_PRntDwg`
- Page: https://grabient.com/kUis3RSVS9lc_PRntDwg?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 3.4 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 | `#8220fe` | `oklch(54.33% 0.2825 293.91)` | Szöllősi Grape | white, 5.8 to 1 |
| 2 | `#8026ff` | `oklch(54.48% 0.2797 292.77)` | Szöllősi Grape | white, 5.7 to 1 |
| 3 | `#7d2dff` | `oklch(54.62% 0.2754 291.35)` | Szöllősi Grape | white, 5.7 to 1 |
| 4 | `#7933ff` | `oklch(54.78% 0.2708 289.67)` | Szöllősi Grape | white, 5.6 to 1 |
| 5 | `#7539ff` | `oklch(54.96% 0.2660 287.79)` | Pink OCD | white, 5.5 to 1 |
| 6 | `#703fff` | `oklch(55.17% 0.2611 285.74)` | Pink OCD | white, 5.4 to 1 |
| 7 | `#6b45ff` | `oklch(55.44% 0.2561 283.57)` | Pink OCD | white, 5.3 to 1 |
| 8 | `#664bff` | `oklch(55.77% 0.2512 281.33)` | Pink OCD | white, 5.2 to 1 |
| 9 | `#6151ff` | `oklch(56.17% 0.2457 279.04)` | Shady Neon Blue | white, 5 to 1 |
| 10 | `#5c57fe` | `oklch(56.67% 0.2401 276.77)` | Shady Neon Blue | white, 4.9 to 1 |
| 11 | `#575dfe` | `oklch(57.26% 0.2346 274.55)` | Shady Neon Blue | white, 4.7 to 1 |
| 12 | `#5262fe` | `oklch(57.97% 0.2293 272.39)` | Blue Heath Butterfly | white, 4.6 to 1 |
| 13 | `#4e69ff` | `oklch(58.79% 0.2235 270.23)` | Blue Heath Butterfly | black, 4.7 to 1 |
| 14 | `#496fff` | `oklch(59.72% 0.2176 268.04)` | Blue Heath Butterfly | black, 4.9 to 1 |
| 15 | `#4575ff` | `oklch(60.73% 0.2114 265.82)` | Lightish Blue | black, 5.2 to 1 |
| 16 | `#417bff` | `oklch(61.81% 0.2052 263.55)` | Lightish Blue | black, 5.5 to 1 |
| 17 | `#3d82ff` | `oklch(62.95% 0.1990 261.24)` | Dodger Blue | black, 5.8 to 1 |
| 18 | `#3a88ff` | `oklch(64.13% 0.1929 258.87)` | Bleuchâtel Blue | black, 6.1 to 1 |
| 19 | `#368eff` | `oklch(65.32% 0.1871 256.42)` | Clear Chill | black, 6.4 to 1 |
| 20 | `#3394ff` | `oklch(66.53% 0.1814 253.91)` | Brilliant Azure | black, 6.8 to 1 |
| 21 | `#2f9aff` | `oklch(67.72% 0.1762 251.31)` | Brilliant Azure | black, 7.2 to 1 |
| 22 | `#2ba0ff` | `oklch(68.90% 0.1715 248.59)` | Brilliant Azure | black, 7.5 to 1 |
| 23 | `#26a6ff` | `oklch(70.18% 0.1669 245.56)` | Xed | black, 7.9 to 1 |
| 24 | `#21adff` | `oklch(71.56% 0.1623 242.24)` | Fantasy Console Sky | black, 8.4 to 1 |
| 25 | `#1cb3ff` | `oklch(73.01% 0.1581 238.72)` | Fantasy Console Sky | black, 8.9 to 1 |
| 26 | `#18baff` | `oklch(74.48% 0.1542 235.13)` | Hawaii Morning | black, 9.4 to 1 |
| 27 | `#16c0ff` | `oklch(75.93% 0.1509 231.56)` | Capri | black, 10 to 1 |
| 28 | `#16c6ff` | `oklch(77.32% 0.1481 228.12)` | Shovel Knight | black, 10.5 to 1 |
| 29 | `#17ccff` | `oklch(78.61% 0.1459 224.92)` | Vivid Sky Blue | black, 11 to 1 |
| 30 | `#1ad1ff` | `oklch(79.77% 0.1442 222.07)` | Tropical Turquoise | black, 11.5 to 1 |
| 31 | `#1dd5ff` | `oklch(80.74% 0.1430 219.66)` | Neon Blue | black, 11.9 to 1 |
| 32 | `#1fd8ff` | `oklch(81.50% 0.1422 217.81)` | Neon Blue | black, 12.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #8220fe 0.0%, #8026ff 3.2%, #7d2dff 6.5%, #7933ff 9.7%, #7539ff 12.9%, #703fff 16.1%, #6b45ff 19.4%, #664bff 22.6%, #6151ff 25.8%, #5c57fe 29.0%, #575dfe 32.3%, #5262fe 35.5%, #4e69ff 38.7%, #496fff 41.9%, #4575ff 45.2%, #417bff 48.4%, #3d82ff 51.6%, #3a88ff 54.8%, #368eff 58.1%, #3394ff 61.3%, #2f9aff 64.5%, #2ba0ff 67.7%, #26a6ff 71.0%, #21adff 74.2%, #1cb3ff 77.4%, #18baff 80.6%, #16c0ff 83.9%, #16c6ff 87.1%, #17ccff 90.3%, #1ad1ff 93.5%, #1dd5ff 96.8%, #1fd8ff 100.0%);
background: linear-gradient(180deg in oklch, oklch(54.33% 0.2825 293.91) 0.0%, oklch(54.48% 0.2797 292.77) 3.2%, oklch(54.62% 0.2754 291.35) 6.5%, oklch(54.78% 0.2708 289.67) 9.7%, oklch(54.96% 0.2660 287.79) 12.9%, oklch(55.17% 0.2611 285.74) 16.1%, oklch(55.44% 0.2561 283.57) 19.4%, oklch(55.77% 0.2512 281.33) 22.6%, oklch(56.17% 0.2457 279.04) 25.8%, oklch(56.67% 0.2401 276.77) 29.0%, oklch(57.26% 0.2346 274.55) 32.3%, oklch(57.97% 0.2293 272.39) 35.5%, oklch(58.79% 0.2235 270.23) 38.7%, oklch(59.72% 0.2176 268.04) 41.9%, oklch(60.73% 0.2114 265.82) 45.2%, oklch(61.81% 0.2052 263.55) 48.4%, oklch(62.95% 0.1990 261.24) 51.6%, oklch(64.13% 0.1929 258.87) 54.8%, oklch(65.32% 0.1871 256.42) 58.1%, oklch(66.53% 0.1814 253.91) 61.3%, oklch(67.72% 0.1762 251.31) 64.5%, oklch(68.90% 0.1715 248.59) 67.7%, oklch(70.18% 0.1669 245.56) 71.0%, oklch(71.56% 0.1623 242.24) 74.2%, oklch(73.01% 0.1581 238.72) 77.4%, oklch(74.48% 0.1542 235.13) 80.6%, oklch(75.93% 0.1509 231.56) 83.9%, oklch(77.32% 0.1481 228.12) 87.1%, oklch(78.61% 0.1459 224.92) 90.3%, oklch(79.77% 0.1442 222.07) 93.5%, oklch(80.74% 0.1430 219.66) 96.8%, oklch(81.50% 0.1422 217.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.543 | 0.282 | 293.9 |
| 2 | 0.575 | 0.233 | 273.8 |
| 3 | 0.685 | 0.174 | 249.5 |
| 4 | 0.815 | 0.143 | 217.8 |

## In these collections

- [Electric blue gradients](https://grabient.com/electric-blue-gradients)

## Other forms

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