# Navy to cornflower

Monochrome navy to blue linear gradient with 32 colors: #14213d, #142240, #152343, #152446, #15254a, #15274f, #152854, #162a59, #162b5e, #172d64, #172f69, #18316f, #193375, #1b367b, #1c3880, #1e3b85, #203d8b, #234190, #264596, #2a499b, #2e4da1, #3252a7, #3757ad, #3b5cb3, #4060b9, #4565be, #496ac4, #4d6ec9, #5172cd, #5576d1, #5879d5, #5a7bd8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome navy to blue linear gradient
- Seed: `kCRQhPUfPIgVp72A`
- Page: https://grabient.com/kCRQhPUfPIgVp72A?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, cool, monochrome
- Hues: monochromatic
- 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 | `#14213d` | `oklch(25.22% 0.0562 264.00)` | Cool Balaclavas Are Forever | white, 15.9 to 1 |
| 2 | `#142240` | `oklch(25.67% 0.0591 264.04)` | Dark Eclipse | white, 15.7 to 1 |
| 3 | `#152343` | `oklch(26.19% 0.0627 264.07)` | Dark Eclipse | white, 15.5 to 1 |
| 4 | `#152446` | `oklch(26.78% 0.0671 264.11)` | Dark Eclipse | white, 15.2 to 1 |
| 5 | `#15254a` | `oklch(27.42% 0.0719 264.15)` | Dark Eclipse | white, 14.9 to 1 |
| 6 | `#15274f` | `oklch(28.13% 0.0772 264.19)` | Rurikon Blue | white, 14.6 to 1 |
| 7 | `#152854` | `oklch(28.88% 0.0829 264.24)` | Dark Tyrian Blue | white, 14.3 to 1 |
| 8 | `#162a59` | `oklch(29.69% 0.0887 264.29)` | Ultramarine Violet | white, 13.9 to 1 |
| 9 | `#162b5e` | `oklch(30.55% 0.0947 264.35)` | Schiava Blue | white, 13.5 to 1 |
| 10 | `#172d64` | `oklch(31.46% 0.1007 264.41)` | Mythical Night | white, 13.1 to 1 |
| 11 | `#172f69` | `oklch(32.40% 0.1066 264.48)` | Mythical Night | white, 12.7 to 1 |
| 12 | `#18316f` | `oklch(33.38% 0.1122 264.55)` | Atlantic Navy | white, 12.2 to 1 |
| 13 | `#193375` | `oklch(34.40% 0.1175 264.63)` | Twilight Express | white, 11.8 to 1 |
| 14 | `#1b367b` | `oklch(35.46% 0.1224 264.71)` | Twilight Express | white, 11.3 to 1 |
| 15 | `#1c3880` | `oklch(36.54% 0.1268 264.80)` | Surf the Web | white, 10.8 to 1 |
| 16 | `#1e3b85` | `oklch(37.65% 0.1304 264.90)` | Surf the Web | white, 10.4 to 1 |
| 17 | `#203d8b` | `oklch(38.79% 0.1334 265.00)` | Navy Seal | white, 9.9 to 1 |
| 18 | `#234190` | `oklch(40.08% 0.1359 265.13)` | Blue Oblivion | white, 9.4 to 1 |
| 19 | `#264596` | `oklch(41.49% 0.1379 265.27)` | Cascade Twilight | white, 8.8 to 1 |
| 20 | `#2a499b` | `oklch(43.01% 0.1397 265.42)` | Sea of Tears | white, 8.3 to 1 |
| 21 | `#2e4da1` | `oklch(44.61% 0.1411 265.58)` | Ruri Blue | white, 7.7 to 1 |
| 22 | `#3252a7` | `oklch(46.27% 0.1422 265.76)` | Blasphemous Blue | white, 7.2 to 1 |
| 23 | `#3757ad` | `oklch(47.95% 0.1431 265.93)` | Blasphemous Blue | white, 6.7 to 1 |
| 24 | `#3b5cb3` | `oklch(49.64% 0.1438 266.11)` | Kakitsubata Blue | white, 6.2 to 1 |
| 25 | `#4060b9` | `oklch(51.30% 0.1443 266.29)` | Kakitsubata Blue | white, 5.8 to 1 |
| 26 | `#4565be` | `oklch(52.93% 0.1447 266.46)` | God of Rain | white, 5.4 to 1 |
| 27 | `#496ac4` | `oklch(54.48% 0.1450 266.62)` | Han Blue | white, 5 to 1 |
| 28 | `#4d6ec9` | `oklch(55.93% 0.1452 266.78)` | Han Blue | white, 4.7 to 1 |
| 29 | `#5172cd` | `oklch(57.26% 0.1455 266.92)` | Cornflower | black, 4.6 to 1 |
| 30 | `#5576d1` | `oklch(58.45% 0.1457 267.05)` | Indigo Light | black, 4.8 to 1 |
| 31 | `#5879d5` | `oklch(59.46% 0.1460 267.16)` | Serenity’s Reign | black, 5 to 1 |
| 32 | `#5a7bd8` | `oklch(60.28% 0.1464 267.24)` | Serenity’s Reign | black, 5.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #14213d 0.0%, #142240 3.2%, #152343 6.5%, #152446 9.7%, #15254a 12.9%, #15274f 16.1%, #152854 19.4%, #162a59 22.6%, #162b5e 25.8%, #172d64 29.0%, #172f69 32.3%, #18316f 35.5%, #193375 38.7%, #1b367b 41.9%, #1c3880 45.2%, #1e3b85 48.4%, #203d8b 51.6%, #234190 54.8%, #264596 58.1%, #2a499b 61.3%, #2e4da1 64.5%, #3252a7 67.7%, #3757ad 71.0%, #3b5cb3 74.2%, #4060b9 77.4%, #4565be 80.6%, #496ac4 83.9%, #4d6ec9 87.1%, #5172cd 90.3%, #5576d1 93.5%, #5879d5 96.8%, #5a7bd8 100.0%);
background: linear-gradient(135deg in oklch, oklch(25.22% 0.0562 264.00) 0.0%, oklch(25.67% 0.0591 264.04) 3.2%, oklch(26.19% 0.0627 264.07) 6.5%, oklch(26.78% 0.0671 264.11) 9.7%, oklch(27.42% 0.0719 264.15) 12.9%, oklch(28.13% 0.0772 264.19) 16.1%, oklch(28.88% 0.0829 264.24) 19.4%, oklch(29.69% 0.0887 264.29) 22.6%, oklch(30.55% 0.0947 264.35) 25.8%, oklch(31.46% 0.1007 264.41) 29.0%, oklch(32.40% 0.1066 264.48) 32.3%, oklch(33.38% 0.1122 264.55) 35.5%, oklch(34.40% 0.1175 264.63) 38.7%, oklch(35.46% 0.1224 264.71) 41.9%, oklch(36.54% 0.1268 264.80) 45.2%, oklch(37.65% 0.1304 264.90) 48.4%, oklch(38.79% 0.1334 265.00) 51.6%, oklch(40.08% 0.1359 265.13) 54.8%, oklch(41.49% 0.1379 265.27) 58.1%, oklch(43.01% 0.1397 265.42) 61.3%, oklch(44.61% 0.1411 265.58) 64.5%, oklch(46.27% 0.1422 265.76) 67.7%, oklch(47.95% 0.1431 265.93) 71.0%, oklch(49.64% 0.1438 266.11) 74.2%, oklch(51.30% 0.1443 266.29) 77.4%, oklch(52.93% 0.1447 266.46) 80.6%, oklch(54.48% 0.1450 266.62) 83.9%, oklch(55.93% 0.1452 266.78) 87.1%, oklch(57.26% 0.1455 266.92) 90.3%, oklch(58.45% 0.1457 267.05) 93.5%, oklch(59.46% 0.1460 267.16) 96.8%, oklch(60.28% 0.1464 267.24) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.056 | 264 |
| 2 | 0.382 | 0.132 | 264.9 |
| 3 | 0.603 | 0.146 | 267.2 |

## In these collections

- [Dark blue gradients](https://grabient.com/dark-blue-gradients)

## Other forms

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