# Black, blue, purple and gray linear gradient

Black, blue, purple and gray linear gradient with 7 colors: #0b1521, #163645, #235c6d, #3c5a81, #6b5985, #b697ab, #f0dde0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUMRW0uJe8D-aSZ0B8eA`
- Page: https://grabient.com/kUMRW0uJe8D-aSZ0B8eA
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light
- Hues: wide
- Contrast of its darkest and lightest colors: 14 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 | `#0b1521` | `oklch(19.29% 0.0289 253.83)` | Creeping Death | white, 18.3 to 1 |
| 2 | `#163645` | `oklch(31.55% 0.0464 232.36)` | Into the Night | white, 12.7 to 1 |
| 3 | `#235c6d` | `oklch(44.49% 0.0648 221.07)` | Legion Blue | white, 7.4 to 1 |
| 4 | `#3c5a81` | `oklch(46.24% 0.0736 255.68)` | Pelagic | white, 7 to 1 |
| 5 | `#6b5985` | `oklch(50.00% 0.0717 302.44)` | Concord Jam | white, 6.1 to 1 |
| 6 | `#b697ab` | `oklch(71.01% 0.0466 339.76)` | Violet Fantasy | black, 7.9 to 1 |
| 7 | `#f0dde0` | `oklch(91.34% 0.0207 6.90)` | Dream State | black, 16.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0b1521 0.0%, #163645 16.7%, #235c6d 33.3%, #3c5a81 50.0%, #6b5985 66.7%, #b697ab 83.3%, #f0dde0 100.0%);
background: linear-gradient(90deg in oklch, oklch(19.29% 0.0289 253.83) 0.0%, oklch(31.55% 0.0464 232.36) 16.7%, oklch(44.49% 0.0648 221.07) 33.3%, oklch(46.24% 0.0736 255.68) 50.0%, oklch(50.00% 0.0717 302.44) 66.7%, oklch(71.01% 0.0466 339.76) 83.3%, oklch(91.34% 0.0207 6.90) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.193 | 0.029 | 253.8 |
| 2 | 0.445 | 0.065 | 221.1 |
| 3 | 0.5 | 0.072 | 302.4 |
| 4 | 0.913 | 0.021 | 366.9 |

## In these collections

- [Extra celestial](https://grabient.com/extra-celestial)

## Other forms

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