# Rainbow from purple to navy angular gradient

Rainbow from purple to navy angular gradient with 34 colors: #17002c, #230041, #310760, #401c81, #5230a2, #6d40bb, #934ac2, #c151ad, #e66082, #f37f53, #eba33f, #dfc054, #dcd672, #e3e98c, #eff8a1, #f9ffd5, #ffffff, #fbffef, #e8fda7, #d6ee90, #bedc75, #a0cb60, #76be5a, #16b56d, #009f8d, #008999, #0072a2, #0056b8, #2a3cab, #292894, #1d187c, #0f0a65, #040052, #010040. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA`
- Page: https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA?style=angularGradient&steps=34&angle=180
- Drawn as: angular gradient, 34 steps, 180 degrees
- Kinds: light center, vivid, rainbow
- Hues: complementary
- Contrast of its darkest and lightest colors: 19.5 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 | `#17002c` | `oklch(16.61% 0.0866 304.26)` | Black Htun | white, 19.5 to 1 |
| 2 | `#230041` | `oklch(21.01% 0.1110 301.87)` | Your Darkness | white, 18.2 to 1 |
| 3 | `#310760` | `oklch(27.21% 0.1377 297.00)` | Deep Violet | white, 15.8 to 1 |
| 4 | `#401c81` | `oklch(34.51% 0.1562 292.40)` | Grim Purple | white, 12.3 to 1 |
| 5 | `#5230a2` | `oklch(42.10% 0.1727 291.03)` | Royalty | white, 9.1 to 1 |
| 6 | `#6d40bb` | `oklch(49.22% 0.1838 295.75)` | Purple Rain | white, 6.7 to 1 |
| 7 | `#934ac2` | `oklch(55.30% 0.1858 309.77)` | Tyrian Shimmer | white, 5.2 to 1 |
| 8 | `#c151ad` | `oklch(61.08% 0.1797 335.07)` | Mazzy Star | black, 5 to 1 |
| 9 | `#e66082` | `oklch(66.66% 0.1683 7.21)` | Coral Paradise | black, 6.3 to 1 |
| 10 | `#f37f53` | `oklch(71.97% 0.1544 41.08)` | Rich Gardenia | black, 7.9 to 1 |
| 11 | `#eba33f` | `oklch(76.94% 0.1410 71.53)` | Gilded Leaves | black, 9.8 to 1 |
| 12 | `#dfc054` | `oklch(81.50% 0.1309 93.46)` | Cream Gold | black, 11.8 to 1 |
| 13 | `#dcd672` | `oklch(86.12% 0.1232 105.56)` | Golden Rice | black, 13.9 to 1 |
| 14 | `#e3e98c` | `oklch(90.91% 0.1156 111.49)` | Elfin Yellow | black, 16.2 to 1 |
| 15 | `#eff8a1` | `oklch(95.25% 0.1091 113.54)` | Australian Mint | black, 18.5 to 1 |
| 16 | `#f9ffd5` | `oklch(98.50% 0.0542 113.99)` | Matt White | black, 20.2 to 1 |
| 17 | `#ffffff` | `oklch(100.00% 0.0001 109.01)` | White | black, 20.9 to 1 |
| 18 | `#fbffef` | `oklch(99.27% 0.0212 118.28)` | Pearl Powder | black, 20.6 to 1 |
| 19 | `#e8fda7` | `oklch(96.02% 0.1119 119.76)` | Hitchcock Milk | black, 19.1 to 1 |
| 20 | `#d6ee90` | `oklch(91.00% 0.1220 120.50)` | Creamy Avocado | black, 16.4 to 1 |
| 21 | `#bedc75` | `oklch(85.01% 0.1334 122.46)` | Citrus Lime | black, 13.6 to 1 |
| 22 | `#a0cb60` | `oklch(78.83% 0.1443 127.59)` | Be Spontaneous | black, 11.2 to 1 |
| 23 | `#76be5a` | `oklch(73.23% 0.1530 137.84)` | Green Pear | black, 9.3 to 1 |
| 24 | `#16b56d` | `oklch(68.11% 0.1602 156.16)` | Green Mana | black, 7.8 to 1 |
| 25 | `#009f8d` | `oklch(62.87% 0.1130 181.46)` | On a Whim | black, 6.3 to 1 |
| 26 | `#008999` | `oklch(57.59% 0.0994 209.56)` | Atlantic Blue | black, 5 to 1 |
| 27 | `#0072a2` | `oklch(52.30% 0.1130 236.30)` | Cat’s Purr | white, 5.3 to 1 |
| 28 | `#0056b8` | `oklch(47.07% 0.1704 257.47)` | London Rain | white, 6.9 to 1 |
| 29 | `#2a3cab` | `oklch(41.83% 0.1772 269.47)` | Yuè Guāng Lán Blue | white, 8.9 to 1 |
| 30 | `#292894` | `oklch(36.14% 0.1694 274.04)` | Gentian Blue | white, 11.4 to 1 |
| 31 | `#1d187c` | `oklch(30.33% 0.1583 273.69)` | Outer Rim | white, 14.2 to 1 |
| 32 | `#0f0a65` | `oklch(24.87% 0.1462 270.69)` | Underground Stream | white, 16.7 to 1 |
| 33 | `#040052` | `oklch(20.25% 0.1354 267.28)` | Alucard’s Night | white, 18.5 to 1 |
| 34 | `#010040` | `oklch(17.00% 0.1159 265.72)` | Endless Galaxy | white, 19.5 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #17002c 0.0%, #230041 3.0%, #310760 6.1%, #401c81 9.1%, #5230a2 12.1%, #6d40bb 15.2%, #934ac2 18.2%, #c151ad 21.2%, #e66082 24.2%, #f37f53 27.3%, #eba33f 30.3%, #dfc054 33.3%, #dcd672 36.4%, #e3e98c 39.4%, #eff8a1 42.4%, #f9ffd5 45.5%, #ffffff 48.5%, #fbffef 51.5%, #e8fda7 54.5%, #d6ee90 57.6%, #bedc75 60.6%, #a0cb60 63.6%, #76be5a 66.7%, #16b56d 69.7%, #009f8d 72.7%, #008999 75.8%, #0072a2 78.8%, #0056b8 81.8%, #2a3cab 84.8%, #292894 87.9%, #1d187c 90.9%, #0f0a65 93.9%, #040052 97.0%, #010040 100.0%);
background: conic-gradient(from 180deg in oklch, oklch(16.61% 0.0866 304.26) 0.0%, oklch(21.01% 0.1110 301.87) 3.0%, oklch(27.21% 0.1377 297.00) 6.1%, oklch(34.51% 0.1562 292.40) 9.1%, oklch(42.10% 0.1727 291.03) 12.1%, oklch(49.22% 0.1838 295.75) 15.2%, oklch(55.30% 0.1858 309.77) 18.2%, oklch(61.08% 0.1797 335.07) 21.2%, oklch(66.66% 0.1683 7.21) 24.2%, oklch(71.97% 0.1544 41.08) 27.3%, oklch(76.94% 0.1410 71.53) 30.3%, oklch(81.50% 0.1309 93.46) 33.3%, oklch(86.12% 0.1232 105.56) 36.4%, oklch(90.91% 0.1156 111.49) 39.4%, oklch(95.25% 0.1091 113.54) 42.4%, oklch(98.50% 0.0542 113.99) 45.5%, oklch(100.00% 0.0001 109.01) 48.5%, oklch(99.27% 0.0212 118.28) 51.5%, oklch(96.02% 0.1119 119.76) 54.5%, oklch(91.00% 0.1220 120.50) 57.6%, oklch(85.01% 0.1334 122.46) 60.6%, oklch(78.83% 0.1443 127.59) 63.6%, oklch(73.23% 0.1530 137.84) 66.7%, oklch(68.11% 0.1602 156.16) 69.7%, oklch(62.87% 0.1130 181.46) 72.7%, oklch(57.59% 0.0994 209.56) 75.8%, oklch(52.30% 0.1130 236.30) 78.8%, oklch(47.07% 0.1704 257.47) 81.8%, oklch(41.83% 0.1772 269.47) 84.8%, oklch(36.14% 0.1694 274.04) 87.9%, oklch(30.33% 0.1583 273.69) 90.9%, oklch(24.87% 0.1462 270.69) 93.9%, oklch(20.25% 0.1354 267.28) 97.0%, oklch(17.00% 0.1159 265.72) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.165 | 0.11 | 304.5 |
| 2 | 0.524 | 0.186 | 301.3 |
| 3 | 0.815 | 0.131 | 453.5 |
| 4 | 1 | 0.103 | 476.7 |
| 5 | 0.732 | 0.153 | 497.8 |
| 6 | 0.445 | 0.179 | 624.6 |
| 7 | 0.169 | 0.128 | 625.7 |

## In these collections

- [Rainbow loop gradients](https://grabient.com/rainbow-loop-gradients)

## Other forms

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