# Black, purple, magenta and orange linear gradient

Black, purple, magenta and orange linear gradient with 9 colors: #120d1f, #1d1330, #2e1a47, #3c2058, #5c2a6b, #b63a6b, #ff6a13, #ff9d2f, #ffb347. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kGRINH0uGkcVwqax_2oTH_s0c`
- Page: https://grabient.com/kGRINH0uGkcVwqax_2oTH_s0c?steps=9&angle=180
- Drawn as: linear gradient, 9 steps, 180 degrees
- Kinds: dark to light
- Hues: wide
- Contrast of its darkest and lightest colors: 10.6 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 | `#120d1f` | `oklch(17.60% 0.0368 295.14)` | Tristesse | white, 19 to 1 |
| 2 | `#1d1330` | `oklch(21.57% 0.0570 297.39)` | Blacklist | white, 17.7 to 1 |
| 3 | `#2e1a47` | `oklch(26.97% 0.0818 301.66)` | Russian Violet | white, 15.4 to 1 |
| 4 | `#3c2058` | `oklch(31.21% 0.0975 304.78)` | Stormy Night | white, 13.5 to 1 |
| 5 | `#5c2a6b` | `oklch(38.27% 0.1179 317.81)` | Imperial | white, 10.5 to 1 |
| 6 | `#b63a6b` | `oklch(54.16% 0.1642 359.97)` | Fiery Fuchsia | white, 5.5 to 1 |
| 7 | `#ff6a13` | `oklch(70.13% 0.1996 43.67)` | Spooky Tangerine | black, 7.3 to 1 |
| 8 | `#ff9d2f` | `oklch(78.10% 0.1628 63.26)` | Blazing Bonfire | black, 10.1 to 1 |
| 9 | `#ffb347` | `oklch(82.08% 0.1486 72.10)` | Agrellan Badland | black, 11.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #120d1f 0.0%, #1d1330 12.5%, #2e1a47 25.0%, #3c2058 37.5%, #5c2a6b 50.0%, #b63a6b 62.5%, #ff6a13 75.0%, #ff9d2f 87.5%, #ffb347 100.0%);
background: linear-gradient(180deg in oklch, oklch(17.60% 0.0368 295.14) 0.0%, oklch(21.57% 0.0570 297.39) 12.5%, oklch(26.97% 0.0818 301.66) 25.0%, oklch(31.21% 0.0975 304.78) 37.5%, oklch(38.27% 0.1179 317.81) 50.0%, oklch(54.16% 0.1642 359.97) 62.5%, oklch(70.13% 0.1996 43.67) 75.0%, oklch(78.10% 0.1628 63.26) 87.5%, oklch(82.08% 0.1486 72.10) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.176 | 0.037 | 295.1 |
| 2 | 0.27 | 0.082 | 301.7 |
| 3 | 0.383 | 0.118 | 317.8 |
| 4 | 0.701 | 0.2 | 403.7 |
| 5 | 0.821 | 0.149 | 432.1 |

## Other forms

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