# Monochrome navy to blue linear gradient

Monochrome navy to blue linear gradient with 32 colors: #162048, #162149, #16224b, #16234e, #152550, #152653, #152857, #14295a, #142b5d, #142d61, #132f64, #143067, #14326a, #15356d, #163771, #173974, #183c78, #193e7b, #1b407f, #1c4282, #1e4485, #204589, #22478c, #244890, #274993, #294997, #2c4a9a, #2f4a9e, #324ba1, #344ba3, #364ba6, #384ca7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUQja_qKS_DMrv85tkEA`
- Page: https://grabient.com/kUQja_qKS_DMrv85tkEA?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2 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 | `#162048` | `oklch(25.98% 0.0744 269.30)` | Konkikyō Blue | white, 15.7 to 1 |
| 2 | `#162149` | `oklch(26.31% 0.0759 268.85)` | Konkikyō Blue | white, 15.5 to 1 |
| 3 | `#16224b` | `oklch(26.72% 0.0779 268.23)` | Konkikyō Blue | white, 15.3 to 1 |
| 4 | `#16234e` | `oklch(27.20% 0.0803 267.50)` | Dark Soul | white, 15.1 to 1 |
| 5 | `#152550` | `oklch(27.73% 0.0830 266.68)` | Dark Soul | white, 14.9 to 1 |
| 6 | `#152653` | `oklch(28.32% 0.0858 265.81)` | Dark Soul | white, 14.6 to 1 |
| 7 | `#152857` | `oklch(28.94% 0.0888 264.93)` | Ultramarine Violet | white, 14.3 to 1 |
| 8 | `#14295a` | `oklch(29.60% 0.0917 264.08)` | Ultramarine Violet | white, 14 to 1 |
| 9 | `#142b5d` | `oklch(30.28% 0.0946 263.29)` | Schiava Blue | white, 13.6 to 1 |
| 10 | `#142d61` | `oklch(30.97% 0.0974 262.60)` | Mythical Night | white, 13.3 to 1 |
| 11 | `#132f64` | `oklch(31.66% 0.0998 262.05)` | Mythical Night | white, 13 to 1 |
| 12 | `#143067` | `oklch(32.36% 0.1020 261.63)` | Funnel Cloud | white, 12.6 to 1 |
| 13 | `#14326a` | `oklch(33.12% 0.1040 261.25)` | Funnel Cloud | white, 12.3 to 1 |
| 14 | `#15356d` | `oklch(33.93% 0.1058 260.92)` | Atlantic Navy | white, 11.9 to 1 |
| 15 | `#163771` | `oklch(34.78% 0.1076 260.63)` | Atlantic Navy | white, 11.5 to 1 |
| 16 | `#173974` | `oklch(35.64% 0.1092 260.40)` | Azure Dragon | white, 11.1 to 1 |
| 17 | `#183c78` | `oklch(36.51% 0.1109 260.25)` | Azure Dragon | white, 10.7 to 1 |
| 18 | `#193e7b` | `oklch(37.36% 0.1126 260.18)` | Twilight Blue | white, 10.4 to 1 |
| 19 | `#1b407f` | `oklch(38.19% 0.1144 260.21)` | Bracing Blue | white, 10 to 1 |
| 20 | `#1c4282` | `oklch(38.98% 0.1163 260.34)` | Maritime Outpost | white, 9.7 to 1 |
| 21 | `#1e4485` | `oklch(39.71% 0.1184 260.60)` | Maritime Outpost | white, 9.4 to 1 |
| 22 | `#204589` | `oklch(40.37% 0.1207 260.99)` | Indigo Hamlet | white, 9.2 to 1 |
| 23 | `#22478c` | `oklch(41.01% 0.1234 261.62)` | Pacific Navy | white, 8.9 to 1 |
| 24 | `#244890` | `oklch(41.63% 0.1263 262.46)` | Cascade Twilight | white, 8.7 to 1 |
| 25 | `#274993` | `oklch(42.22% 0.1295 263.46)` | Cascade Twilight | white, 8.5 to 1 |
| 26 | `#294997` | `oklch(42.79% 0.1328 264.57)` | Cascade Twilight | white, 8.3 to 1 |
| 27 | `#2c4a9a` | `oklch(43.32% 0.1361 265.73)` | Sea of Tears | white, 8.2 to 1 |
| 28 | `#2f4a9e` | `oklch(43.81% 0.1393 266.88)` | Sea of Tears | white, 8 to 1 |
| 29 | `#324ba1` | `oklch(44.26% 0.1422 267.97)` | Dazzling Blue | white, 7.9 to 1 |
| 30 | `#344ba3` | `oklch(44.65% 0.1449 268.95)` | Dazzling Blue | white, 7.8 to 1 |
| 31 | `#364ba6` | `oklch(45.00% 0.1471 269.76)` | Dazzling Blue | white, 7.7 to 1 |
| 32 | `#384ca7` | `oklch(45.28% 0.1488 270.35)` | Dazzling Blue | white, 7.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #162048 0.0%, #162149 3.2%, #16224b 6.5%, #16234e 9.7%, #152550 12.9%, #152653 16.1%, #152857 19.4%, #14295a 22.6%, #142b5d 25.8%, #142d61 29.0%, #132f64 32.3%, #143067 35.5%, #14326a 38.7%, #15356d 41.9%, #163771 45.2%, #173974 48.4%, #183c78 51.6%, #193e7b 54.8%, #1b407f 58.1%, #1c4282 61.3%, #1e4485 64.5%, #204589 67.7%, #22478c 71.0%, #244890 74.2%, #274993 77.4%, #294997 80.6%, #2c4a9a 83.9%, #2f4a9e 87.1%, #324ba1 90.3%, #344ba3 93.5%, #364ba6 96.8%, #384ca7 100.0%);
background: linear-gradient(90deg in oklch, oklch(25.98% 0.0744 269.30) 0.0%, oklch(26.31% 0.0759 268.85) 3.2%, oklch(26.72% 0.0779 268.23) 6.5%, oklch(27.20% 0.0803 267.50) 9.7%, oklch(27.73% 0.0830 266.68) 12.9%, oklch(28.32% 0.0858 265.81) 16.1%, oklch(28.94% 0.0888 264.93) 19.4%, oklch(29.60% 0.0917 264.08) 22.6%, oklch(30.28% 0.0946 263.29) 25.8%, oklch(30.97% 0.0974 262.60) 29.0%, oklch(31.66% 0.0998 262.05) 32.3%, oklch(32.36% 0.1020 261.63) 35.5%, oklch(33.12% 0.1040 261.25) 38.7%, oklch(33.93% 0.1058 260.92) 41.9%, oklch(34.78% 0.1076 260.63) 45.2%, oklch(35.64% 0.1092 260.40) 48.4%, oklch(36.51% 0.1109 260.25) 51.6%, oklch(37.36% 0.1126 260.18) 54.8%, oklch(38.19% 0.1144 260.21) 58.1%, oklch(38.98% 0.1163 260.34) 61.3%, oklch(39.71% 0.1184 260.60) 64.5%, oklch(40.37% 0.1207 260.99) 67.7%, oklch(41.01% 0.1234 261.62) 71.0%, oklch(41.63% 0.1263 262.46) 74.2%, oklch(42.22% 0.1295 263.46) 77.4%, oklch(42.79% 0.1328 264.57) 80.6%, oklch(43.32% 0.1361 265.73) 83.9%, oklch(43.81% 0.1393 266.88) 87.1%, oklch(44.26% 0.1422 267.97) 90.3%, oklch(44.65% 0.1449 268.95) 93.5%, oklch(45.00% 0.1471 269.76) 96.8%, oklch(45.28% 0.1488 270.35) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.26 | 0.074 | 269.3 |
| 2 | 0.319 | 0.101 | 261.9 |
| 3 | 0.402 | 0.12 | 260.8 |
| 4 | 0.453 | 0.149 | 270.4 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)
- [Deep sea gradients](https://grabient.com/deep-sea-gradients)

## Other forms

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