# Rainbow from navy to pink linear gradient

Rainbow from navy to pink linear gradient with 7 colors: #2d066b, #04062c, #00324c, #00aeae, #59d548, #ffbb97, #ebe2ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWR23OFJY71bMONlxTVdhYsY`
- Page: https://grabient.com/kWR23OFJY71bMONlxTVdhYsY
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, rainbow
- Hues: wide
- Contrast of its darkest and lightest colors: 15.7 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 | `#2d066b` | `oklch(27.95% 0.1502 289.69)` | Infinite Inkwell | white, 15.5 to 1 |
| 2 | `#04062c` | `oklch(15.79% 0.0761 269.61)` | Mysterious Depths | white, 19.6 to 1 |
| 3 | `#00324c` | `oklch(30.24% 0.0669 237.83)` | Cosmos Blue | white, 13.4 to 1 |
| 4 | `#00aeae` | `oklch(68.11% 0.1163 194.58)` | Greenland Green | black, 7.7 to 1 |
| 5 | `#59d548` | `oklch(77.38% 0.2110 141.35)` | Verdant Fields | black, 11 to 1 |
| 6 | `#ffbb97` | `oklch(84.64% 0.0929 49.26)` | Cream Puff | black, 12.8 to 1 |
| 7 | `#ebe2ff` | `oklch(92.91% 0.0398 299.91)` | Lavender Savour | black, 16.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2d066b 0.0%, #04062c 16.7%, #00324c 33.3%, #00aeae 50.0%, #59d548 66.7%, #ffbb97 83.3%, #ebe2ff 100.0%);
background: linear-gradient(90deg in oklch, oklch(27.95% 0.1502 289.69) 0.0%, oklch(15.79% 0.0761 269.61) 16.7%, oklch(30.24% 0.0669 237.83) 33.3%, oklch(68.11% 0.1163 194.58) 50.0%, oklch(77.38% 0.2110 141.35) 66.7%, oklch(84.64% 0.0929 49.26) 83.3%, oklch(92.91% 0.0398 299.91) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.15 | 289.7 |
| 2 | 0.161 | 0.061 | 254.8 |
| 3 | 0.681 | 0.209 | 194.6 |
| 4 | 0.799 | 0.19 | 104.8 |
| 5 | 0.929 | 0.061 | -60.1 |

## In these collections

- [Neon swatches](https://grabient.com/neon-swatches)
- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)
- [Y2K swatches](https://grabient.com/y2k-swatches)

## Other forms

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