# Tan, red, purple and navy linear gradient

Tan, red, purple and navy linear gradient with 7 colors: #f9d380, #c1542c, #6f0038, #40004e, #240050, #0c0a42, #000f30. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `ka4FA8yba6iy9uyitrsnS885mkvYXGb4g`
- Page: https://grabient.com/ka4FA8yba6iy9uyitrsnS885mkvYXGb4g
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, vivid, dark
- Hues: wide
- Contrast of its darkest and lightest colors: 13.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 | `#f9d380` | `oklch(88.19% 0.1102 85.08)` | Pixel Cream | black, 14.6 to 1 |
| 2 | `#c1542c` | `oklch(57.87% 0.1502 39.64)` | Raucous Orange | white, 4.5 to 1 |
| 3 | `#6f0038` | `oklch(35.06% 0.1423 359.52)` | Merlot | white, 12.1 to 1 |
| 4 | `#40004e` | `oklch(27.20% 0.1310 319.30)` | Ripe Plum | white, 15.8 to 1 |
| 5 | `#240050` | `oklch(22.88% 0.1264 293.89)` | Crowberry | white, 17.6 to 1 |
| 6 | `#0c0a42` | `oklch(20.08% 0.1006 273.88)` | Deep Cove | white, 18.4 to 1 |
| 7 | `#000f30` | `oklch(18.11% 0.0703 259.09)` | Squid’s Ink | white, 18.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f9d380 0.0%, #c1542c 16.7%, #6f0038 33.3%, #40004e 50.0%, #240050 66.7%, #0c0a42 83.3%, #000f30 100.0%);
background: linear-gradient(90deg in oklch, oklch(88.19% 0.1102 85.08) 0.0%, oklch(57.87% 0.1502 39.64) 16.7%, oklch(35.06% 0.1423 359.52) 33.3%, oklch(27.20% 0.1310 319.30) 50.0%, oklch(22.88% 0.1264 293.89) 66.7%, oklch(20.08% 0.1006 273.88) 83.3%, oklch(18.11% 0.0703 259.09) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.882 | 0.11 | 85.1 |
| 2 | 0.579 | 0.15 | 39.6 |
| 3 | 0.35 | 0.169 | -0.5 |
| 4 | 0.272 | 0.15 | -40.7 |
| 5 | 0.228 | 0.13 | -66 |
| 6 | 0.201 | 0.101 | -86.1 |
| 7 | 0.181 | 0.07 | -100.9 |

## In these collections

- [Sunset gradients](https://grabient.com/sunset-gradients)

## Other forms

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