# Black, purple and pink linear gradient

Black, purple and pink linear gradient with 7 colors: #0f252a, #1d4449, #2d4e67, #553b62, #823b68, #b24c6c, #d96c74. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWPxWZM5M_zKaS7AL0S1DHCo`
- Page: https://grabient.com/kWPxWZM5M_zKaS7AL0S1DHCo
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.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 | `#0f252a` | `oklch(24.80% 0.0289 215.16)` | Sunken Ship | white, 15.9 to 1 |
| 2 | `#1d4449` | `oklch(35.94% 0.0440 207.05)` | Emerald Forest | white, 10.6 to 1 |
| 3 | `#2d4e67` | `oklch(41.09% 0.0577 241.97)` | Singing the Blues | white, 8.7 to 1 |
| 4 | `#553b62` | `oklch(39.76% 0.0717 313.43)` | Purpurite Violet | white, 9.6 to 1 |
| 5 | `#823b68` | `oklch(46.05% 0.1126 343.65)` | Midnight Aubergine | white, 7.5 to 1 |
| 6 | `#b24c6c` | `oklch(55.85% 0.1359 3.45)` | Lickedy Lick | white, 5 to 1 |
| 7 | `#d96c74` | `oklch(66.14% 0.1364 16.84)` | Kiss and Tell | black, 6.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0f252a 0.0%, #1d4449 16.7%, #2d4e67 33.3%, #553b62 50.0%, #823b68 66.7%, #b24c6c 83.3%, #d96c74 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.80% 0.0289 215.16) 0.0%, oklch(35.94% 0.0440 207.05) 16.7%, oklch(41.09% 0.0577 241.97) 33.3%, oklch(39.76% 0.0717 313.43) 50.0%, oklch(46.05% 0.1126 343.65) 66.7%, oklch(55.85% 0.1359 3.45) 83.3%, oklch(66.14% 0.1364 16.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.248 | 0.029 | 215.2 |
| 2 | 0.406 | 0.052 | 214.1 |
| 3 | 0.398 | 0.072 | 313.4 |
| 4 | 0.504 | 0.13 | 353.6 |
| 5 | 0.661 | 0.136 | 376.8 |

## In these collections

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

## Other forms

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