# Midnight to bright blue

Monochrome navy to blue linear gradient with 32 colors: #0f172a, #0f182c, #10192f, #101a32, #111b35, #121c39, #131e3d, #141f42, #152147, #16234c, #172452, #182658, #182860, #192968, #192b71, #192c7a, #1a2e83, #1a308d, #1b3397, #1c37a0, #1d3ca9, #1f42b2, #214bba, #2555c3, #2b60cc, #326cd4, #3a78dc, #4383e4, #4b8eeb, #5497f1, #5b9ff6, #60a5fa. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome navy to blue linear gradient
- Seed: `kEQ8XKkXJVQR5ArxYKX6A`
- Page: https://grabient.com/kEQ8XKkXJVQR5ArxYKX6A?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: 7 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 | `#0f172a` | `oklch(20.77% 0.0398 265.75)` | Sambucus | white, 17.8 to 1 |
| 2 | `#0f182c` | `oklch(21.17% 0.0424 265.90)` | Sambucus | white, 17.7 to 1 |
| 3 | `#10192f` | `oklch(21.64% 0.0454 266.11)` | Dark Knight | white, 17.5 to 1 |
| 4 | `#101a32` | `oklch(22.19% 0.0488 266.36)` | Dark Knight | white, 17.3 to 1 |
| 5 | `#111b35` | `oklch(22.80% 0.0527 266.65)` | Dark Knight | white, 17 to 1 |
| 6 | `#121c39` | `oklch(23.49% 0.0570 266.94)` | Nightwalker | white, 16.7 to 1 |
| 7 | `#131e3d` | `oklch(24.24% 0.0618 267.23)` | Nightwalker | white, 16.4 to 1 |
| 8 | `#141f42` | `oklch(25.06% 0.0670 267.49)` | Konkikyō Blue | white, 16.1 to 1 |
| 9 | `#152147` | `oklch(25.94% 0.0727 267.70)` | Konkikyō Blue | white, 15.7 to 1 |
| 10 | `#16234c` | `oklch(26.88% 0.0787 267.86)` | Fly-by-Night | white, 15.3 to 1 |
| 11 | `#172452` | `oklch(27.88% 0.0852 267.93)` | Dark Soul | white, 14.8 to 1 |
| 12 | `#182658` | `oklch(28.92% 0.0924 267.93)` | Fibonacci Blue | white, 14.3 to 1 |
| 13 | `#182860` | `oklch(29.97% 0.1013 267.91)` | Schiava Blue | white, 13.9 to 1 |
| 14 | `#192968` | `oklch(31.05% 0.1115 267.88)` | Schiava Blue | white, 13.4 to 1 |
| 15 | `#192b71` | `oklch(32.17% 0.1225 267.80)` | Blue Jinn’s | white, 12.9 to 1 |
| 16 | `#192c7a` | `oklch(33.37% 0.1338 267.69)` | Below the Surface | white, 12.4 to 1 |
| 17 | `#1a2e83` | `oklch(34.65% 0.1450 267.52)` | Bavarian Blue | white, 11.9 to 1 |
| 18 | `#1a308d` | `oklch(36.04% 0.1555 267.28)` | Dark Seashore Night | white, 11.3 to 1 |
| 19 | `#1b3397` | `oklch(37.56% 0.1649 266.96)` | North Star Blue | white, 10.6 to 1 |
| 20 | `#1c37a0` | `oklch(39.24% 0.1727 266.55)` | North Star Blue | white, 9.9 to 1 |
| 21 | `#1d3ca9` | `oklch(41.10% 0.1784 266.04)` | Yuè Guāng Lán Blue | white, 9.2 to 1 |
| 22 | `#1f42b2` | `oklch(43.17% 0.1816 265.41)` | Denim | white, 8.4 to 1 |
| 23 | `#214bba` | `oklch(45.67% 0.1822 264.56)` | Apnea Dive | white, 7.5 to 1 |
| 24 | `#2555c3` | `oklch(48.55% 0.1805 263.52)` | Cerulean Blue | white, 6.6 to 1 |
| 25 | `#2b60cc` | `oklch(51.71% 0.1771 262.34)` | Janitor | white, 5.7 to 1 |
| 26 | `#326cd4` | `oklch(55.01% 0.1725 261.07)` | Enchanting Sapphire | white, 4.9 to 1 |
| 27 | `#3a78dc` | `oklch(58.35% 0.1670 259.77)` | Skies of Cyberspace | black, 4.8 to 1 |
| 28 | `#4383e4` | `oklch(61.60% 0.1612 258.49)` | Seljuk Blue | black, 5.6 to 1 |
| 29 | `#4b8eeb` | `oklch(64.65% 0.1554 257.28)` | Olympic Blue | black, 6.3 to 1 |
| 30 | `#5497f1` | `oklch(67.37% 0.1503 256.19)` | Guilliman Blue | black, 7 to 1 |
| 31 | `#5b9ff6` | `oklch(69.65% 0.1461 255.29)` | Feather Star | black, 7.7 to 1 |
| 32 | `#60a5fa` | `oklch(71.37% 0.1434 254.62)` | Âbi Blue | black, 8.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #0f172a 0.0%, #0f182c 3.2%, #10192f 6.5%, #101a32 9.7%, #111b35 12.9%, #121c39 16.1%, #131e3d 19.4%, #141f42 22.6%, #152147 25.8%, #16234c 29.0%, #172452 32.3%, #182658 35.5%, #182860 38.7%, #192968 41.9%, #192b71 45.2%, #192c7a 48.4%, #1a2e83 51.6%, #1a308d 54.8%, #1b3397 58.1%, #1c37a0 61.3%, #1d3ca9 64.5%, #1f42b2 67.7%, #214bba 71.0%, #2555c3 74.2%, #2b60cc 77.4%, #326cd4 80.6%, #3a78dc 83.9%, #4383e4 87.1%, #4b8eeb 90.3%, #5497f1 93.5%, #5b9ff6 96.8%, #60a5fa 100.0%);
background: linear-gradient(135deg in oklch, oklch(20.77% 0.0398 265.75) 0.0%, oklch(21.17% 0.0424 265.90) 3.2%, oklch(21.64% 0.0454 266.11) 6.5%, oklch(22.19% 0.0488 266.36) 9.7%, oklch(22.80% 0.0527 266.65) 12.9%, oklch(23.49% 0.0570 266.94) 16.1%, oklch(24.24% 0.0618 267.23) 19.4%, oklch(25.06% 0.0670 267.49) 22.6%, oklch(25.94% 0.0727 267.70) 25.8%, oklch(26.88% 0.0787 267.86) 29.0%, oklch(27.88% 0.0852 267.93) 32.3%, oklch(28.92% 0.0924 267.93) 35.5%, oklch(29.97% 0.1013 267.91) 38.7%, oklch(31.05% 0.1115 267.88) 41.9%, oklch(32.17% 0.1225 267.80) 45.2%, oklch(33.37% 0.1338 267.69) 48.4%, oklch(34.65% 0.1450 267.52) 51.6%, oklch(36.04% 0.1555 267.28) 54.8%, oklch(37.56% 0.1649 266.96) 58.1%, oklch(39.24% 0.1727 266.55) 61.3%, oklch(41.10% 0.1784 266.04) 64.5%, oklch(43.17% 0.1816 265.41) 67.7%, oklch(45.67% 0.1822 264.56) 71.0%, oklch(48.55% 0.1805 263.52) 74.2%, oklch(51.71% 0.1771 262.34) 77.4%, oklch(55.01% 0.1725 261.07) 80.6%, oklch(58.35% 0.1670 259.77) 83.9%, oklch(61.60% 0.1612 258.49) 87.1%, oklch(64.65% 0.1554 257.28) 90.3%, oklch(67.37% 0.1503 256.19) 93.5%, oklch(69.65% 0.1461 255.29) 96.8%, oklch(71.37% 0.1434 254.62) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.208 | 0.04 | 265.8 |
| 2 | 0.282 | 0.087 | 267.9 |
| 3 | 0.424 | 0.181 | 265.6 |
| 4 | 0.714 | 0.143 | 254.6 |

## In these collections

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

## Other forms

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