# Navy, turquoise and magenta cyberpunk palette

The Navy, turquoise and magenta cyberpunk palette brings together dark blue, blue, teal, 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 teal.

- Also called: Navy, teal, blue and purple radial gradient
- Seed: `kYKyCzq58_EwnPJoMz0TFBKFTfx0`
- Page: https://grabient.com/kYKyCzq58_EwnPJoMz0TFBKFTfx0?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: 11.4 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 | `#021022` | `oklch(16.93% 0.0441 252.42)` | Kuretake Black Manga | white, 19.1 to 1 |
| 2 | `#021328` | `oklch(18.65% 0.0486 251.88)` | Kuretake Black Manga | white, 18.5 to 1 |
| 3 | `#031930` | `oklch(20.94% 0.0550 251.33)` | Oxford by Night | white, 17.7 to 1 |
| 4 | `#031f3b` | `oklch(23.70% 0.0626 250.60)` | Midnight Mirage | white, 16.5 to 1 |
| 5 | `#032746` | `oklch(26.79% 0.0705 249.51)` | Rhapsody in Blue | white, 15.1 to 1 |
| 6 | `#033053` | `oklch(30.12% 0.0780 247.90)` | Indigo Black | white, 13.5 to 1 |
| 7 | `#013a5f` | `oklch(33.56% 0.0844 245.59)` | Poseidon | white, 11.9 to 1 |
| 8 | `#00446b` | `oklch(37.18% 0.0889 242.41)` | Lush Aqua | white, 10.2 to 1 |
| 9 | `#005176` | `oklch(41.19% 0.0916 238.21)` | Pirate’s Haven | white, 8.6 to 1 |
| 10 | `#005e82` | `oklch(45.45% 0.0943 233.37)` | Royal Blood | white, 7.1 to 1 |
| 11 | `#006d8e` | `oklch(49.82% 0.0974 228.22)` | Copacabana | white, 5.8 to 1 |
| 12 | `#007b9a` | `oklch(54.14% 0.1009 223.08)` | Sea Sight | white, 4.8 to 1 |
| 13 | `#0089a4` | `oklch(58.28% 0.1049 218.27)` | Capri Breeze | black, 5.1 to 1 |
| 14 | `#0097af` | `oklch(62.30% 0.1093 213.52)` | Aquarium Diver | black, 6 to 1 |
| 15 | `#05a8b8` | `oklch(66.87% 0.1141 207.20)` | Bluebird | black, 7.2 to 1 |
| 16 | `#19b9c1` | `oklch(71.59% 0.1182 200.39)` | Lago Blue | black, 8.7 to 1 |
| 17 | `#29c9c8` | `oklch(75.94% 0.1228 194.39)` | Mermaid Net | black, 10.2 to 1 |
| 18 | `#30d6cf` | `oklch(79.42% 0.1284 190.55)` | Turquoise Panic | black, 11.6 to 1 |
| 19 | `#25ded6` | `oklch(81.51% 0.1355 190.18)` | Fish Boy | black, 12.4 to 1 |
| 20 | `#00dede` | `oklch(81.66% 0.1394 194.65)` | Fish Boy | black, 12.5 to 1 |
| 21 | `#00d4e4` | `oklch(79.33% 0.1354 204.54)` | Aztec Turquoise | black, 11.5 to 1 |
| 22 | `#00c2e8` | `oklch(75.24% 0.1355 218.40)` | Blue Raspberry | black, 9.9 to 1 |
| 23 | `#00aced` | `oklch(70.32% 0.1483 234.57)` | Vivid Cerulean | black, 8.1 to 1 |
| 24 | `#0892ff` | `oklch(65.46% 0.1901 251.34)` | Clear Chill | black, 6.5 to 1 |
| 25 | `#4e78ff` | `oklch(61.60% 0.2065 267.08)` | Lightish Blue | black, 5.4 to 1 |
| 26 | `#6d63fe` | `oklch(59.63% 0.2224 280.18)` | Blue Genie | black, 4.8 to 1 |
| 27 | `#8854f9` | `oklch(59.43% 0.2317 292.26)` | Purple Honeycreeper | black, 4.6 to 1 |
| 28 | `#a249f2` | `oklch(60.37% 0.2401 304.16)` | Aconite Violet | black, 4.7 to 1 |
| 29 | `#bc41e8` | `oklch(61.99% 0.2475 315.39)` | Ultraviolet Onsible | black, 5 to 1 |
| 30 | `#d33bdd` | `oklch(63.86% 0.2539 325.45)` | Demonic Purple | black, 5.4 to 1 |
| 31 | `#e635d0` | `oklch(65.52% 0.2591 333.87)` | Leo Royal Fuchsia | black, 5.7 to 1 |
| 32 | `#f32fc5` | `oklch(66.54% 0.2632 340.13)` | Kriss Me Not Fuchsia | black, 6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #021022 0.0%, #021328 3.2%, #031930 6.5%, #031f3b 9.7%, #032746 12.9%, #033053 16.1%, #013a5f 19.4%, #00446b 22.6%, #005176 25.8%, #005e82 29.0%, #006d8e 32.3%, #007b9a 35.5%, #0089a4 38.7%, #0097af 41.9%, #05a8b8 45.2%, #19b9c1 48.4%, #29c9c8 51.6%, #30d6cf 54.8%, #25ded6 58.1%, #00dede 61.3%, #00d4e4 64.5%, #00c2e8 67.7%, #00aced 71.0%, #0892ff 74.2%, #4e78ff 77.4%, #6d63fe 80.6%, #8854f9 83.9%, #a249f2 87.1%, #bc41e8 90.3%, #d33bdd 93.5%, #e635d0 96.8%, #f32fc5 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(16.93% 0.0441 252.42) 0.0%, oklch(18.65% 0.0486 251.88) 3.2%, oklch(20.94% 0.0550 251.33) 6.5%, oklch(23.70% 0.0626 250.60) 9.7%, oklch(26.79% 0.0705 249.51) 12.9%, oklch(30.12% 0.0780 247.90) 16.1%, oklch(33.56% 0.0844 245.59) 19.4%, oklch(37.18% 0.0889 242.41) 22.6%, oklch(41.19% 0.0916 238.21) 25.8%, oklch(45.45% 0.0943 233.37) 29.0%, oklch(49.82% 0.0974 228.22) 32.3%, oklch(54.14% 0.1009 223.08) 35.5%, oklch(58.28% 0.1049 218.27) 38.7%, oklch(62.30% 0.1093 213.52) 41.9%, oklch(66.87% 0.1141 207.20) 45.2%, oklch(71.59% 0.1182 200.39) 48.4%, oklch(75.94% 0.1228 194.39) 51.6%, oklch(79.42% 0.1284 190.55) 54.8%, oklch(81.51% 0.1355 190.18) 58.1%, oklch(81.66% 0.1394 194.65) 61.3%, oklch(79.33% 0.1354 204.54) 64.5%, oklch(75.24% 0.1355 218.40) 67.7%, oklch(70.32% 0.1483 234.57) 71.0%, oklch(65.46% 0.1901 251.34) 74.2%, oklch(61.60% 0.2065 267.08) 77.4%, oklch(59.63% 0.2224 280.18) 80.6%, oklch(59.43% 0.2317 292.26) 83.9%, oklch(60.37% 0.2401 304.16) 87.1%, oklch(61.99% 0.2475 315.39) 90.3%, oklch(63.86% 0.2539 325.45) 93.5%, oklch(65.52% 0.2591 333.87) 96.8%, oklch(66.54% 0.2632 340.13) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.169 | 0.044 | 252.4 |
| 2 | 0.343 | 0.085 | 245 |
| 3 | 0.598 | 0.107 | 216.5 |
| 4 | 0.819 | 0.141 | 192.2 |
| 5 | 0.598 | 0.22 | 277.8 |
| 6 | 0.665 | 0.263 | 340.1 |

## In these collections

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

## Other forms

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