# Black, purple, gray and blue linear gradient

Black, purple, gray and blue linear gradient with 7 colors: #18131c, #482446, #8f416f, #c78eb1, #d9c7dd, #8c99b2, #32636a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUMg7cvqvEOwNPM7k7Kg`
- Page: https://grabient.com/kUMg7cvqvEOwNPM7k7Kg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, muted
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 11.4 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 | `#18131c` | `oklch(19.69% 0.0193 310.08)` | Back in Black | white, 18.2 to 1 |
| 2 | `#482446` | `oklch(32.21% 0.0748 329.69)` | Opulent Mauve | white, 13 to 1 |
| 3 | `#8f416f` | `oklch(49.21% 0.1199 346.01)` | Purple Peril | white, 6.6 to 1 |
| 4 | `#c78eb1` | `oklch(71.36% 0.0830 342.04)` | Bossy-Pants Pink | black, 7.9 to 1 |
| 5 | `#d9c7dd` | `oklch(85.04% 0.0358 319.59)` | Euphoric Lilac | black, 13.1 to 1 |
| 6 | `#8c99b2` | `oklch(68.18% 0.0395 261.93)` | Blueberry Buckle | black, 7.3 to 1 |
| 7 | `#32636a` | `oklch(46.85% 0.0537 207.57)` | Deep Marine | white, 6.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #18131c 0.0%, #482446 16.7%, #8f416f 33.3%, #c78eb1 50.0%, #d9c7dd 66.7%, #8c99b2 83.3%, #32636a 100.0%);
background: linear-gradient(90deg in oklch, oklch(19.69% 0.0193 310.08) 0.0%, oklch(32.21% 0.0748 329.69) 16.7%, oklch(49.21% 0.1199 346.01) 33.3%, oklch(71.36% 0.0830 342.04) 50.0%, oklch(85.04% 0.0358 319.59) 66.7%, oklch(68.18% 0.0395 261.93) 83.3%, oklch(46.85% 0.0537 207.57) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.197 | 0.019 | 310.1 |
| 2 | 0.492 | 0.12 | 346 |
| 3 | 0.85 | 0.036 | 319.6 |
| 4 | 0.469 | 0.054 | 207.6 |

## In these collections

- [Plum noir](https://grabient.com/plum-noir)

## Other forms

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