# Navy, purple, light blue and pink linear gradient

Navy, purple, light blue and pink linear gradient with 21 colors: #201b3d, #251a4e, #2e1666, #38157d, #421e90, #4c2ea1, #5642b2, #635ac0, #7073cd, #7a8eda, #87aae4, #98c4eb, #a6d9f3, #adecfa, #b7fafc, #ccfffb, #ddfffa, #e2fcfc, #e2f4ff, #e7e3fc, #f2d6ea. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA`
- Page: https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA?steps=21
- Drawn as: linear gradient, 21 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 | `#251a4e` | `oklch(26.52% 0.0909 288.37)` | Silent Orbit | white, 15.6 to 1 |
| 3 | `#2e1666` | `oklch(29.11% 0.1303 289.38)` | Night Fog | white, 14.7 to 1 |
| 4 | `#38157d` | `oklch(32.40% 0.1584 289.66)` | Pixie Powder | white, 13.4 to 1 |
| 5 | `#421e90` | `oklch(36.40% 0.1710 289.16)` | Galactic Civilization | white, 11.5 to 1 |
| 6 | `#4c2ea1` | `oklch(41.11% 0.1745 287.96)` | Galactic Purple | white, 9.5 to 1 |
| 7 | `#5642b2` | `oklch(46.51% 0.1701 285.88)` | Swiss Plum | white, 7.4 to 1 |
| 8 | `#635ac0` | `oklch(52.79% 0.1554 283.68)` | Circumorbital Ring | white, 5.6 to 1 |
| 9 | `#7073cd` | `oklch(59.55% 0.1352 279.81)` | C64 Purple | black, 5 to 1 |
| 10 | `#7a8eda` | `oklch(66.30% 0.1155 272.01)` | Mood Mode | black, 6.7 to 1 |
| 11 | `#87aae4` | `oklch(73.43% 0.0929 260.04)` | Queer Blue | black, 8.8 to 1 |
| 12 | `#98c4eb` | `oklch(80.16% 0.0732 246.06)` | Sail to the Sea | black, 11.3 to 1 |
| 13 | `#a6d9f3` | `oklch(85.73% 0.0641 231.09)` | Sora Blue | black, 13.7 to 1 |
| 14 | `#adecfa` | `oklch(90.45% 0.0654 213.44)` | Beyond the Clouds | black, 16.1 to 1 |
| 15 | `#b7fafc` | `oklch(94.09% 0.0662 199.18)` | Italian Sky Blue | black, 18 to 1 |
| 16 | `#ccfffb` | `oklch(96.37% 0.0522 191.12)` | Luminescent Sky | black, 19.2 to 1 |
| 17 | `#ddfffa` | `oklch(97.42% 0.0360 186.80)` | Cold Canada | black, 19.7 to 1 |
| 18 | `#e2fcfc` | `oklch(97.34% 0.0270 196.65)` | Matterhorn Snow | black, 19.6 to 1 |
| 19 | `#e2f4ff` | `oklch(95.69% 0.0240 235.24)` | Wizard White | black, 18.6 to 1 |
| 20 | `#e7e3fc` | `oklch(92.76% 0.0341 293.25)` | Lavender Mist | black, 16.8 to 1 |
| 21 | `#f2d6ea` | `oklch(90.55% 0.0400 336.19)` | Infatuation | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #201b3d 0.0%, #251a4e 5.0%, #2e1666 10.0%, #38157d 15.0%, #421e90 20.0%, #4c2ea1 25.0%, #5642b2 30.0%, #635ac0 35.0%, #7073cd 40.0%, #7a8eda 45.0%, #87aae4 50.0%, #98c4eb 55.0%, #a6d9f3 60.0%, #adecfa 65.0%, #b7fafc 70.0%, #ccfffb 75.0%, #ddfffa 80.0%, #e2fcfc 85.0%, #e2f4ff 90.0%, #e7e3fc 95.0%, #f2d6ea 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.80% 0.0620 287.58) 0.0%, oklch(26.52% 0.0909 288.37) 5.0%, oklch(29.11% 0.1303 289.38) 10.0%, oklch(32.40% 0.1584 289.66) 15.0%, oklch(36.40% 0.1710 289.16) 20.0%, oklch(41.11% 0.1745 287.96) 25.0%, oklch(46.51% 0.1701 285.88) 30.0%, oklch(52.79% 0.1554 283.68) 35.0%, oklch(59.55% 0.1352 279.81) 40.0%, oklch(66.30% 0.1155 272.01) 45.0%, oklch(73.43% 0.0929 260.04) 50.0%, oklch(80.16% 0.0732 246.06) 55.0%, oklch(85.73% 0.0641 231.09) 60.0%, oklch(90.45% 0.0654 213.44) 65.0%, oklch(94.09% 0.0662 199.18) 70.0%, oklch(96.37% 0.0522 191.12) 75.0%, oklch(97.42% 0.0360 186.80) 80.0%, oklch(97.34% 0.0270 196.65) 85.0%, oklch(95.69% 0.0240 235.24) 90.0%, oklch(92.76% 0.0341 293.25) 95.0%, 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=21)
- [PNG](https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA.png?steps=21)
- [SVG](https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA.svg?steps=21)
- [CSS](https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA.css?steps=21)
- [ASE](https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA.ase?steps=21)
- [GPL](https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA.gpl?steps=21)
- [GRD](https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA.grd?steps=21)
- [Design tokens](https://grabient.com/kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA.tokens.json?steps=21)
- [Social card](https://grabient.com/api/og?seed=kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA&steps=21)
- [Palettes like this one](https://grabient.com/palettes?q=kcPy3MqLjALk-v5QrT66Ri7viXut7icBcw7QA)
- [Guide for agents](https://grabient.com/llms.txt)