# Rainbow from purple to navy linear gradient

Rainbow from purple to navy linear gradient with 7 colors: #17002c, #7e46c2, #dfc054, #ffffff, #76be5a, #2048b5, #010040. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA`
- Page: https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA
- Drawn as: linear gradient, 7 steps, 90 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 | `#7e46c2` | `oklch(52.36% 0.1860 301.28)` | Purple Rain | white, 5.9 to 1 |
| 3 | `#dfc054` | `oklch(81.50% 0.1309 93.46)` | Cream Gold | black, 11.8 to 1 |
| 4 | `#ffffff` | `oklch(100.00% 0.0001 110.42)` | White | black, 20.9 to 1 |
| 5 | `#76be5a` | `oklch(73.23% 0.1530 137.84)` | Green Pear | black, 9.3 to 1 |
| 6 | `#2048b5` | `oklch(44.49% 0.1791 264.65)` | Denim | white, 7.9 to 1 |
| 7 | `#010040` | `oklch(17.00% 0.1159 265.72)` | Endless Galaxy | white, 19.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #17002c 0.0%, #7e46c2 16.7%, #dfc054 33.3%, #ffffff 50.0%, #76be5a 66.7%, #2048b5 83.3%, #010040 100.0%);
background: linear-gradient(90deg in oklch, oklch(16.61% 0.0866 304.26) 0.0%, oklch(52.36% 0.1860 301.28) 16.7%, oklch(81.50% 0.1309 93.46) 33.3%, oklch(100.00% 0.0001 110.42) 50.0%, oklch(73.23% 0.1530 137.84) 66.7%, oklch(44.49% 0.1791 264.65) 83.3%, 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)
- [PNG](https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA.png)
- [SVG](https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA.svg)
- [CSS](https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA.css)
- [ASE](https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA.ase)
- [GPL](https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA.gpl)
- [GRD](https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA.grd)
- [Design tokens](https://grabient.com/kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA.tokens.json)
- [Social card](https://grabient.com/api/og?seed=kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA)
- [Palettes like this one](https://grabient.com/palettes?q=kaKlDYwsO_mev0f_JcK3TfCbjBTuVrsAA)
- [Guide for agents](https://grabient.com/llms.txt)