# Warm maroon, pink, red and brown linear gradient

Warm maroon, pink, red and brown linear gradient with 7 colors: #630121, #da559c, #9f8552, #ad7112, #9f1f29, #3b2116, #de89a9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYUVwI1sG98qQzbJyLUHpDDVyoOc`
- Page: https://grabient.com/kYUVwI1sG98qQzbJyLUHpDDVyoOc
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 5.8 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 | `#630121` | `oklch(31.89% 0.1268 11.95)` | Merguez | white, 13.5 to 1 |
| 2 | `#da559c` | `oklch(64.30% 0.1819 350.35)` | Bit of Berry | black, 5.7 to 1 |
| 3 | `#9f8552` | `oklch(62.86% 0.0760 83.03)` | Wheatmeal | black, 5.9 to 1 |
| 4 | `#ad7112` | `oklch(59.79% 0.1238 70.80)` | Caramel | black, 5.1 to 1 |
| 5 | `#9f1f29` | `oklch(45.98% 0.1631 22.91)` | Cut Ruby | white, 7.7 to 1 |
| 6 | `#3b2116` | `oklch(27.93% 0.0443 43.30)` | Brown Pod | white, 14.8 to 1 |
| 7 | `#de89a9` | `oklch(72.83% 0.1102 356.10)` | Vivacious Pink | black, 8.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #630121 0.0%, #da559c 16.7%, #9f8552 33.3%, #ad7112 50.0%, #9f1f29 66.7%, #3b2116 83.3%, #de89a9 100.0%);
background: linear-gradient(90deg in oklch, oklch(31.89% 0.1268 11.95) 0.0%, oklch(64.30% 0.1819 350.35) 16.7%, oklch(62.86% 0.0760 83.03) 33.3%, oklch(59.79% 0.1238 70.80) 50.0%, oklch(45.98% 0.1631 22.91) 66.7%, oklch(27.93% 0.0443 43.30) 83.3%, oklch(72.83% 0.1102 356.10) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.127 | 12 |
| 2 | 0.681 | 0.181 | -5 |
| 3 | 0.587 | 0.045 | 111.3 |
| 4 | 0.579 | 0.2 | 19.4 |
| 5 | 0.24 | 0.045 | 47.9 |
| 6 | 0.728 | 0.11 | -3.9 |

## In these collections

- [Red and green swatches](https://grabient.com/red-and-green-swatches)

## Other forms

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