# Midnight to sapphire

Monochrome black to blue linear gradient with 32 colors: #05070f, #050811, #060913, #060a16, #070c19, #080e1d, #081021, #091225, #0a1429, #0a172d, #0b1932, #0b1c36, #0c1e3b, #0d2140, #0d2445, #0e274a, #0f2a50, #0f2e56, #10315c, #113461, #123867, #123b6d, #133f73, #14437a, #164780, #174b87, #194f8e, #1a5394, #1c579a, #1d5aa0, #1e5da4, #1f5fa8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome black to blue linear gradient
- Seed: `kEQUHD0LGjMRI6axH1-oA`
- Page: https://grabient.com/kEQUHD0LGjMRI6axH1-oA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, vivid, dark, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.1 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 | `#05070f` | `oklch(13.04% 0.0192 269.80)` | Narwhal Grey | white, 20.1 to 1 |
| 2 | `#050811` | `oklch(13.54% 0.0212 269.22)` | Narwhal Grey | white, 20 to 1 |
| 3 | `#060913` | `oklch(14.15% 0.0236 268.45)` | Narwhal Grey | white, 19.8 to 1 |
| 4 | `#060a16` | `oklch(14.87% 0.0264 267.52)` | Dark Rift | white, 19.7 to 1 |
| 5 | `#070c19` | `oklch(15.68% 0.0296 266.49)` | Dark Rift | white, 19.5 to 1 |
| 6 | `#080e1d` | `oklch(16.56% 0.0330 265.39)` | Nyctophobia | white, 19.2 to 1 |
| 7 | `#081021` | `oklch(17.51% 0.0367 264.26)` | Kuretake Black Manga | white, 18.9 to 1 |
| 8 | `#091225` | `oklch(18.50% 0.0405 263.14)` | Corbeau | white, 18.6 to 1 |
| 9 | `#0a1429` | `oklch(19.53% 0.0444 262.08)` | Squid’s Ink | white, 18.3 to 1 |
| 10 | `#0a172d` | `oklch(20.59% 0.0482 261.11)` | Liberty Blue | white, 17.9 to 1 |
| 11 | `#0b1932` | `oklch(21.65% 0.0521 260.28)` | Liberty Blue | white, 17.5 to 1 |
| 12 | `#0b1c36` | `oklch(22.73% 0.0558 259.60)` | Trapped Darkness | white, 17 to 1 |
| 13 | `#0c1e3b` | `oklch(23.86% 0.0598 258.98)` | Nightwalker | white, 16.5 to 1 |
| 14 | `#0d2140` | `oklch(25.05% 0.0639 258.43)` | Dark Eclipse | white, 16 to 1 |
| 15 | `#0d2445` | `oklch(26.28% 0.0681 257.93)` | Dark Eclipse | white, 15.4 to 1 |
| 16 | `#0e274a` | `oklch(27.55% 0.0724 257.48)` | Rurikon Blue | white, 14.8 to 1 |
| 17 | `#0f2a50` | `oklch(28.84% 0.0767 257.08)` | Dark Tyrian Blue | white, 14.2 to 1 |
| 18 | `#0f2e56` | `oklch(30.15% 0.0810 256.71)` | Ambassador Blue | white, 13.6 to 1 |
| 19 | `#10315c` | `oklch(31.47% 0.0853 256.37)` | Ambassador Blue | white, 13 to 1 |
| 20 | `#113461` | `oklch(32.78% 0.0894 256.07)` | Funnel Cloud | white, 12.3 to 1 |
| 21 | `#123867` | `oklch(34.09% 0.0935 255.78)` | Lost in Space | white, 11.7 to 1 |
| 22 | `#123b6d` | `oklch(35.39% 0.0974 255.52)` | Tardis Blue | white, 11.1 to 1 |
| 23 | `#133f73` | `oklch(36.77% 0.1015 255.29)` | Ashenvale Nights | white, 10.5 to 1 |
| 24 | `#14437a` | `oklch(38.24% 0.1056 255.12)` | Twilight Blue | white, 9.9 to 1 |
| 25 | `#164780` | `oklch(39.76% 0.1098 254.98)` | Poster Blue | white, 9.3 to 1 |
| 26 | `#174b87` | `oklch(41.29% 0.1140 254.88)` | Magnetic Blue | white, 8.7 to 1 |
| 27 | `#194f8e` | `oklch(42.79% 0.1181 254.80)` | Turkish Sea | white, 8.2 to 1 |
| 28 | `#1a5394` | `oklch(44.22% 0.1219 254.74)` | Nautical Blue | white, 7.7 to 1 |
| 29 | `#1c579a` | `oklch(45.55% 0.1254 254.70)` | Blue Chip | white, 7.3 to 1 |
| 30 | `#1d5aa0` | `oklch(46.74% 0.1285 254.66)` | Miracle at Wrigley | white, 6.9 to 1 |
| 31 | `#1e5da4` | `oklch(47.74% 0.1312 254.62)` | Drakenhof Nightshade | white, 6.6 to 1 |
| 32 | `#1f5fa8` | `oklch(48.52% 0.1333 254.58)` | Directoire Blue | white, 6.4 to 1 |

## CSS

```css
background: linear-gradient(135deg, #05070f 0.0%, #050811 3.2%, #060913 6.5%, #060a16 9.7%, #070c19 12.9%, #080e1d 16.1%, #081021 19.4%, #091225 22.6%, #0a1429 25.8%, #0a172d 29.0%, #0b1932 32.3%, #0b1c36 35.5%, #0c1e3b 38.7%, #0d2140 41.9%, #0d2445 45.2%, #0e274a 48.4%, #0f2a50 51.6%, #0f2e56 54.8%, #10315c 58.1%, #113461 61.3%, #123867 64.5%, #123b6d 67.7%, #133f73 71.0%, #14437a 74.2%, #164780 77.4%, #174b87 80.6%, #194f8e 83.9%, #1a5394 87.1%, #1c579a 90.3%, #1d5aa0 93.5%, #1e5da4 96.8%, #1f5fa8 100.0%);
background: linear-gradient(135deg in oklch, oklch(13.04% 0.0192 269.80) 0.0%, oklch(13.54% 0.0212 269.22) 3.2%, oklch(14.15% 0.0236 268.45) 6.5%, oklch(14.87% 0.0264 267.52) 9.7%, oklch(15.68% 0.0296 266.49) 12.9%, oklch(16.56% 0.0330 265.39) 16.1%, oklch(17.51% 0.0367 264.26) 19.4%, oklch(18.50% 0.0405 263.14) 22.6%, oklch(19.53% 0.0444 262.08) 25.8%, oklch(20.59% 0.0482 261.11) 29.0%, oklch(21.65% 0.0521 260.28) 32.3%, oklch(22.73% 0.0558 259.60) 35.5%, oklch(23.86% 0.0598 258.98) 38.7%, oklch(25.05% 0.0639 258.43) 41.9%, oklch(26.28% 0.0681 257.93) 45.2%, oklch(27.55% 0.0724 257.48) 48.4%, oklch(28.84% 0.0767 257.08) 51.6%, oklch(30.15% 0.0810 256.71) 54.8%, oklch(31.47% 0.0853 256.37) 58.1%, oklch(32.78% 0.0894 256.07) 61.3%, oklch(34.09% 0.0935 255.78) 64.5%, oklch(35.39% 0.0974 255.52) 67.7%, oklch(36.77% 0.1015 255.29) 71.0%, oklch(38.24% 0.1056 255.12) 74.2%, oklch(39.76% 0.1098 254.98) 77.4%, oklch(41.29% 0.1140 254.88) 80.6%, oklch(42.79% 0.1181 254.80) 83.9%, oklch(44.22% 0.1219 254.74) 87.1%, oklch(45.55% 0.1254 254.70) 90.3%, oklch(46.74% 0.1285 254.66) 93.5%, oklch(47.74% 0.1312 254.62) 96.8%, oklch(48.52% 0.1333 254.58) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.13 | 0.019 | 269.8 |
| 2 | 0.22 | 0.053 | 260 |
| 3 | 0.35 | 0.096 | 255.6 |
| 4 | 0.485 | 0.133 | 254.6 |

## In these collections

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

## Other forms

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