# Neon Halo over Midnight Blue

The Neon Halo over Midnight Blue brings together dark blue, blue, magenta, and yellow. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is yellow.

- Also called: Navy, blue, purple and yellow linear gradient
- Seed: `kUNBq8S8a_VNSSd1xc8g`
- Page: https://grabient.com/kUNBq8S8a_VNSSd1xc8g?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 14.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 | `#0f1727` | `oklch(20.47% 0.0358 264.37)` | Sambucus | white, 17.9 to 1 |
| 2 | `#111c32` | `oklch(22.85% 0.0454 263.70)` | Trapped Darkness | white, 17 to 1 |
| 3 | `#142340` | `oklch(26.06% 0.0584 262.34)` | Cool Balaclavas Are Forever | white, 15.5 to 1 |
| 4 | `#172d52` | `oklch(29.93% 0.0740 260.57)` | Pico Void | white, 13.7 to 1 |
| 5 | `#183767` | `oklch(34.24% 0.0915 258.64)` | Passionate Blue | white, 11.7 to 1 |
| 6 | `#17437e` | `oklch(38.82% 0.1099 256.80)` | Lost River | white, 9.7 to 1 |
| 7 | `#145096` | `oklch(43.45% 0.1287 255.30)` | Medium Electric Blue | white, 8 to 1 |
| 8 | `#0d5cad` | `oklch(47.95% 0.1470 254.41)` | Bottled Sea | white, 6.6 to 1 |
| 9 | `#0868c4` | `oklch(52.12% 0.1640 254.38)` | Blue Diamond | white, 5.5 to 1 |
| 10 | `#1071d9` | `oklch(55.76% 0.1789 255.47)` | Enchanting Sapphire | white, 4.7 to 1 |
| 11 | `#2377eb` | `oklch(58.67% 0.1910 257.92)` | Blue Darknut | black, 4.9 to 1 |
| 12 | `#397af8` | `oklch(60.72% 0.2000 261.88)` | Lightish Blue | black, 5.3 to 1 |
| 13 | `#4f7aff` | `oklch(62.04% 0.2038 267.02)` | C64 NTSC | black, 5.5 to 1 |
| 14 | `#6578ff` | `oklch(62.80% 0.2004 273.21)` | Byzantine Night Blue | black, 5.6 to 1 |
| 15 | `#7773ff` | `oklch(63.12% 0.2026 280.31)` | Stargate Shimmer | black, 5.6 to 1 |
| 16 | `#896aff` | `oklch(63.17% 0.2112 288.23)` | Purple Anemone | black, 5.5 to 1 |
| 17 | `#9b60fd` | `oklch(63.09% 0.2233 296.82)` | Irrigo Purple | black, 5.4 to 1 |
| 18 | `#ac57f2` | `oklch(63.03% 0.2248 305.99)` | Light Shōtoku Purple | black, 5.4 to 1 |
| 19 | `#bc50e3` | `oklch(63.14% 0.2256 315.61)` | Ultraviolet Onsible | black, 5.3 to 1 |
| 20 | `#cb4ad3` | `oklch(63.56% 0.2260 325.56)` | Pinkish Purple | black, 5.4 to 1 |
| 21 | `#db45c1` | `oklch(64.44% 0.2261 335.73)` | Purplish Pink | black, 5.6 to 1 |
| 22 | `#eb44ae` | `oklch(65.92% 0.2259 346.11)` | Major Magenta | black, 5.9 to 1 |
| 23 | `#fc4898` | `oklch(68.02% 0.2245 357.92)` | French Fuchsia | black, 6.5 to 1 |
| 24 | `#ff6282` | `oklch(70.58% 0.1912 11.15)` | Brink Pink | black, 7.3 to 1 |
| 25 | `#ff7b73` | `oklch(73.50% 0.1622 25.34)` | Salmon Sashimi | black, 8.3 to 1 |
| 26 | `#ff916a` | `oklch(76.63% 0.1435 40.01)` | Pink Orange | black, 9.5 to 1 |
| 27 | `#ffa565` | `oklch(79.84% 0.1336 54.68)` | Echinoderm | black, 10.7 to 1 |
| 28 | `#ffb761` | `oklch(83.00% 0.1323 68.88)` | Peanut Butter Chicken | black, 12.1 to 1 |
| 29 | `#ffc757` | `oklch(85.98% 0.1421 82.14)` | Grilled Cheese | black, 13.5 to 1 |
| 30 | `#ffd62f` | `oklch(88.65% 0.1717 93.98)` | Uri Yellow | black, 14.9 to 1 |
| 31 | `#f7e500` | `oklch(90.87% 0.1918 103.92)` | Eternal Summer | black, 16.2 to 1 |
| 32 | `#ecf135` | `oklch(92.52% 0.1915 111.50)` | Delightful Dandelion | black, 17.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #0f1727 0.0%, #111c32 3.2%, #142340 6.5%, #172d52 9.7%, #183767 12.9%, #17437e 16.1%, #145096 19.4%, #0d5cad 22.6%, #0868c4 25.8%, #1071d9 29.0%, #2377eb 32.3%, #397af8 35.5%, #4f7aff 38.7%, #6578ff 41.9%, #7773ff 45.2%, #896aff 48.4%, #9b60fd 51.6%, #ac57f2 54.8%, #bc50e3 58.1%, #cb4ad3 61.3%, #db45c1 64.5%, #eb44ae 67.7%, #fc4898 71.0%, #ff6282 74.2%, #ff7b73 77.4%, #ff916a 80.6%, #ffa565 83.9%, #ffb761 87.1%, #ffc757 90.3%, #ffd62f 93.5%, #f7e500 96.8%, #ecf135 100.0%);
background: linear-gradient(135deg in oklch, oklch(20.47% 0.0358 264.37) 0.0%, oklch(22.85% 0.0454 263.70) 3.2%, oklch(26.06% 0.0584 262.34) 6.5%, oklch(29.93% 0.0740 260.57) 9.7%, oklch(34.24% 0.0915 258.64) 12.9%, oklch(38.82% 0.1099 256.80) 16.1%, oklch(43.45% 0.1287 255.30) 19.4%, oklch(47.95% 0.1470 254.41) 22.6%, oklch(52.12% 0.1640 254.38) 25.8%, oklch(55.76% 0.1789 255.47) 29.0%, oklch(58.67% 0.1910 257.92) 32.3%, oklch(60.72% 0.2000 261.88) 35.5%, oklch(62.04% 0.2038 267.02) 38.7%, oklch(62.80% 0.2004 273.21) 41.9%, oklch(63.12% 0.2026 280.31) 45.2%, oklch(63.17% 0.2112 288.23) 48.4%, oklch(63.09% 0.2233 296.82) 51.6%, oklch(63.03% 0.2248 305.99) 54.8%, oklch(63.14% 0.2256 315.61) 58.1%, oklch(63.56% 0.2260 325.56) 61.3%, oklch(64.44% 0.2261 335.73) 64.5%, oklch(65.92% 0.2259 346.11) 67.7%, oklch(68.02% 0.2245 357.92) 71.0%, oklch(70.58% 0.1912 11.15) 74.2%, oklch(73.50% 0.1622 25.34) 77.4%, oklch(76.63% 0.1435 40.01) 80.6%, oklch(79.84% 0.1336 54.68) 83.9%, oklch(83.00% 0.1323 68.88) 87.1%, oklch(85.98% 0.1421 82.14) 90.3%, oklch(88.65% 0.1717 93.98) 93.5%, oklch(90.87% 0.1918 103.92) 96.8%, oklch(92.52% 0.1915 111.50) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.036 | 264.4 |
| 2 | 0.594 | 0.194 | 259.1 |
| 3 | 0.654 | 0.226 | 342.6 |
| 4 | 0.925 | 0.192 | 471.5 |

## In these collections

- [Surreal colors](https://grabient.com/surreal-colors)

## Other forms

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