# Monochrome navy to gray linear gradient

Monochrome navy to gray linear gradient with 9 colors: #161e35, #1d2a4b, #263c67, #315277, #456c83, #6f8f95, #9aafaa, #b4c2a9, #d5c69e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kGRYeNUmPGcUVsgxmq-qHVxp4`
- Page: https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4?steps=9&angle=110
- Drawn as: linear gradient, 9 steps, 110 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 | `#1d2a4b` | `oklch(29.10% 0.0642 267.15)` | Rurikon Blue | white, 14.1 to 1 |
| 3 | `#263c67` | `oklch(36.09% 0.0798 262.59)` | Blue Depths | white, 10.9 to 1 |
| 4 | `#315277` | `oklch(42.98% 0.0727 252.10)` | Aerostatics | white, 8 to 1 |
| 5 | `#456c83` | `oklch(51.16% 0.0572 235.36)` | Eames for Blue | white, 5.6 to 1 |
| 6 | `#6f8f95` | `oklch(62.76% 0.0374 211.43)` | Baritone | black, 6 to 1 |
| 7 | `#9aafaa` | `oklch(73.64% 0.0244 179.68)` | 5-Masted Preußen | black, 9 to 1 |
| 8 | `#b4c2a9` | `oklch(79.67% 0.0381 131.32)` | Desolace Dew | black, 11.2 to 1 |
| 9 | `#d5c69e` | `oklch(82.89% 0.0559 89.92)` | Pale Olive | black, 12.4 to 1 |

## CSS

```css
background: linear-gradient(110deg, #161e35 0.0%, #1d2a4b 12.5%, #263c67 25.0%, #315277 37.5%, #456c83 50.0%, #6f8f95 62.5%, #9aafaa 75.0%, #b4c2a9 87.5%, #d5c69e 100.0%);
background: linear-gradient(110deg in oklch, oklch(24.00% 0.0458 268.31) 0.0%, oklch(29.10% 0.0642 267.15) 12.5%, oklch(36.09% 0.0798 262.59) 25.0%, oklch(42.98% 0.0727 252.10) 37.5%, oklch(51.16% 0.0572 235.36) 50.0%, oklch(62.76% 0.0374 211.43) 62.5%, oklch(73.64% 0.0244 179.68) 75.0%, oklch(79.67% 0.0381 131.32) 87.5%, 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?steps=9&angle=110)
- [PNG](https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4.png?steps=9&angle=110)
- [SVG](https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4.svg?steps=9&angle=110)
- [CSS](https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4.css?steps=9&angle=110)
- [ASE](https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4.ase?steps=9&angle=110)
- [GPL](https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4.gpl?steps=9&angle=110)
- [GRD](https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4.grd?steps=9&angle=110)
- [Design tokens](https://grabient.com/kGRYeNUmPGcUVsgxmq-qHVxp4.tokens.json?steps=9&angle=110)
- [Social card](https://grabient.com/api/og?seed=kGRYeNUmPGcUVsgxmq-qHVxp4&steps=9&angle=110)
- [Palettes like this one](https://grabient.com/palettes?q=kGRYeNUmPGcUVsgxmq-qHVxp4)
- [Guide for agents](https://grabient.com/llms.txt)