# Muted rainbow from pink to orange linear gradient

Muted rainbow from pink to orange linear gradient with 7 colors: #df7172, #a37cc1, #84aacc, #bbdcdd, #b8e693, #f6bb22, #f09b40. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWrGQPVCCzG6Mt1suTSYLS7Q`
- Page: https://grabient.com/kWrGQPVCCzG6Mt1suTSYLS7Q
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: rainbow
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.3 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 | `#df7172` | `oklch(67.72% 0.1378 21.09)` | Lantana | black, 6.7 to 1 |
| 2 | `#a37cc1` | `oklch(65.06% 0.1079 309.90)` | Wisteria | black, 6.2 to 1 |
| 3 | `#84aacc` | `oklch(72.27% 0.0651 246.14)` | Cotton Wool Blue | black, 8.6 to 1 |
| 4 | `#bbdcdd` | `oklch(87.01% 0.0344 199.33)` | Mech Suit | black, 14.3 to 1 |
| 5 | `#b8e693` | `oklch(87.37% 0.1196 131.86)` | Oxalis | black, 14.8 to 1 |
| 6 | `#f6bb22` | `oklch(82.52% 0.1625 84.46)` | Glistening Dawn | black, 12.1 to 1 |
| 7 | `#f09b40` | `oklch(75.98% 0.1447 64.07)` | Amber Glow | black, 9.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #df7172 0.0%, #a37cc1 16.7%, #84aacc 33.3%, #bbdcdd 50.0%, #b8e693 66.7%, #f6bb22 83.3%, #f09b40 100.0%);
background: linear-gradient(90deg in oklch, oklch(67.72% 0.1378 21.09) 0.0%, oklch(65.06% 0.1079 309.90) 16.7%, oklch(72.27% 0.0651 246.14) 33.3%, oklch(87.01% 0.0344 199.33) 50.0%, oklch(87.37% 0.1196 131.86) 66.7%, oklch(82.52% 0.1625 84.46) 83.3%, oklch(75.98% 0.1447 64.07) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.677 | 0.138 | 21.1 |
| 2 | 0.661 | 0.09 | -87.8 |
| 3 | 0.87 | 0.034 | -160.7 |
| 4 | 0.854 | 0.157 | -256.8 |
| 5 | 0.76 | 0.145 | -295.9 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)
- [Summer swatches](https://grabient.com/summer-swatches)

## Other forms

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