# Night sky into royal blue

Monochrome navy to blue linear gradient with 32 colors: #020617, #02071b, #03091f, #040b24, #050e2a, #061131, #071439, #091841, #0b1b49, #0e1f52, #10235b, #132764, #152b6d, #183076, #1a347e, #1d3886, #1f3c8e, #214095, #24459d, #264aa5, #284fad, #2b55b6, #2d5abe, #2f5fc5, #3165cd, #336ad4, #356fdb, #3674e2, #3878e8, #397ced, #3a7ff2, #3b82f6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome navy to blue linear gradient
- Seed: `kCQIGF0eOooTuC9g`
- Page: https://grabient.com/kCQIGF0eOooTuC9g?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, dark, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 5.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 | `#020617` | `oklch(12.88% 0.0406 264.70)` | Melanophobia | white, 20.1 to 1 |
| 2 | `#02071b` | `oklch(13.79% 0.0442 264.74)` | Melanophobia | white, 19.9 to 1 |
| 3 | `#03091f` | `oklch(14.89% 0.0487 264.81)` | Melanophobia | white, 19.7 to 1 |
| 4 | `#040b24` | `oklch(16.16% 0.0540 264.90)` | Void | white, 19.4 to 1 |
| 5 | `#050e2a` | `oklch(17.58% 0.0599 265.01)` | Void | white, 19 to 1 |
| 6 | `#061131` | `oklch(19.12% 0.0664 265.13)` | Squid’s Ink | white, 18.5 to 1 |
| 7 | `#071439` | `oklch(20.78% 0.0733 265.26)` | Navy | white, 17.9 to 1 |
| 8 | `#091841` | `oklch(22.52% 0.0805 265.38)` | Navy | white, 17.2 to 1 |
| 9 | `#0b1b49` | `oklch(24.32% 0.0879 265.49)` | Tetsu-Kon Blue | white, 16.5 to 1 |
| 10 | `#0e1f52` | `oklch(26.18% 0.0954 265.60)` | Downriver | white, 15.6 to 1 |
| 11 | `#10235b` | `oklch(28.06% 0.1028 265.68)` | Fibonacci Blue | white, 14.8 to 1 |
| 12 | `#132764` | `oklch(29.94% 0.1101 265.74)` | Schiava Blue | white, 13.9 to 1 |
| 13 | `#152b6d` | `oklch(31.80% 0.1171 265.76)` | Blue Jinn’s | white, 13 to 1 |
| 14 | `#183076` | `oklch(33.63% 0.1237 265.75)` | Twilight Express | white, 12.2 to 1 |
| 15 | `#1a347e` | `oklch(35.40% 0.1298 265.70)` | Bavarian Blue | white, 11.4 to 1 |
| 16 | `#1d3886` | `oklch(37.10% 0.1353 265.59)` | Surf the Web | white, 10.7 to 1 |
| 17 | `#1f3c8e` | `oklch(38.71% 0.1401 265.43)` | Navy Seal | white, 10 to 1 |
| 18 | `#214095` | `oklch(40.40% 0.1447 265.20)` | Space Explorer | white, 9.3 to 1 |
| 19 | `#24459d` | `oklch(42.14% 0.1491 264.91)` | Space Explorer | white, 8.6 to 1 |
| 20 | `#264aa5` | `oklch(43.94% 0.1533 264.56)` | The Blues Brothers | white, 8 to 1 |
| 21 | `#284fad` | `oklch(45.77% 0.1573 264.17)` | The Blues Brothers | white, 7.4 to 1 |
| 22 | `#2b55b6` | `oklch(47.60% 0.1611 263.75)` | Cerulean Blue | white, 6.8 to 1 |
| 23 | `#2d5abe` | `oklch(49.43% 0.1647 263.30)` | Amnesia Blue | white, 6.3 to 1 |
| 24 | `#2f5fc5` | `oklch(51.23% 0.1681 262.84)` | Janitor | white, 5.8 to 1 |
| 25 | `#3165cd` | `oklch(52.98% 0.1714 262.37)` | Janitor | white, 5.4 to 1 |
| 26 | `#336ad4` | `oklch(54.67% 0.1744 261.91)` | Enchanting Sapphire | white, 5 to 1 |
| 27 | `#356fdb` | `oklch(56.26% 0.1772 261.46)` | Enchanting Sapphire | white, 4.7 to 1 |
| 28 | `#3674e2` | `oklch(57.76% 0.1798 261.04)` | Skies of Cyberspace | black, 4.7 to 1 |
| 29 | `#3878e8` | `oklch(59.13% 0.1822 260.66)` | Skies of Cyberspace | black, 5 to 1 |
| 30 | `#397ced` | `oklch(60.36% 0.1843 260.32)` | Lightish Blue | black, 5.2 to 1 |
| 31 | `#3a7ff2` | `oklch(61.42% 0.1863 260.03)` | Dodger Blue | black, 5.5 to 1 |
| 32 | `#3b82f6` | `oklch(62.31% 0.1880 259.81)` | Dodger Blue | black, 5.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #020617 0.0%, #02071b 3.2%, #03091f 6.5%, #040b24 9.7%, #050e2a 12.9%, #061131 16.1%, #071439 19.4%, #091841 22.6%, #0b1b49 25.8%, #0e1f52 29.0%, #10235b 32.3%, #132764 35.5%, #152b6d 38.7%, #183076 41.9%, #1a347e 45.2%, #1d3886 48.4%, #1f3c8e 51.6%, #214095 54.8%, #24459d 58.1%, #264aa5 61.3%, #284fad 64.5%, #2b55b6 67.7%, #2d5abe 71.0%, #2f5fc5 74.2%, #3165cd 77.4%, #336ad4 80.6%, #356fdb 83.9%, #3674e2 87.1%, #3878e8 90.3%, #397ced 93.5%, #3a7ff2 96.8%, #3b82f6 100.0%);
background: linear-gradient(135deg in oklch, oklch(12.88% 0.0406 264.70) 0.0%, oklch(13.79% 0.0442 264.74) 3.2%, oklch(14.89% 0.0487 264.81) 6.5%, oklch(16.16% 0.0540 264.90) 9.7%, oklch(17.58% 0.0599 265.01) 12.9%, oklch(19.12% 0.0664 265.13) 16.1%, oklch(20.78% 0.0733 265.26) 19.4%, oklch(22.52% 0.0805 265.38) 22.6%, oklch(24.32% 0.0879 265.49) 25.8%, oklch(26.18% 0.0954 265.60) 29.0%, oklch(28.06% 0.1028 265.68) 32.3%, oklch(29.94% 0.1101 265.74) 35.5%, oklch(31.80% 0.1171 265.76) 38.7%, oklch(33.63% 0.1237 265.75) 41.9%, oklch(35.40% 0.1298 265.70) 45.2%, oklch(37.10% 0.1353 265.59) 48.4%, oklch(38.71% 0.1401 265.43) 51.6%, oklch(40.40% 0.1447 265.20) 54.8%, oklch(42.14% 0.1491 264.91) 58.1%, oklch(43.94% 0.1533 264.56) 61.3%, oklch(45.77% 0.1573 264.17) 64.5%, oklch(47.60% 0.1611 263.75) 67.7%, oklch(49.43% 0.1647 263.30) 71.0%, oklch(51.23% 0.1681 262.84) 74.2%, oklch(52.98% 0.1714 262.37) 77.4%, oklch(54.67% 0.1744 261.91) 80.6%, oklch(56.26% 0.1772 261.46) 83.9%, oklch(57.76% 0.1798 261.04) 87.1%, oklch(59.13% 0.1822 260.66) 90.3%, oklch(60.36% 0.1843 260.32) 93.5%, oklch(61.42% 0.1863 260.03) 96.8%, oklch(62.31% 0.1880 259.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.129 | 0.041 | 264.7 |
| 2 | 0.379 | 0.138 | 265.5 |
| 3 | 0.623 | 0.188 | 259.8 |

## In these collections

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

## Other forms

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