# Navy, purple and gray linear gradient

Navy, purple and gray linear gradient with 7 colors: #171b22, #1f365b, #3154a0, #5753b1, #8c54a5, #d49194, #e8d9c8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUOAu6Oq9AMUxRfxis3A`
- Page: https://grabient.com/kUOAu6Oq9AMUxRfxis3A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.5 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 | `#171b22` | `oklch(22.05% 0.0152 261.56)` | Coarse Wool | white, 17.2 to 1 |
| 2 | `#1f365b` | `oklch(33.54% 0.0720 259.45)` | Navy Peony | white, 12 to 1 |
| 3 | `#3154a0` | `oklch(46.06% 0.1295 263.68)` | Dazzling Blue | white, 7.2 to 1 |
| 4 | `#5753b1` | `oklch(49.51% 0.1461 281.84)` | Brandywine Raspberry | white, 6.4 to 1 |
| 5 | `#8c54a5` | `oklch(54.33% 0.1350 314.40)` | Vicious Violet | white, 5.3 to 1 |
| 6 | `#d49194` | `oklch(72.37% 0.0823 16.22)` | Pink Clay Pot | black, 8.2 to 1 |
| 7 | `#e8d9c8` | `oklch(89.37% 0.0289 71.70)` | Siesta Tan | black, 15.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #171b22 0.0%, #1f365b 16.7%, #3154a0 33.3%, #5753b1 50.0%, #8c54a5 66.7%, #d49194 83.3%, #e8d9c8 100.0%);
background: linear-gradient(90deg in oklch, oklch(22.05% 0.0152 261.56) 0.0%, oklch(33.54% 0.0720 259.45) 16.7%, oklch(46.06% 0.1295 263.68) 33.3%, oklch(49.51% 0.1461 281.84) 50.0%, oklch(54.33% 0.1350 314.40) 66.7%, oklch(72.37% 0.0823 16.22) 83.3%, oklch(89.37% 0.0289 71.70) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.015 | 261.6 |
| 2 | 0.461 | 0.13 | 263.7 |
| 3 | 0.543 | 0.135 | 314.4 |
| 4 | 0.894 | 0.029 | 431.7 |

## In these collections

- [Stained glass colors](https://grabient.com/stained-glass-colors)

## Other forms

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