# Vivid duotone pink to yellow linear gradient

Vivid duotone pink to yellow linear gradient with 7 colors: #f659da, #f44cc8, #f95bb0, #ff818f, #ffac7c, #fecc64, #ffd25b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYtavu19XAttFQdkLURba_FXA2wO`
- Page: https://grabient.com/kYtavu19XAttFQdkLURba_FXA2wO
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, warm
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.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 | `#f659da` | `oklch(71.26% 0.2356 335.39)` | Purple Pizzazz | black, 7.3 to 1 |
| 2 | `#f44cc8` | `oklch(69.02% 0.2383 340.05)` | Kinky Pinky | black, 6.7 to 1 |
| 3 | `#f95bb0` | `oklch(70.22% 0.2085 350.38)` | Pink Katydid | black, 7.1 to 1 |
| 4 | `#ff818f` | `oklch(74.90% 0.1536 14.23)` | Camaron Pink | black, 8.7 to 1 |
| 5 | `#ffac7c` | `oklch(81.41% 0.1169 50.46)` | Larch Bolete | black, 11.4 to 1 |
| 6 | `#fecc64` | `oklch(86.89% 0.1336 83.66)` | Qing Yellow | black, 14 to 1 |
| 7 | `#ffd25b` | `oklch(88.19% 0.1440 88.47)` | Glowing Reviews | black, 14.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f659da 0.0%, #f44cc8 16.7%, #f95bb0 33.3%, #ff818f 50.0%, #ffac7c 66.7%, #fecc64 83.3%, #ffd25b 100.0%);
background: linear-gradient(90deg in oklch, oklch(71.26% 0.2356 335.39) 0.0%, oklch(69.02% 0.2383 340.05) 16.7%, oklch(70.22% 0.2085 350.38) 33.3%, oklch(74.90% 0.1536 14.23) 50.0%, oklch(81.41% 0.1169 50.46) 66.7%, oklch(86.89% 0.1336 83.66) 83.3%, oklch(88.19% 0.1440 88.47) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.713 | 0.236 | 335.4 |
| 2 | 0.689 | 0.236 | 341.7 |
| 3 | 0.717 | 0.19 | 357.6 |
| 4 | 0.787 | 0.124 | 394.6 |
| 5 | 0.862 | 0.131 | 440 |
| 6 | 0.882 | 0.15 | 448.5 |

## In these collections

- [Warm gradients](https://grabient.com/warm-gradients)

## Other forms

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