# Navy, turquoise and rose cyberpunk palette

The Navy, turquoise and rose cyberpunk palette brings together dark blue, teal, 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: Navy, teal, blue and pink angular gradient
- Seed: `kULiyyTEi6kJTyXR0EcA`
- Page: https://grabient.com/kULiyyTEi6kJTyXR0EcA?style=angularGradient&steps=32&angle=315
- Drawn as: angular gradient, 32 steps, 315 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 5.1 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 | `#001228` | `oklch(18.14% 0.0525 250.82)` | Kuretake Black Manga | white, 18.7 to 1 |
| 2 | `#00192f` | `oklch(20.73% 0.0552 247.53)` | Oxford by Night | white, 17.8 to 1 |
| 3 | `#002239` | `oklch(24.33% 0.0585 242.70)` | Midnight Dreams | white, 16.2 to 1 |
| 4 | `#002e45` | `oklch(28.67% 0.0624 236.82)` | Cosmos Blue | white, 14.1 to 1 |
| 5 | `#003c53` | `oklch(33.52% 0.0670 230.33)` | Duskwood | white, 11.8 to 1 |
| 6 | `#004c60` | `oklch(38.62% 0.0723 223.70)` | Raging Thunderstorm | white, 9.5 to 1 |
| 7 | `#005c6e` | `oklch(43.72% 0.0783 217.38)` | Brave New Teal | white, 7.6 to 1 |
| 8 | `#006b7b` | `oklch(48.58% 0.0846 211.84)` | Teal With It | white, 6.1 to 1 |
| 9 | `#007a87` | `oklch(52.96% 0.0909 207.53)` | Biscay Bay | white, 5 to 1 |
| 10 | `#008691` | `oklch(56.59% 0.0966 204.92)` | Blue Slushie | black, 4.8 to 1 |
| 11 | `#008f9a` | `oklch(59.23% 0.1011 204.47)` | Coral Coast | black, 5.3 to 1 |
| 12 | `#0093a1` | `oklch(60.70% 0.1040 206.55)` | Jaded | black, 5.7 to 1 |
| 13 | `#0094a8` | `oklch(61.17% 0.1061 210.92)` | Brilliant | black, 5.8 to 1 |
| 14 | `#0092ad` | `oklch(60.84% 0.1088 217.17)` | Cape Pond | black, 5.7 to 1 |
| 15 | `#008db2` | `oklch(59.90% 0.1134 224.91)` | Algiers Blue | black, 5.4 to 1 |
| 16 | `#0086b9` | `oklch(58.53% 0.1221 233.74)` | Dresden Blue | black, 5.1 to 1 |
| 17 | `#007ec1` | `oklch(56.94% 0.1384 243.26)` | Honolulu Blue | black, 4.7 to 1 |
| 18 | `#0072d2` | `oklch(55.30% 0.1709 253.08)` | Wizard Blue | white, 4.8 to 1 |
| 19 | `#1b5eef` | `oklch(53.80% 0.2278 262.78)` | Azul | white, 5.3 to 1 |
| 20 | `#4451eb` | `oklch(52.64% 0.2287 272.00)` | Qing Dynasty Dragon | white, 5.7 to 1 |
| 21 | `#5a46e7` | `oklch(52.01% 0.2295 280.33)` | Purplish Blue | white, 6 to 1 |
| 22 | `#6a3fe3` | `oklch(52.07% 0.2304 287.46)` | Bluish Purple | white, 6.1 to 1 |
| 23 | `#793bdf` | `oklch(52.65% 0.2308 294.38)` | Hokkaido Lavender | white, 6 to 1 |
| 24 | `#8838da` | `oklch(53.61% 0.2305 301.33)` | Thick Purple | white, 5.8 to 1 |
| 25 | `#9737d4` | `oklch(54.85% 0.2296 308.23)` | Dreamscape Purple | white, 5.5 to 1 |
| 26 | `#a537ce` | `oklch(56.29% 0.2284 314.94)` | Telemagenta | white, 5.2 to 1 |
| 27 | `#b338c8` | `oklch(57.84% 0.2269 321.37)` | Ultraviolet Berl | white, 4.8 to 1 |
| 28 | `#c03ac1` | `oklch(59.41% 0.2253 327.40)` | Ultraviolet Cryner | black, 4.5 to 1 |
| 29 | `#cb3cbb` | `oklch(60.92% 0.2238 332.94)` | Purple Pink | black, 4.8 to 1 |
| 30 | `#d53eb5` | `oklch(62.28% 0.2223 337.86)` | Loudicious Pink | black, 5.1 to 1 |
| 31 | `#dd40af` | `oklch(63.39% 0.2212 342.05)` | Pink Bite | black, 5.4 to 1 |
| 32 | `#e342aa` | `oklch(64.17% 0.2205 345.42)` | Pink Bite | black, 5.5 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #001228 0.0%, #00192f 3.2%, #002239 6.5%, #002e45 9.7%, #003c53 12.9%, #004c60 16.1%, #005c6e 19.4%, #006b7b 22.6%, #007a87 25.8%, #008691 29.0%, #008f9a 32.3%, #0093a1 35.5%, #0094a8 38.7%, #0092ad 41.9%, #008db2 45.2%, #0086b9 48.4%, #007ec1 51.6%, #0072d2 54.8%, #1b5eef 58.1%, #4451eb 61.3%, #5a46e7 64.5%, #6a3fe3 67.7%, #793bdf 71.0%, #8838da 74.2%, #9737d4 77.4%, #a537ce 80.6%, #b338c8 83.9%, #c03ac1 87.1%, #cb3cbb 90.3%, #d53eb5 93.5%, #dd40af 96.8%, #e342aa 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(18.14% 0.0525 250.82) 0.0%, oklch(20.73% 0.0552 247.53) 3.2%, oklch(24.33% 0.0585 242.70) 6.5%, oklch(28.67% 0.0624 236.82) 9.7%, oklch(33.52% 0.0670 230.33) 12.9%, oklch(38.62% 0.0723 223.70) 16.1%, oklch(43.72% 0.0783 217.38) 19.4%, oklch(48.58% 0.0846 211.84) 22.6%, oklch(52.96% 0.0909 207.53) 25.8%, oklch(56.59% 0.0966 204.92) 29.0%, oklch(59.23% 0.1011 204.47) 32.3%, oklch(60.70% 0.1040 206.55) 35.5%, oklch(61.17% 0.1061 210.92) 38.7%, oklch(60.84% 0.1088 217.17) 41.9%, oklch(59.90% 0.1134 224.91) 45.2%, oklch(58.53% 0.1221 233.74) 48.4%, oklch(56.94% 0.1384 243.26) 51.6%, oklch(55.30% 0.1709 253.08) 54.8%, oklch(53.80% 0.2278 262.78) 58.1%, oklch(52.64% 0.2287 272.00) 61.3%, oklch(52.01% 0.2295 280.33) 64.5%, oklch(52.07% 0.2304 287.46) 67.7%, oklch(52.65% 0.2308 294.38) 71.0%, oklch(53.61% 0.2305 301.33) 74.2%, oklch(54.85% 0.2296 308.23) 77.4%, oklch(56.29% 0.2284 314.94) 80.6%, oklch(57.84% 0.2269 321.37) 83.9%, oklch(59.41% 0.2253 327.40) 87.1%, oklch(60.92% 0.2238 332.94) 90.3%, oklch(62.28% 0.2223 337.86) 93.5%, oklch(63.39% 0.2212 342.05) 96.8%, oklch(64.17% 0.2205 345.42) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.061 | 250.3 |
| 2 | 0.598 | 0.2 | 204.9 |
| 3 | 0.52 | 0.23 | 285.2 |
| 4 | 0.642 | 0.22 | 345.4 |

## In these collections

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

## Other forms

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