# Navy, purple, light blue and pink linear gradient

Navy, purple, light blue and pink linear gradient with 32 colors: #201b3d, #231b46, #271955, #2d1665, #341474, #3a1681, #401c8d, #472699, #4d31a4, #543eaf, #5b4cb9, #645cc2, #6d6dca, #747ed2, #7b8fda, #82a1e1, #8cb3e6, #97c3eb, #a1d1f0, #a8def5, #adeaf9, #b2f4fc, #bafcfd, #c7fffc, #d7fffa, #ddfffb, #e2fdfc, #e2fafe, #e2f3ff, #e4e9ff, #ecddf6, #f2d6ea. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA`
- Page: https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.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 | `#201b3d` | `oklch(24.80% 0.0620 287.58)` | Prune Plum | white, 16.3 to 1 |
| 2 | `#231b46` | `oklch(25.81% 0.0783 288.02)` | Azulado | white, 15.9 to 1 |
| 3 | `#271955` | `oklch(27.19% 0.1023 288.68)` | Silent Orbit | white, 15.4 to 1 |
| 4 | `#2d1665` | `oklch(28.92% 0.1279 289.33)` | Night Fog | white, 14.8 to 1 |
| 5 | `#341474` | `oklch(30.94% 0.1493 289.69)` | Persian Indigo | white, 14 to 1 |
| 6 | `#3a1681` | `oklch(33.24% 0.1621 289.59)` | Pixie Powder | white, 13 to 1 |
| 7 | `#401c8d` | `oklch(35.84% 0.1699 289.26)` | Galactic Civilization | white, 11.8 to 1 |
| 8 | `#472699` | `oklch(38.74% 0.1738 288.64)` | Galactic Purple | white, 10.5 to 1 |
| 9 | `#4d31a4` | `oklch(41.93% 0.1743 287.68)` | Blue Violet | white, 9.1 to 1 |
| 10 | `#543eaf` | `oklch(45.40% 0.1717 286.30)` | Megadrive Screen | white, 7.8 to 1 |
| 11 | `#5b4cb9` | `oklch(49.25% 0.1646 284.95)` | Swiss Plum | white, 6.5 to 1 |
| 12 | `#645cc2` | `oklch(53.43% 0.1536 283.42)` | Circumorbital Ring | white, 5.4 to 1 |
| 13 | `#6d6dca` | `oklch(57.79% 0.1406 281.10)` | C64 Purple | black, 4.6 to 1 |
| 14 | `#747ed2` | `oklch(62.16% 0.1275 277.37)` | Tanzine | black, 5.6 to 1 |
| 15 | `#7b8fda` | `oklch(66.53% 0.1148 271.68)` | Mood Mode | black, 6.7 to 1 |
| 16 | `#82a1e1` | `oklch(71.12% 0.1003 264.23)` | Blue Cue | black, 8.1 to 1 |
| 17 | `#8cb3e6` | `oklch(75.69% 0.0859 255.63)` | Blue Skies Today | black, 9.6 to 1 |
| 18 | `#97c3eb` | `oklch(79.96% 0.0737 246.52)` | Sail to the Sea | black, 11.3 to 1 |
| 19 | `#a1d1f0` | `oklch(83.68% 0.0659 237.35)` | Sonic Sky | black, 12.8 to 1 |
| 20 | `#a8def5` | `oklch(87.03% 0.0639 226.60)` | Van Gogh Blue | black, 14.3 to 1 |
| 21 | `#adeaf9` | `oklch(90.04% 0.0652 215.11)` | Beyond the Clouds | black, 15.8 to 1 |
| 22 | `#b2f4fc` | `oklch(92.61% 0.0667 204.76)` | Northrend | black, 17.2 to 1 |
| 23 | `#bafcfd` | `oklch(94.64% 0.0654 197.40)` | Friendly Frost | black, 18.3 to 1 |
| 24 | `#c7fffc` | `oklch(96.09% 0.0568 192.39)` | Arabian Veil | black, 19.1 to 1 |
| 25 | `#d7fffa` | `oklch(97.03% 0.0419 187.96)` | Ice | black, 19.5 to 1 |
| 26 | `#ddfffb` | `oklch(97.47% 0.0353 187.04)` | Cold Canada | black, 19.7 to 1 |
| 27 | `#e2fdfc` | `oklch(97.45% 0.0289 192.60)` | Matterhorn Snow | black, 19.7 to 1 |
| 28 | `#e2fafe` | `oklch(96.93% 0.0255 208.38)` | Calm Waters | black, 19.3 to 1 |
| 29 | `#e2f3ff` | `oklch(95.52% 0.0241 238.77)` | Wizard White | black, 18.4 to 1 |
| 30 | `#e4e9ff` | `oklch(93.63% 0.0306 276.43)` | Glitter | black, 17.3 to 1 |
| 31 | `#ecddf6` | `oklch(91.79% 0.0367 312.00)` | Divine Dove | black, 16.2 to 1 |
| 32 | `#f2d6ea` | `oklch(90.55% 0.0400 336.19)` | Infatuation | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #201b3d 0.0%, #231b46 3.2%, #271955 6.5%, #2d1665 9.7%, #341474 12.9%, #3a1681 16.1%, #401c8d 19.4%, #472699 22.6%, #4d31a4 25.8%, #543eaf 29.0%, #5b4cb9 32.3%, #645cc2 35.5%, #6d6dca 38.7%, #747ed2 41.9%, #7b8fda 45.2%, #82a1e1 48.4%, #8cb3e6 51.6%, #97c3eb 54.8%, #a1d1f0 58.1%, #a8def5 61.3%, #adeaf9 64.5%, #b2f4fc 67.7%, #bafcfd 71.0%, #c7fffc 74.2%, #d7fffa 77.4%, #ddfffb 80.6%, #e2fdfc 83.9%, #e2fafe 87.1%, #e2f3ff 90.3%, #e4e9ff 93.5%, #ecddf6 96.8%, #f2d6ea 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.80% 0.0620 287.58) 0.0%, oklch(25.81% 0.0783 288.02) 3.2%, oklch(27.19% 0.1023 288.68) 6.5%, oklch(28.92% 0.1279 289.33) 9.7%, oklch(30.94% 0.1493 289.69) 12.9%, oklch(33.24% 0.1621 289.59) 16.1%, oklch(35.84% 0.1699 289.26) 19.4%, oklch(38.74% 0.1738 288.64) 22.6%, oklch(41.93% 0.1743 287.68) 25.8%, oklch(45.40% 0.1717 286.30) 29.0%, oklch(49.25% 0.1646 284.95) 32.3%, oklch(53.43% 0.1536 283.42) 35.5%, oklch(57.79% 0.1406 281.10) 38.7%, oklch(62.16% 0.1275 277.37) 41.9%, oklch(66.53% 0.1148 271.68) 45.2%, oklch(71.12% 0.1003 264.23) 48.4%, oklch(75.69% 0.0859 255.63) 51.6%, oklch(79.96% 0.0737 246.52) 54.8%, oklch(83.68% 0.0659 237.35) 58.1%, oklch(87.03% 0.0639 226.60) 61.3%, oklch(90.04% 0.0652 215.11) 64.5%, oklch(92.61% 0.0667 204.76) 67.7%, oklch(94.64% 0.0654 197.40) 71.0%, oklch(96.09% 0.0568 192.39) 74.2%, oklch(97.03% 0.0419 187.96) 77.4%, oklch(97.47% 0.0353 187.04) 80.6%, oklch(97.45% 0.0289 192.60) 83.9%, oklch(96.93% 0.0255 208.38) 87.1%, oklch(95.52% 0.0241 238.77) 90.3%, oklch(93.63% 0.0306 276.43) 93.5%, oklch(91.79% 0.0367 312.00) 96.8%, oklch(90.55% 0.0400 336.19) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.248 | 0.062 | 287.6 |
| 2 | 0.319 | 0.156 | 289.7 |
| 3 | 0.449 | 0.172 | 286.5 |
| 4 | 0.634 | 0.124 | 276 |
| 5 | 0.827 | 0.068 | 240 |
| 6 | 0.949 | 0.065 | 196.7 |
| 7 | 0.972 | 0.026 | 199.9 |
| 8 | 0.906 | 0.04 | 336.2 |

## In these collections

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

## Other forms

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