# Near-black, cobalt blue and magenta cyberpunk palette

The Near-black, cobalt blue and magenta cyberpunk palette brings together dark blue, blue, and magenta. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is magenta.

- Also called: Analogous navy, blue and purple radial gradient
- Seed: `kYISHBH6Q_Da4v1LwL9RNjDc1exO`
- Page: https://grabient.com/kYISHBH6Q_Da4v1LwL9RNjDc1exO?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 4.9 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 | `#030519` | `oklch(12.99% 0.0455 271.41)` | Melanophobia | white, 20.1 to 1 |
| 2 | `#04071e` | `oklch(14.16% 0.0511 270.61)` | Melanophobia | white, 19.9 to 1 |
| 3 | `#050925` | `oklch(15.71% 0.0587 269.49)` | Mysterious Depths | white, 19.5 to 1 |
| 4 | `#050c2e` | `oklch(17.57% 0.0678 268.18)` | Mysterious Depths | white, 19 to 1 |
| 5 | `#061138` | `oklch(19.67% 0.0778 266.78)` | Infinite Night | white, 18.3 to 1 |
| 6 | `#071542` | `oklch(21.94% 0.0878 265.42)` | Navy | white, 17.5 to 1 |
| 7 | `#071a4d` | `oklch(24.32% 0.0974 264.22)` | Tetsu-Kon Blue | white, 16.5 to 1 |
| 8 | `#082059` | `oklch(26.84% 0.1066 263.22)` | Downriver | white, 15.4 to 1 |
| 9 | `#082766` | `oklch(29.65% 0.1164 262.32)` | Dark Sapphire | white, 14 to 1 |
| 10 | `#092e74` | `oklch(32.64% 0.1265 261.48)` | Blue Jinn’s | white, 12.6 to 1 |
| 11 | `#093682` | `oklch(35.73% 0.1362 260.67)` | Magnus Blue | white, 11.2 to 1 |
| 12 | `#093f90` | `oklch(38.81% 0.1452 259.88)` | Mystery Oceans | white, 9.9 to 1 |
| 13 | `#09479e` | `oklch(41.78% 0.1530 259.06)` | Space Explorer | white, 8.7 to 1 |
| 14 | `#084faa` | `oklch(44.67% 0.1590 258.07)` | Aarhusian Sky | white, 7.7 to 1 |
| 15 | `#065ab6` | `oklch(47.84% 0.1628 256.50)` | Bottled Sea | white, 6.7 to 1 |
| 16 | `#0364c1` | `oklch(51.08% 0.1651 254.73)` | Blue Diamond | white, 5.8 to 1 |
| 17 | `#026fcc` | `oklch(54.15% 0.1672 253.19)` | Indigo Carmine | white, 5 to 1 |
| 18 | `#0577d6` | `oklch(56.79% 0.1698 252.33)` | Bright Navy Blue | black, 4.6 to 1 |
| 19 | `#0d7ddf` | `oklch(58.73% 0.1740 252.58)` | Soothing Sapphire | black, 5 to 1 |
| 20 | `#197ee7` | `oklch(59.69% 0.1809 254.34)` | Skies of Cyberspace | black, 5.1 to 1 |
| 21 | `#247aed` | `oklch(59.46% 0.1907 257.51)` | Blue Darknut | black, 5 to 1 |
| 22 | `#3072f1` | `oklch(58.36% 0.2024 261.78)` | Deep Sky Blue | black, 4.8 to 1 |
| 23 | `#3e67f3` | `oklch(56.83% 0.2149 266.86)` | Secret of Mana | white, 4.7 to 1 |
| 24 | `#4c5af4` | `oklch(55.30% 0.2270 272.47)` | Aquarius Mood Indigo | white, 5.1 to 1 |
| 25 | `#5a4df4` | `oklch(54.21% 0.2375 278.34)` | Sylph of Moonlight | white, 5.5 to 1 |
| 26 | `#6843f3` | `oklch(53.97% 0.2452 284.22)` | Pink OCD | white, 5.6 to 1 |
| 27 | `#7a3cf2` | `oklch(54.57% 0.2505 291.05)` | Bluish Purple | white, 5.5 to 1 |
| 28 | `#8d36ef` | `oklch(55.68% 0.2541 298.81)` | Bright Blue Violet | white, 5.3 to 1 |
| 29 | `#a031ea` | `oklch(57.09% 0.2565 306.81)` | Singapore Orchid | white, 5.1 to 1 |
| 30 | `#b12de2` | `oklch(58.54% 0.2581 314.35)` | Sweet Desire | white, 4.8 to 1 |
| 31 | `#c02ada` | `oklch(59.80% 0.2592 320.74)` | Shades of Rhodonite | white, 4.5 to 1 |
| 32 | `#c927d4` | `oklch(60.63% 0.2604 325.30)` | Steel Pink | black, 4.7 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #030519 0.0%, #04071e 3.2%, #050925 6.5%, #050c2e 9.7%, #061138 12.9%, #071542 16.1%, #071a4d 19.4%, #082059 22.6%, #082766 25.8%, #092e74 29.0%, #093682 32.3%, #093f90 35.5%, #09479e 38.7%, #084faa 41.9%, #065ab6 45.2%, #0364c1 48.4%, #026fcc 51.6%, #0577d6 54.8%, #0d7ddf 58.1%, #197ee7 61.3%, #247aed 64.5%, #3072f1 67.7%, #3e67f3 71.0%, #4c5af4 74.2%, #5a4df4 77.4%, #6843f3 80.6%, #7a3cf2 83.9%, #8d36ef 87.1%, #a031ea 90.3%, #b12de2 93.5%, #c02ada 96.8%, #c927d4 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(12.99% 0.0455 271.41) 0.0%, oklch(14.16% 0.0511 270.61) 3.2%, oklch(15.71% 0.0587 269.49) 6.5%, oklch(17.57% 0.0678 268.18) 9.7%, oklch(19.67% 0.0778 266.78) 12.9%, oklch(21.94% 0.0878 265.42) 16.1%, oklch(24.32% 0.0974 264.22) 19.4%, oklch(26.84% 0.1066 263.22) 22.6%, oklch(29.65% 0.1164 262.32) 25.8%, oklch(32.64% 0.1265 261.48) 29.0%, oklch(35.73% 0.1362 260.67) 32.3%, oklch(38.81% 0.1452 259.88) 35.5%, oklch(41.78% 0.1530 259.06) 38.7%, oklch(44.67% 0.1590 258.07) 41.9%, oklch(47.84% 0.1628 256.50) 45.2%, oklch(51.08% 0.1651 254.73) 48.4%, oklch(54.15% 0.1672 253.19) 51.6%, oklch(56.79% 0.1698 252.33) 54.8%, oklch(58.73% 0.1740 252.58) 58.1%, oklch(59.69% 0.1809 254.34) 61.3%, oklch(59.46% 0.1907 257.51) 64.5%, oklch(58.36% 0.2024 261.78) 67.7%, oklch(56.83% 0.2149 266.86) 71.0%, oklch(55.30% 0.2270 272.47) 74.2%, oklch(54.21% 0.2375 278.34) 77.4%, oklch(53.97% 0.2452 284.22) 80.6%, oklch(54.57% 0.2505 291.05) 83.9%, oklch(55.68% 0.2541 298.81) 87.1%, oklch(57.09% 0.2565 306.81) 90.3%, oklch(58.54% 0.2581 314.35) 93.5%, oklch(59.80% 0.2592 320.74) 96.8%, oklch(60.63% 0.2604 325.30) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.13 | 0.045 | 271.4 |
| 2 | 0.248 | 0.099 | 264 |
| 3 | 0.429 | 0.156 | 258.7 |
| 4 | 0.594 | 0.178 | 253.4 |
| 5 | 0.539 | 0.244 | 283 |
| 6 | 0.606 | 0.26 | 325.3 |

## In these collections

- [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients)

## Other forms

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