# Rainbow from navy to purple linear gradient

Rainbow from navy to purple linear gradient with 32 colors: #28115c, #241f61, #1d2f64, #183f67, #184f6b, #116073, #00757a, #008d7a, #20a370, #50b364, #6bc15f, #7bd062, #88dd68, #98e56a, #aee667, #c2e46a, #d2de70, #dcd574, #e2ca72, #e5ba6a, #e4a663, #e0905f, #d87b60, #cc6764, #bd5269, #aa3f6e, #952f73, #7f2475, #691c71, #55176a, #451262, #3a0f5c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcRFnNthq41a1NpsPz4a6k7tWsuI5uTkJK48A`
- Page: https://grabient.com/kcRFnNthq41a1NpsPz4a6k7tWsuI5uTkJK48A?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, rainbow
- Hues: complementary
- Contrast of its darkest and lightest colors: 11 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 | `#28115c` | `oklch(26.77% 0.1226 288.98)` | Voldemort | white, 15.8 to 1 |
| 2 | `#241f61` | `oklch(29.07% 0.1124 279.83)` | Intergalactic Cowboy | white, 14.5 to 1 |
| 3 | `#1d2f64` | `oklch(32.26% 0.0967 266.94)` | Mythical Night | white, 12.7 to 1 |
| 4 | `#183f67` | `oklch(36.16% 0.0817 251.71)` | Blue Opal | white, 10.7 to 1 |
| 5 | `#184f6b` | `oklch(40.54% 0.0732 235.58)` | Seafarer | white, 8.8 to 1 |
| 6 | `#116073` | `oklch(45.40% 0.0768 218.99)` | Nocturnal Sea | white, 7.1 to 1 |
| 7 | `#00757a` | `oklch(51.23% 0.0871 199.46)` | Maxi Teal | white, 5.4 to 1 |
| 8 | `#008d7a` | `oklch(57.49% 0.1049 179.21)` | Emerald Enchantment | black, 5 to 1 |
| 9 | `#20a370` | `oklch(63.55% 0.1329 161.13)` | Teal Green | black, 6.5 to 1 |
| 10 | `#50b364` | `oklch(68.80% 0.1477 148.03)` | Samphire Green | black, 7.9 to 1 |
| 11 | `#6bc15f` | `oklch(73.52% 0.1586 141.40)` | Drop Green | black, 9.4 to 1 |
| 12 | `#7bd062` | `oklch(77.91% 0.1677 138.95)` | Fairy Tale Green | black, 11 to 1 |
| 13 | `#88dd68` | `oklch(81.65% 0.1734 137.82)` | Lilliputian Lime | black, 12.5 to 1 |
| 14 | `#98e56a` | `oklch(84.45% 0.1744 135.11)` | Snarky Mint | black, 13.7 to 1 |
| 15 | `#aee667` | `oklch(86.14% 0.1681 129.27)` | Inchworm | black, 14.3 to 1 |
| 16 | `#c2e46a` | `oklch(86.92% 0.1533 122.41)` | Pisco Sour | black, 14.5 to 1 |
| 17 | `#d2de70` | `oklch(86.82% 0.1354 114.46)` | Ajwain Green | black, 14.4 to 1 |
| 18 | `#dcd574` | `oklch(85.86% 0.1197 105.23)` | Golden Rice | black, 13.8 to 1 |
| 19 | `#e2ca72` | `oklch(84.02% 0.1116 94.43)` | Dijon Mustard | black, 12.8 to 1 |
| 20 | `#e5ba6a` | `oklch(81.00% 0.1099 81.42)` | Cloudy Honey | black, 11.5 to 1 |
| 21 | `#e4a663` | `oklch(77.03% 0.1121 66.86)` | Apricot Sorbet | black, 9.9 to 1 |
| 22 | `#e0905f` | `oklch(72.55% 0.1167 51.81)` | Bockwurst | black, 8.3 to 1 |
| 23 | `#d87b60` | `oklch(67.96% 0.1219 37.32)` | Silithus Brown | black, 6.9 to 1 |
| 24 | `#cc6764` | `oklch(63.27% 0.1287 23.47)` | Fuzzy Wuzzy | black, 5.7 to 1 |
| 25 | `#bd5269` | `oklch(58.13% 0.1386 9.40)` | Popstar | white, 4.5 to 1 |
| 26 | `#aa3f6e` | `oklch(52.88% 0.1486 355.82)` | Medium Ruby | white, 5.7 to 1 |
| 27 | `#952f73` | `oklch(47.88% 0.1556 343.47)` | Beetiful Magenta | white, 7.1 to 1 |
| 28 | `#7f2475` | `oklch(43.39% 0.1566 332.93)` | Noble Plum | white, 8.7 to 1 |
| 29 | `#691c71` | `oklch(38.95% 0.1510 323.64)` | New Riders of the Purple Sage | white, 10.4 to 1 |
| 30 | `#55176a` | `oklch(34.78% 0.1420 315.64)` | Velvet Vortex | white, 12.2 to 1 |
| 31 | `#451262` | `oklch(31.25% 0.1328 309.16)` | Obsidian Shell | white, 13.8 to 1 |
| 32 | `#3a0f5c` | `oklch(28.74% 0.1268 304.48)` | Wicked Purple | white, 15 to 1 |

## CSS

```css
background: linear-gradient(90deg, #28115c 0.0%, #241f61 3.2%, #1d2f64 6.5%, #183f67 9.7%, #184f6b 12.9%, #116073 16.1%, #00757a 19.4%, #008d7a 22.6%, #20a370 25.8%, #50b364 29.0%, #6bc15f 32.3%, #7bd062 35.5%, #88dd68 38.7%, #98e56a 41.9%, #aee667 45.2%, #c2e46a 48.4%, #d2de70 51.6%, #dcd574 54.8%, #e2ca72 58.1%, #e5ba6a 61.3%, #e4a663 64.5%, #e0905f 67.7%, #d87b60 71.0%, #cc6764 74.2%, #bd5269 77.4%, #aa3f6e 80.6%, #952f73 83.9%, #7f2475 87.1%, #691c71 90.3%, #55176a 93.5%, #451262 96.8%, #3a0f5c 100.0%);
background: linear-gradient(90deg in oklch, oklch(26.77% 0.1226 288.98) 0.0%, oklch(29.07% 0.1124 279.83) 3.2%, oklch(32.26% 0.0967 266.94) 6.5%, oklch(36.16% 0.0817 251.71) 9.7%, oklch(40.54% 0.0732 235.58) 12.9%, oklch(45.40% 0.0768 218.99) 16.1%, oklch(51.23% 0.0871 199.46) 19.4%, oklch(57.49% 0.1049 179.21) 22.6%, oklch(63.55% 0.1329 161.13) 25.8%, oklch(68.80% 0.1477 148.03) 29.0%, oklch(73.52% 0.1586 141.40) 32.3%, oklch(77.91% 0.1677 138.95) 35.5%, oklch(81.65% 0.1734 137.82) 38.7%, oklch(84.45% 0.1744 135.11) 41.9%, oklch(86.14% 0.1681 129.27) 45.2%, oklch(86.92% 0.1533 122.41) 48.4%, oklch(86.82% 0.1354 114.46) 51.6%, oklch(85.86% 0.1197 105.23) 54.8%, oklch(84.02% 0.1116 94.43) 58.1%, oklch(81.00% 0.1099 81.42) 61.3%, oklch(77.03% 0.1121 66.86) 64.5%, oklch(72.55% 0.1167 51.81) 67.7%, oklch(67.96% 0.1219 37.32) 71.0%, oklch(63.27% 0.1287 23.47) 74.2%, oklch(58.13% 0.1386 9.40) 77.4%, oklch(52.88% 0.1486 355.82) 80.6%, oklch(47.88% 0.1556 343.47) 83.9%, oklch(43.39% 0.1566 332.93) 87.1%, oklch(38.95% 0.1510 323.64) 90.3%, oklch(34.78% 0.1420 315.64) 93.5%, oklch(31.25% 0.1328 309.16) 96.8%, oklch(28.74% 0.1268 304.48) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.268 | 0.123 | 289 |
| 2 | 0.425 | 0.073 | 228.7 |
| 3 | 0.681 | 0.146 | 149.5 |
| 4 | 0.85 | 0.174 | 133.6 |
| 5 | 0.846 | 0.113 | 97.7 |
| 6 | 0.673 | 0.123 | 35.4 |
| 7 | 0.453 | 0.157 | -22.8 |
| 8 | 0.287 | 0.127 | -55.5 |

## In these collections

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

## Other forms

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