# Navy and violet cyberpunk palette

The Navy and violet cyberpunk palette brings together dark blue, purple, and magenta. The colors span a moderate 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 to purple radial gradient
- Seed: `kSOEHDvUxCVRTxK`
- Page: https://grabient.com/kSOEHDvUxCVRTxK?style=radialGradient&steps=32&angle=45
- Drawn as: radial gradient, 32 steps, 45 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 5 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 | `#111243` | `oklch(22.05% 0.0896 274.92)` | Deadly Depths | white, 17.5 to 1 |
| 2 | `#131448` | `oklch(23.01% 0.0941 275.61)` | Deadly Depths | white, 17.2 to 1 |
| 3 | `#16164d` | `oklch(24.19% 0.0999 276.38)` | Tetsu-Kon Blue | white, 16.7 to 1 |
| 4 | `#1a1754` | `oklch(25.56% 0.1067 277.24)` | Tetsu-Kon Blue | white, 16.1 to 1 |
| 5 | `#1e1a5c` | `oklch(27.10% 0.1144 278.18)` | Ocean Abyss | white, 15.5 to 1 |
| 6 | `#221c65` | `oklch(28.78% 0.1229 279.20)` | Intergalactic Cowboy | white, 14.7 to 1 |
| 7 | `#271e6e` | `oklch(30.58% 0.1318 280.31)` | After Work Blue | white, 13.9 to 1 |
| 8 | `#2d2178` | `oklch(32.46% 0.1411 281.50)` | Blue Royale | white, 13.1 to 1 |
| 9 | `#332382` | `oklch(34.40% 0.1506 282.78)` | Deep Space Rodeo | white, 12.2 to 1 |
| 10 | `#3a268d` | `oklch(36.36% 0.1601 284.14)` | Galactic Civilization | white, 11.4 to 1 |
| 11 | `#412897` | `oklch(38.34% 0.1694 285.58)` | Galactic Purple | white, 10.6 to 1 |
| 12 | `#482aa1` | `oklch(40.29% 0.1783 287.10)` | Galactic Purple | white, 9.8 to 1 |
| 13 | `#502caa` | `oklch(42.18% 0.1867 288.71)` | Blue Violet | white, 9.1 to 1 |
| 14 | `#582eb3` | `oklch(44.00% 0.1944 290.40)` | Royalty | white, 8.5 to 1 |
| 15 | `#6030bb` | `oklch(45.72% 0.2013 292.18)` | Purple Spot | white, 7.9 to 1 |
| 16 | `#6732c1` | `oklch(47.30% 0.2070 294.04)` | Purple Spot | white, 7.4 to 1 |
| 17 | `#6f33c6` | `oklch(48.74% 0.2116 296.01)` | Sagat Purple | white, 7 to 1 |
| 18 | `#7735cb` | `oklch(50.17% 0.2155 298.26)` | Hokkaido Lavender | white, 6.6 to 1 |
| 19 | `#8037ce` | `oklch(51.60% 0.2186 300.78)` | Hokkaido Lavender | white, 6.2 to 1 |
| 20 | `#8838d1` | `oklch(53.01% 0.2212 303.50)` | Thick Purple | white, 5.9 to 1 |
| 21 | `#913ad3` | `oklch(54.41% 0.2233 306.39)` | Dreamscape Purple | white, 5.5 to 1 |
| 22 | `#9b3bd4` | `oklch(55.77% 0.2249 309.40)` | Purple Vanity | white, 5.2 to 1 |
| 23 | `#a43dd4` | `oklch(57.11% 0.2262 312.47)` | Purple Yam | white, 5 to 1 |
| 24 | `#ad3fd4` | `oklch(58.40% 0.2271 315.56)` | Purple Yam | white, 4.7 to 1 |
| 25 | `#b540d3` | `oklch(59.63% 0.2277 318.63)` | Ultraviolet Berl | black, 4.6 to 1 |
| 26 | `#bd42d2` | `oklch(60.81% 0.2282 321.61)` | Ultraviolet Berl | black, 4.8 to 1 |
| 27 | `#c543d0` | `oklch(61.92% 0.2285 324.47)` | Ultraviolet Berl | black, 5 to 1 |
| 28 | `#cc45cf` | `oklch(62.95% 0.2287 327.15)` | Pinkish Purple | black, 5.3 to 1 |
| 29 | `#d346cd` | `oklch(63.90% 0.2289 329.61)` | Pinkish Purple | black, 5.5 to 1 |
| 30 | `#d848cb` | `oklch(64.75% 0.2292 331.79)` | Pinkish Purple | black, 5.7 to 1 |
| 31 | `#dd49ca` | `oklch(65.50% 0.2296 333.66)` | Purplish Pink | black, 5.8 to 1 |
| 32 | `#e24ac9` | `oklch(66.14% 0.2301 335.16)` | Purplish Pink | black, 6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #111243 0.0%, #131448 3.2%, #16164d 6.5%, #1a1754 9.7%, #1e1a5c 12.9%, #221c65 16.1%, #271e6e 19.4%, #2d2178 22.6%, #332382 25.8%, #3a268d 29.0%, #412897 32.3%, #482aa1 35.5%, #502caa 38.7%, #582eb3 41.9%, #6030bb 45.2%, #6732c1 48.4%, #6f33c6 51.6%, #7735cb 54.8%, #8037ce 58.1%, #8838d1 61.3%, #913ad3 64.5%, #9b3bd4 67.7%, #a43dd4 71.0%, #ad3fd4 74.2%, #b540d3 77.4%, #bd42d2 80.6%, #c543d0 83.9%, #cc45cf 87.1%, #d346cd 90.3%, #d848cb 93.5%, #dd49ca 96.8%, #e24ac9 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(22.05% 0.0896 274.92) 0.0%, oklch(23.01% 0.0941 275.61) 3.2%, oklch(24.19% 0.0999 276.38) 6.5%, oklch(25.56% 0.1067 277.24) 9.7%, oklch(27.10% 0.1144 278.18) 12.9%, oklch(28.78% 0.1229 279.20) 16.1%, oklch(30.58% 0.1318 280.31) 19.4%, oklch(32.46% 0.1411 281.50) 22.6%, oklch(34.40% 0.1506 282.78) 25.8%, oklch(36.36% 0.1601 284.14) 29.0%, oklch(38.34% 0.1694 285.58) 32.3%, oklch(40.29% 0.1783 287.10) 35.5%, oklch(42.18% 0.1867 288.71) 38.7%, oklch(44.00% 0.1944 290.40) 41.9%, oklch(45.72% 0.2013 292.18) 45.2%, oklch(47.30% 0.2070 294.04) 48.4%, oklch(48.74% 0.2116 296.01) 51.6%, oklch(50.17% 0.2155 298.26) 54.8%, oklch(51.60% 0.2186 300.78) 58.1%, oklch(53.01% 0.2212 303.50) 61.3%, oklch(54.41% 0.2233 306.39) 64.5%, oklch(55.77% 0.2249 309.40) 67.7%, oklch(57.11% 0.2262 312.47) 71.0%, oklch(58.40% 0.2271 315.56) 74.2%, oklch(59.63% 0.2277 318.63) 77.4%, oklch(60.81% 0.2282 321.61) 80.6%, oklch(61.92% 0.2285 324.47) 83.9%, oklch(62.95% 0.2287 327.15) 87.1%, oklch(63.90% 0.2289 329.61) 90.3%, oklch(64.75% 0.2292 331.79) 93.5%, oklch(65.50% 0.2296 333.66) 96.8%, oklch(66.14% 0.2301 335.16) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.09 | 274.9 |
| 2 | 0.48 | 0.209 | 295 |
| 3 | 0.661 | 0.23 | 335.2 |

## In these collections

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

## Other forms

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