# Vivid orange, pink, purple and blue linear gradient

Vivid orange, pink, purple and blue linear gradient with 6 colors: #ff9347, #ff726a, #f143a2, #c739c3, #6c43c2, #335dce. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kIf-TR3_cmofFDohxznDFsQ8ITNdzg`
- Page: https://grabient.com/kIf-TR3_cmofFDohxznDFsQ8ITNdzg?steps=6&angle=0
- Drawn as: linear gradient, 6 steps, 0 degrees
- Kinds: vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 2.9 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 | `#ff9347` | `oklch(76.53% 0.1575 52.90)` | Pastel Orange | black, 9.5 to 1 |
| 2 | `#ff726a` | `oklch(72.06% 0.1737 25.62)` | Flirty Salmon | black, 7.8 to 1 |
| 3 | `#f143a2` | `oklch(66.24% 0.2251 351.64)` | Major Magenta | black, 6 to 1 |
| 4 | `#c739c3` | `oklch(60.54% 0.2308 329.19)` | Purple Pink | black, 4.8 to 1 |
| 5 | `#6c43c2` | `oklch(50.07% 0.1881 293.25)` | Purple Rain | white, 6.5 to 1 |
| 6 | `#335dce` | `oklch(51.56% 0.1814 265.12)` | Bnei Brak Bay | white, 5.8 to 1 |

## CSS

```css
background: linear-gradient(0deg, #ff9347 0.0%, #ff726a 20.0%, #f143a2 40.0%, #c739c3 60.0%, #6c43c2 80.0%, #335dce 100.0%);
background: linear-gradient(0deg in oklch, oklch(76.53% 0.1575 52.90) 0.0%, oklch(72.06% 0.1737 25.62) 20.0%, oklch(66.24% 0.2251 351.64) 40.0%, oklch(60.54% 0.2308 329.19) 60.0%, oklch(50.07% 0.1881 293.25) 80.0%, oklch(51.56% 0.1814 265.12) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.765 | 0.157 | 52.9 |
| 2 | 0.721 | 0.174 | 25.6 |
| 3 | 0.662 | 0.225 | -8.4 |
| 4 | 0.605 | 0.231 | -30.8 |
| 5 | 0.501 | 0.188 | -66.8 |
| 6 | 0.516 | 0.181 | -94.9 |

## In these collections

- [GTA 6 gradients](https://grabient.com/gta-6-gradients)

## Other forms

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