# Analogous black, purple, red and gray linear gradient

Analogous black, purple, red and gray linear gradient with 7 colors: #12151b, #2c3033, #474165, #9c2347, #da313d, #e385cb, #d9dce0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWMgm8Lge_Ts5TPTR0A8YKyQ`
- Page: https://grabient.com/kWMgm8Lge_Ts5TPTR0A8YKyQ
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.2 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 | `#12151b` | `oklch(19.69% 0.0124 264.37)` | Kuroi Black | white, 18.2 to 1 |
| 2 | `#2c3033` | `oklch(30.56% 0.0081 252.52)` | Cod Grey | white, 13.3 to 1 |
| 3 | `#474165` | `oklch(39.78% 0.0603 291.19)` | Evening Mauve | white, 9.4 to 1 |
| 4 | `#9c2347` | `oklch(46.46% 0.1571 8.99)` | Vampirella | white, 7.6 to 1 |
| 5 | `#da313d` | `oklch(58.36% 0.2033 23.08)` | Safflower Red | white, 4.6 to 1 |
| 6 | `#e385cb` | `oklch(73.87% 0.1426 337.13)` | Blushed Bombshell | black, 8.4 to 1 |
| 7 | `#d9dce0` | `oklch(89.37% 0.0069 255.92)` | Snow Tiger | black, 15.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #12151b 0.0%, #2c3033 16.7%, #474165 33.3%, #9c2347 50.0%, #da313d 66.7%, #e385cb 83.3%, #d9dce0 100.0%);
background: linear-gradient(90deg in oklch, oklch(19.69% 0.0124 264.37) 0.0%, oklch(30.56% 0.0081 252.52) 16.7%, oklch(39.78% 0.0603 291.19) 33.3%, oklch(46.46% 0.1571 8.99) 50.0%, oklch(58.36% 0.2033 23.08) 66.7%, oklch(73.87% 0.1426 337.13) 83.3%, oklch(89.37% 0.0069 255.92) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.197 | 0.012 | 264.4 |
| 2 | 0.362 | 0.021 | 259.1 |
| 3 | 0.465 | 0.157 | 369 |
| 4 | 0.654 | 0.196 | 371.1 |
| 5 | 0.894 | 0.007 | 255.9 |

## In these collections

- [Bedazzled](https://grabient.com/bedazzled)

## Other forms

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