# Navy, pink, orange and purple linear gradient

Navy, pink, orange and purple linear gradient with 7 colors: #17152b, #9e2c89, #ff5770, #ff7a56, #ffbe4b, #ff855a, #6939b9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWNR_L0NRI1y-xBrtsUPMUu4`
- Page: https://grabient.com/kWNR_L0NRI1y-xBrtsUPMUu4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 10.8 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 | `#17152b` | `oklch(20.87% 0.0427 286.17)` | Sambucus | white, 17.8 to 1 |
| 2 | `#9e2c89` | `oklch(50.09% 0.1800 336.39)` | Warm Purple | white, 6.6 to 1 |
| 3 | `#ff5770` | `oklch(68.90% 0.2032 15.49)` | Fiery Rose | black, 6.8 to 1 |
| 4 | `#ff7a56` | `oklch(72.83% 0.1707 36.08)` | Rinsed-Out Red | black, 8.1 to 1 |
| 5 | `#ffbe4b` | `oklch(84.24% 0.1473 78.51)` | Twenty Carat | black, 12.7 to 1 |
| 6 | `#ff855a` | `oklch(74.55% 0.1595 40.03)` | Nectarine | black, 8.7 to 1 |
| 7 | `#6939b9` | `oklch(47.64% 0.1902 295.68)` | Purple Emperor | white, 7.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #17152b 0.0%, #9e2c89 16.7%, #ff5770 33.3%, #ff7a56 50.0%, #ffbe4b 66.7%, #ff855a 83.3%, #6939b9 100.0%);
background: linear-gradient(90deg in oklch, oklch(20.87% 0.0427 286.17) 0.0%, oklch(50.09% 0.1800 336.39) 16.7%, oklch(68.90% 0.2032 15.49) 33.3%, oklch(72.83% 0.1707 36.08) 50.0%, oklch(84.24% 0.1473 78.51) 66.7%, oklch(74.55% 0.1595 40.03) 83.3%, oklch(47.64% 0.1902 295.68) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.043 | 286.2 |
| 2 | 0.634 | 0.231 | 361.2 |
| 3 | 0.728 | 0.172 | 396.1 |
| 4 | 0.846 | 0.15 | 439.4 |
| 5 | 0.476 | 0.19 | 295.7 |

## In these collections

- [Equinox twilight horizon](https://grabient.com/equinox-twilight-horizon)
- [Locker sticker collage](https://grabient.com/locker-sticker-collage)

## Other forms

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