# Soft navy violet electric gradient

Analogous navy, purple and lavender linear gradient with 32 colors: #070e27, #08102c, #0a1332, #0c183a, #0e1c43, #10214d, #122657, #152b61, #18306b, #1b3476, #203880, #253c8c, #2c3f97, #3343a2, #3a46ac, #434ab6, #4b4dbe, #5450c5, #5d52ca, #6755cf, #7058d3, #7a5cd7, #8461da, #8d67dd, #9770e1, #a27be5, #ad88e9, #b896ec, #c2a4ef, #cbb0f2, #d3baf5, #d9c2f7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous navy, purple and lavender linear gradient
- Seed: `kWLCa_KSa_by-QVOPsJbBvA4`
- Page: https://grabient.com/kWLCa_KSa_by-QVOPsJbBvA4?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark to light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.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 | `#070e27` | `oklch(17.32% 0.0524 268.59)` | Void | white, 19.1 to 1 |
| 2 | `#08102c` | `oklch(18.52% 0.0566 268.14)` | Squid’s Ink | white, 18.7 to 1 |
| 3 | `#0a1332` | `oklch(20.11% 0.0621 267.41)` | Liberty Blue | white, 18.1 to 1 |
| 4 | `#0c183a` | `oklch(22.01% 0.0688 266.54)` | Naval Night | white, 17.4 to 1 |
| 5 | `#0e1c43` | `oklch(24.12% 0.0761 265.65)` | Midnight Mirage | white, 16.5 to 1 |
| 6 | `#10214d` | `oklch(26.34% 0.0840 264.87)` | Dark Soul | white, 15.5 to 1 |
| 7 | `#122657` | `oklch(28.58% 0.0922 264.33)` | Fibonacci Blue | white, 14.5 to 1 |
| 8 | `#152b61` | `oklch(30.76% 0.1002 264.17)` | Schiava Blue | white, 13.4 to 1 |
| 9 | `#18306b` | `oklch(32.77% 0.1081 264.50)` | Atlantic Navy | white, 12.5 to 1 |
| 10 | `#1b3476` | `oklch(34.75% 0.1166 265.25)` | Twilight Express | white, 11.6 to 1 |
| 11 | `#203880` | `oklch(36.76% 0.1260 266.33)` | Surf the Web | white, 10.8 to 1 |
| 12 | `#253c8c` | `oklch(38.77% 0.1357 267.69)` | Navy Seal | white, 10 to 1 |
| 13 | `#2c3f97` | `oklch(40.79% 0.1453 269.28)` | Navy Seal | white, 9.2 to 1 |
| 14 | `#3343a2` | `oklch(42.79% 0.1543 271.06)` | Galaxy Express | white, 8.5 to 1 |
| 15 | `#3a46ac` | `oklch(44.76% 0.1622 272.97)` | Night in Manchester | white, 7.8 to 1 |
| 16 | `#434ab6` | `oklch(46.69% 0.1685 274.97)` | Night in Manchester | white, 7.2 to 1 |
| 17 | `#4b4dbe` | `oklch(48.55% 0.1729 277.07)` | Free Speech Blue | white, 6.7 to 1 |
| 18 | `#5450c5` | `oklch(50.26% 0.1766 279.52)` | Iris | white, 6.3 to 1 |
| 19 | `#5d52ca` | `oklch(51.85% 0.1795 282.25)` | Iris | white, 5.9 to 1 |
| 20 | `#6755cf` | `oklch(53.42% 0.1813 285.13)` | Ameixa | white, 5.5 to 1 |
| 21 | `#7058d3` | `oklch(55.02% 0.1818 288.04)` | Astro Purple | white, 5.2 to 1 |
| 22 | `#7a5cd7` | `oklch(56.74% 0.1809 290.84)` | Astro Purple | white, 4.8 to 1 |
| 23 | `#8461da` | `oklch(58.65% 0.1783 293.40)` | Gloomy Purple | black, 4.6 to 1 |
| 24 | `#8d67dd` | `oklch(60.82% 0.1737 295.59)` | Matt Purple | black, 5.1 to 1 |
| 25 | `#9770e1` | `oklch(63.41% 0.1664 297.38)` | Matt Purple | black, 5.7 to 1 |
| 26 | `#a27be5` | `oklch(66.55% 0.1552 298.93)` | Forgotten Purple | black, 6.5 to 1 |
| 27 | `#ad88e9` | `oklch(70.03% 0.1413 300.27)` | Lavender Blossom | black, 7.4 to 1 |
| 28 | `#b896ec` | `oklch(73.64% 0.1260 301.42)` | Bright Lavender | black, 8.6 to 1 |
| 29 | `#c2a4ef` | `oklch(77.16% 0.1106 302.40)` | Lavender Cream | black, 9.8 to 1 |
| 30 | `#cbb0f2` | `oklch(80.38% 0.0962 303.23)` | Purple Sand | black, 11 to 1 |
| 31 | `#d3baf5` | `oklch(83.08% 0.0842 303.93)` | Pink Illusion | black, 12.1 to 1 |
| 32 | `#d9c2f7` | `oklch(85.04% 0.0758 304.52)` | Beefy Pink | black, 13 to 1 |

## CSS

```css
background: linear-gradient(45deg, #070e27 0.0%, #08102c 3.2%, #0a1332 6.5%, #0c183a 9.7%, #0e1c43 12.9%, #10214d 16.1%, #122657 19.4%, #152b61 22.6%, #18306b 25.8%, #1b3476 29.0%, #203880 32.3%, #253c8c 35.5%, #2c3f97 38.7%, #3343a2 41.9%, #3a46ac 45.2%, #434ab6 48.4%, #4b4dbe 51.6%, #5450c5 54.8%, #5d52ca 58.1%, #6755cf 61.3%, #7058d3 64.5%, #7a5cd7 67.7%, #8461da 71.0%, #8d67dd 74.2%, #9770e1 77.4%, #a27be5 80.6%, #ad88e9 83.9%, #b896ec 87.1%, #c2a4ef 90.3%, #cbb0f2 93.5%, #d3baf5 96.8%, #d9c2f7 100.0%);
background: linear-gradient(45deg in oklch, oklch(17.32% 0.0524 268.59) 0.0%, oklch(18.52% 0.0566 268.14) 3.2%, oklch(20.11% 0.0621 267.41) 6.5%, oklch(22.01% 0.0688 266.54) 9.7%, oklch(24.12% 0.0761 265.65) 12.9%, oklch(26.34% 0.0840 264.87) 16.1%, oklch(28.58% 0.0922 264.33) 19.4%, oklch(30.76% 0.1002 264.17) 22.6%, oklch(32.77% 0.1081 264.50) 25.8%, oklch(34.75% 0.1166 265.25) 29.0%, oklch(36.76% 0.1260 266.33) 32.3%, oklch(38.77% 0.1357 267.69) 35.5%, oklch(40.79% 0.1453 269.28) 38.7%, oklch(42.79% 0.1543 271.06) 41.9%, oklch(44.76% 0.1622 272.97) 45.2%, oklch(46.69% 0.1685 274.97) 48.4%, oklch(48.55% 0.1729 277.07) 51.6%, oklch(50.26% 0.1766 279.52) 54.8%, oklch(51.85% 0.1795 282.25) 58.1%, oklch(53.42% 0.1813 285.13) 61.3%, oklch(55.02% 0.1818 288.04) 64.5%, oklch(56.74% 0.1809 290.84) 67.7%, oklch(58.65% 0.1783 293.40) 71.0%, oklch(60.82% 0.1737 295.59) 74.2%, oklch(63.41% 0.1664 297.38) 77.4%, oklch(66.55% 0.1552 298.93) 80.6%, oklch(70.03% 0.1413 300.27) 83.9%, oklch(73.64% 0.1260 301.42) 87.1%, oklch(77.16% 0.1106 302.40) 90.3%, oklch(80.38% 0.0962 303.23) 93.5%, oklch(83.08% 0.0842 303.93) 96.8%, oklch(85.04% 0.0758 304.52) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.173 | 0.052 | 268.6 |
| 2 | 0.323 | 0.106 | 264.4 |
| 3 | 0.476 | 0.171 | 276 |
| 4 | 0.614 | 0.172 | 296.1 |
| 5 | 0.85 | 0.076 | 304.5 |

## In these collections

- [Indigo gradients](https://grabient.com/indigo-gradients)

## Other forms

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