# Rainbow from navy to light blue linear gradient

Rainbow from navy to light blue linear gradient with 7 colors: #040b25, #262065, #7b35ab, #c254c6, #fd7c42, #3ee2c3, #b8fced. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYKSi8qi9CUZIxBXwcN5bbUveZwa`
- Page: https://grabient.com/kYKSi8qi9CUZIxBXwcN5bbUveZwa
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, vivid, rainbow
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 16.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 | `#040b25` | `oklch(16.14% 0.0551 265.08)` | Void | white, 19.4 to 1 |
| 2 | `#262065` | `oklch(29.76% 0.1165 280.72)` | Intergalactic Cowboy | white, 14.2 to 1 |
| 3 | `#7b35ab` | `oklch(48.19% 0.1832 308.25)` | Shredder Lavender | white, 7.1 to 1 |
| 4 | `#c254c6` | `oklch(62.70% 0.1964 326.04)` | Unloaded Texture Purple | black, 5.3 to 1 |
| 5 | `#fd7c42` | `oklch(72.66% 0.1731 43.24)` | Sagittarius Amber Artefact | black, 8.1 to 1 |
| 6 | `#3ee2c3` | `oklch(82.27% 0.1388 176.97)` | Celestial Green | black, 12.8 to 1 |
| 7 | `#b8fced` | `oklch(94.09% 0.0703 179.83)` | Summer Cloud | black, 18.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #040b25 0.0%, #262065 16.7%, #7b35ab 33.3%, #c254c6 50.0%, #fd7c42 66.7%, #3ee2c3 83.3%, #b8fced 100.0%);
background: linear-gradient(90deg in oklch, oklch(16.14% 0.0551 265.08) 0.0%, oklch(29.76% 0.1165 280.72) 16.7%, oklch(48.19% 0.1832 308.25) 33.3%, oklch(62.70% 0.1964 326.04) 50.0%, oklch(72.66% 0.1731 43.24) 66.7%, oklch(82.27% 0.1388 176.97) 83.3%, oklch(94.09% 0.0703 179.83) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.161 | 0.055 | 265.1 |
| 2 | 0.331 | 0.13 | 285.2 |
| 3 | 0.551 | 0.2 | 320 |
| 4 | 0.689 | 0.181 | 349.6 |
| 5 | 0.799 | 0.15 | 525 |
| 6 | 0.941 | 0.07 | 539.8 |

## In these collections

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

## Other forms

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