# Monochrome navy to blue linear gradient

Monochrome navy to blue linear gradient with 32 colors: #081b37, #091c38, #0a1d39, #0a1f3b, #0c213d, #0d2340, #0e2542, #102846, #122b49, #152f4d, #183352, #1b3857, #1f3c5d, #224262, #264768, #2a4b6d, #2d5073, #305578, #345a7e, #375f83, #3a6389, #3d688e, #406c93, #437097, #45739b, #47769e, #4978a1, #4b7aa3, #4c7ca5, #4d7ea7, #4f7fa8, #4f80a9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWOSu3pBc_jSZv1DnT-Sh4_w`
- Page: https://grabient.com/kWOSu3pBc_jSZv1DnT-Sh4_w?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 4 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 | `#081b37` | `oklch(22.44% 0.0593 258.05)` | Naval Night | white, 17.1 to 1 |
| 2 | `#091c38` | `oklch(22.86% 0.0596 257.81)` | Naval Night | white, 16.9 to 1 |
| 3 | `#0a1d39` | `oklch(23.37% 0.0600 257.51)` | Naval Night | white, 16.7 to 1 |
| 4 | `#0a1f3b` | `oklch(23.97% 0.0604 257.15)` | Midnight Mirage | white, 16.5 to 1 |
| 5 | `#0c213d` | `oklch(24.68% 0.0610 256.74)` | Dark Eclipse | white, 16.1 to 1 |
| 6 | `#0d2340` | `oklch(25.49% 0.0615 256.29)` | Dark Eclipse | white, 15.8 to 1 |
| 7 | `#0e2542` | `oklch(26.42% 0.0622 255.80)` | Dark Eclipse | white, 15.3 to 1 |
| 8 | `#102846` | `oklch(27.47% 0.0629 255.28)` | Eternal Darkness | white, 14.8 to 1 |
| 9 | `#122b49` | `oklch(28.66% 0.0636 254.74)` | Midnight Ocean | white, 14.2 to 1 |
| 10 | `#152f4d` | `oklch(30.05% 0.0643 254.12)` | Crow Black Blue | white, 13.6 to 1 |
| 11 | `#183352` | `oklch(31.64% 0.0651 253.43)` | Incremental Blue | white, 12.8 to 1 |
| 12 | `#1b3857` | `oklch(33.35% 0.0659 252.70)` | Gibraltar Sea | white, 12 to 1 |
| 13 | `#1f3c5d` | `oklch(35.16% 0.0668 251.95)` | Navy Peony | white, 11.2 to 1 |
| 14 | `#224262` | `oklch(36.99% 0.0678 251.22)` | Alpine Race | white, 10.4 to 1 |
| 15 | `#264768` | `oklch(38.79% 0.0687 250.51)` | Commodore | white, 9.6 to 1 |
| 16 | `#2a4b6d` | `oklch(40.52% 0.0697 249.88)` | Blue Tang | white, 8.9 to 1 |
| 17 | `#2d5073` | `oklch(42.15% 0.0708 249.32)` | Midnight Sonata | white, 8.3 to 1 |
| 18 | `#305578` | `oklch(43.80% 0.0721 248.81)` | Venice Blue | white, 7.7 to 1 |
| 19 | `#345a7e` | `oklch(45.47% 0.0734 248.34)` | Dark Blue | white, 7.2 to 1 |
| 20 | `#375f83` | `oklch(47.13% 0.0748 247.90)` | Atlantic Schooner | white, 6.7 to 1 |
| 21 | `#3a6389` | `oklch(48.73% 0.0762 247.49)` | Mississippi River | white, 6.2 to 1 |
| 22 | `#3d688e` | `oklch(50.25% 0.0775 247.13)` | Snake River | white, 5.8 to 1 |
| 23 | `#406c93` | `oklch(51.64% 0.0787 246.79)` | Queen Blue | white, 5.5 to 1 |
| 24 | `#437097` | `oklch(52.87% 0.0797 246.49)` | Postwar Boom | white, 5.2 to 1 |
| 25 | `#45739b` | `oklch(53.93% 0.0805 246.23)` | Dull Blue | white, 5 to 1 |
| 26 | `#47769e` | `oklch(54.86% 0.0811 246.02)` | Dull Blue | white, 4.8 to 1 |
| 27 | `#4978a1` | `oklch(55.67% 0.0815 245.85)` | Billycart Blue | white, 4.6 to 1 |
| 28 | `#4b7aa3` | `oklch(56.37% 0.0819 245.71)` | Zenith | black, 4.6 to 1 |
| 29 | `#4c7ca5` | `oklch(56.97% 0.0821 245.60)` | Parisian Blue | black, 4.7 to 1 |
| 30 | `#4d7ea7` | `oklch(57.48% 0.0823 245.51)` | Aleutian Isle | black, 4.8 to 1 |
| 31 | `#4f7fa8` | `oklch(57.91% 0.0825 245.44)` | Neapolitan Blue | black, 4.9 to 1 |
| 32 | `#4f80a9` | `oklch(58.27% 0.0827 245.37)` | Neapolitan Blue | black, 5 to 1 |

## CSS

```css
background: linear-gradient(180deg, #081b37 0.0%, #091c38 3.2%, #0a1d39 6.5%, #0a1f3b 9.7%, #0c213d 12.9%, #0d2340 16.1%, #0e2542 19.4%, #102846 22.6%, #122b49 25.8%, #152f4d 29.0%, #183352 32.3%, #1b3857 35.5%, #1f3c5d 38.7%, #224262 41.9%, #264768 45.2%, #2a4b6d 48.4%, #2d5073 51.6%, #305578 54.8%, #345a7e 58.1%, #375f83 61.3%, #3a6389 64.5%, #3d688e 67.7%, #406c93 71.0%, #437097 74.2%, #45739b 77.4%, #47769e 80.6%, #4978a1 83.9%, #4b7aa3 87.1%, #4c7ca5 90.3%, #4d7ea7 93.5%, #4f7fa8 96.8%, #4f80a9 100.0%);
background: linear-gradient(180deg in oklch, oklch(22.44% 0.0593 258.05) 0.0%, oklch(22.86% 0.0596 257.81) 3.2%, oklch(23.37% 0.0600 257.51) 6.5%, oklch(23.97% 0.0604 257.15) 9.7%, oklch(24.68% 0.0610 256.74) 12.9%, oklch(25.49% 0.0615 256.29) 16.1%, oklch(26.42% 0.0622 255.80) 19.4%, oklch(27.47% 0.0629 255.28) 22.6%, oklch(28.66% 0.0636 254.74) 25.8%, oklch(30.05% 0.0643 254.12) 29.0%, oklch(31.64% 0.0651 253.43) 32.3%, oklch(33.35% 0.0659 252.70) 35.5%, oklch(35.16% 0.0668 251.95) 38.7%, oklch(36.99% 0.0678 251.22) 41.9%, oklch(38.79% 0.0687 250.51) 45.2%, oklch(40.52% 0.0697 249.88) 48.4%, oklch(42.15% 0.0708 249.32) 51.6%, oklch(43.80% 0.0721 248.81) 54.8%, oklch(45.47% 0.0734 248.34) 58.1%, oklch(47.13% 0.0748 247.90) 61.3%, oklch(48.73% 0.0762 247.49) 64.5%, oklch(50.25% 0.0775 247.13) 67.7%, oklch(51.64% 0.0787 246.79) 71.0%, oklch(52.87% 0.0797 246.49) 74.2%, oklch(53.93% 0.0805 246.23) 77.4%, oklch(54.86% 0.0811 246.02) 80.6%, oklch(55.67% 0.0815 245.85) 83.9%, oklch(56.37% 0.0819 245.71) 87.1%, oklch(56.97% 0.0821 245.60) 90.3%, oklch(57.48% 0.0823 245.51) 93.5%, oklch(57.91% 0.0825 245.44) 96.8%, oklch(58.27% 0.0827 245.37) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.224 | 0.059 | 258 |
| 2 | 0.283 | 0.063 | 254.9 |
| 3 | 0.413 | 0.07 | 249.6 |
| 4 | 0.531 | 0.08 | 246.4 |
| 5 | 0.583 | 0.083 | 245.4 |

## In these collections

- [Sky](https://grabient.com/sky)

## Other forms

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