# Vivid duotone pink to yellow linear gradient

Vivid duotone pink to yellow linear gradient with 7 colors: #dc5169, #eb6670, #f5806e, #f69b69, #f5b65d, #eece5d, #e8dd62. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWn34J2blBGIuQxqsEQ8DRCI`
- Page: https://grabient.com/kWn34J2blBGIuQxqsEQ8DRCI
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 2.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 | `#dc5169` | `oklch(62.60% 0.1736 13.36)` | Cranberry Splash | black, 5.4 to 1 |
| 2 | `#eb6670` | `oklch(67.64% 0.1642 18.10)` | Purehearted | black, 6.6 to 1 |
| 3 | `#f5806e` | `oklch(72.79% 0.1467 30.07)` | Smoked Salmon | black, 8.2 to 1 |
| 4 | `#f69b69` | `oklch(77.17% 0.1268 49.29)` | Burning Coals | black, 9.8 to 1 |
| 5 | `#f5b65d` | `oklch(81.80% 0.1287 74.14)` | Crunch | black, 11.7 to 1 |
| 6 | `#eece5d` | `oklch(85.64% 0.1360 93.52)` | Vault-Tec Yellow | black, 13.5 to 1 |
| 7 | `#e8dd62` | `oklch(88.19% 0.1433 104.24)` | Fandangle | black, 14.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #dc5169 0.0%, #eb6670 16.7%, #f5806e 33.3%, #f69b69 50.0%, #f5b65d 66.7%, #eece5d 83.3%, #e8dd62 100.0%);
background: linear-gradient(90deg in oklch, oklch(62.60% 0.1736 13.36) 0.0%, oklch(67.64% 0.1642 18.10) 16.7%, oklch(72.79% 0.1467 30.07) 33.3%, oklch(77.17% 0.1268 49.29) 50.0%, oklch(81.80% 0.1287 74.14) 66.7%, oklch(85.64% 0.1360 93.52) 83.3%, oklch(88.19% 0.1433 104.24) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.626 | 0.174 | 13.4 |
| 2 | 0.705 | 0.157 | 22.9 |
| 3 | 0.772 | 0.127 | 49.3 |
| 4 | 0.839 | 0.132 | 85.2 |
| 5 | 0.882 | 0.143 | 104.2 |

## In these collections

- [Spring gradients](https://grabient.com/spring-gradients)

## Other forms

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