# Orange, pink, purple and navy linear gradient

Orange, pink, purple and navy linear gradient with 7 colors: #ff8f51, #f9624c, #dc3a62, #b02b72, #7b2376, #471f64, #221945. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWwXQiUci8sJBvKwszvoB08Y`
- Page: https://grabient.com/kWwXQiUci8sJBvKwszvoB08Y
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 7.1 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 | `#ff8f51` | `oklch(75.98% 0.1554 47.81)` | Boredom Buster | black, 9.2 to 1 |
| 2 | `#f9624c` | `oklch(68.58% 0.1894 30.51)` | Rose Fusion | black, 6.8 to 1 |
| 3 | `#dc3a62` | `oklch(60.19% 0.1985 11.41)` | Azalea | black, 4.8 to 1 |
| 4 | `#b02b72` | `oklch(51.97% 0.1805 352.86)` | Festival Fuchsia | white, 6.1 to 1 |
| 5 | `#7b2376` | `oklch(42.78% 0.1562 330.24)` | Count’s Wardrobe | white, 8.9 to 1 |
| 6 | `#471f64` | `oklch(33.32% 0.1196 307.77)` | Fading Horizon | white, 12.7 to 1 |
| 7 | `#221945` | `oklch(25.20% 0.0799 289.46)` | Prune Plum | white, 16.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ff8f51 0.0%, #f9624c 16.7%, #dc3a62 33.3%, #b02b72 50.0%, #7b2376 66.7%, #471f64 83.3%, #221945 100.0%);
background: linear-gradient(90deg in oklch, oklch(75.98% 0.1554 47.81) 0.0%, oklch(68.58% 0.1894 30.51) 16.7%, oklch(60.19% 0.1985 11.41) 33.3%, oklch(51.97% 0.1805 352.86) 50.0%, oklch(42.78% 0.1562 330.24) 66.7%, oklch(33.32% 0.1196 307.77) 83.3%, oklch(25.20% 0.0799 289.46) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.76 | 0.16 | 47.8 |
| 2 | 0.642 | 0.2 | 20.3 |
| 3 | 0.52 | 0.181 | -7.1 |
| 4 | 0.382 | 0.141 | -41 |
| 5 | 0.252 | 0.08 | -70.5 |

## In these collections

- [Sunset gradients](https://grabient.com/sunset-gradients)

## Other forms

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