# Monochrome navy to gray linear gradient

Monochrome navy to gray linear gradient with 7 colors: #161e35, #202f55, #2c4a72, #456c83, #7f9b9d, #aabdad, #d5c69e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kGRYeNUmPGcUVsgxmq-qHVxp4`
- Page: https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, muted, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 9.7 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 | `#161e35` | `oklch(24.00% 0.0458 268.31)` | Sombre Night | white, 16.5 to 1 |
| 2 | `#202f55` | `oklch(31.39% 0.0714 266.30)` | Elite Blue | white, 13 to 1 |
| 3 | `#2c4a72` | `oklch(40.62% 0.0769 256.16)` | Enchanted Navy | white, 8.9 to 1 |
| 4 | `#456c83` | `oklch(51.16% 0.0572 235.36)` | Eames for Blue | white, 5.6 to 1 |
| 5 | `#7f9b9d` | `oklch(66.85% 0.0309 201.82)` | Salt Blue | black, 7 to 1 |
| 6 | `#aabdad` | `oklch(78.04% 0.0313 148.96)` | Rockfall | black, 10.6 to 1 |
| 7 | `#d5c69e` | `oklch(82.89% 0.0559 89.92)` | Pale Olive | black, 12.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #161e35 0.0%, #202f55 16.7%, #2c4a72 33.3%, #456c83 50.0%, #7f9b9d 66.7%, #aabdad 83.3%, #d5c69e 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.00% 0.0458 268.31) 0.0%, oklch(31.39% 0.0714 266.30) 16.7%, oklch(40.62% 0.0769 256.16) 33.3%, oklch(51.16% 0.0572 235.36) 50.0%, oklch(66.85% 0.0309 201.82) 66.7%, oklch(78.04% 0.0313 148.96) 83.3%, oklch(82.89% 0.0559 89.92) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.046 | 268.3 |
| 2 | 0.361 | 0.08 | 262.6 |
| 3 | 0.512 | 0.057 | 235.4 |
| 4 | 0.736 | 0.024 | 179.7 |
| 5 | 0.829 | 0.056 | 89.9 |

## In these collections

- [Color, Slightly Off](https://grabient.com/colour-slightly-off)

## Other forms

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