# Navy to gray linear gradient

Navy to gray linear gradient with 7 colors: #000d27, #0c0e37, #271f46, #423e55, #5a636a, #76857c, #899f91. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYKjK2GhzCieWQa5Bz2ygezVaLvu`
- Page: https://grabient.com/kYKjK2GhzCieWQa5Bz2ygezVaLvu
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, muted, dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.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 | `#000d27` | `oklch(16.57% 0.0578 256.55)` | Void | white, 19.2 to 1 |
| 2 | `#0c0e37` | `oklch(19.38% 0.0784 274.60)` | Infinite Night | white, 18.5 to 1 |
| 3 | `#271f46` | `oklch(27.08% 0.0694 290.77)` | Black Market | white, 15.3 to 1 |
| 4 | `#423e55` | `oklch(37.82% 0.0388 291.01)` | Artistic Licence | white, 10.1 to 1 |
| 5 | `#5a636a` | `oklch(49.50% 0.0162 241.18)` | Calligraphy | white, 6.1 to 1 |
| 6 | `#76857c` | `oklch(60.23% 0.0221 159.98)` | Limerick | black, 5.4 to 1 |
| 7 | `#899f91` | `oklch(68.11% 0.0317 158.72)` | Mossleaf | black, 7.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #000d27 0.0%, #0c0e37 16.7%, #271f46 33.3%, #423e55 50.0%, #5a636a 66.7%, #76857c 83.3%, #899f91 100.0%);
background: linear-gradient(90deg in oklch, oklch(16.57% 0.0578 256.55) 0.0%, oklch(19.38% 0.0784 274.60) 16.7%, oklch(27.08% 0.0694 290.77) 33.3%, oklch(37.82% 0.0388 291.01) 50.0%, oklch(49.50% 0.0162 241.18) 66.7%, oklch(60.23% 0.0221 159.98) 83.3%, oklch(68.11% 0.0317 158.72) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.165 | 0.069 | 255.9 |
| 2 | 0.205 | 0.079 | 278.1 |
| 3 | 0.311 | 0.061 | 292.9 |
| 4 | 0.449 | 0.019 | 273.9 |
| 5 | 0.583 | 0.021 | 167.2 |
| 6 | 0.681 | 0.032 | 158.7 |

## In these collections

- [Navy swatches](https://grabient.com/navy-swatches)

## Other forms

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