# Near-black, rose and turquoise cyberpunk palette

The Near-black, rose and turquoise cyberpunk palette brings together dark purple, magenta, and teal. 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 purple, and its lightest tone is teal.

- Also called: Black, purple, pink and cyan radial swatches
- Seed: `kWHxzVpDJAlNfRhgT71bTEw4`
- Page: https://grabient.com/kWHxzVpDJAlNfRhgT71bTEw4?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.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 | `#080312` | `oklch(12.20% 0.0386 300.23)` | Obsidian Shard | white, 20.3 to 1 |
| 2 | `#3b065e` | `oklch(28.35% 0.1378 305.52)` | Wicked Purple | white, 15.2 to 1 |
| 3 | `#ff1192` | `oklch(65.35% 0.2618 357.30)` | Secret Story | black, 5.7 to 1 |
| 4 | `#ff70e5` | `oklch(75.59% 0.2171 335.10)` | Avant-Garde Pink | black, 8.7 to 1 |
| 5 | `#3fe8ff` | `oklch(85.83% 0.1350 208.30)` | Shimmering Expanse Cyan | black, 14.2 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #080312 0.000% 20.000%, #3b065e 20.000% 40.000%, #ff1192 40.000% 60.000%, #ff70e5 60.000% 80.000%, #3fe8ff 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(12.20% 0.0386 300.23) 0.000% 20.000%, oklch(28.35% 0.1378 305.52) 20.000% 40.000%, oklch(65.35% 0.2618 357.30) 40.000% 60.000%, oklch(75.59% 0.2171 335.10) 60.000% 80.000%, oklch(85.83% 0.1350 208.30) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.122 | 0.039 | 300.2 |
| 2 | 0.283 | 0.138 | 305.5 |
| 3 | 0.654 | 0.262 | 357.3 |
| 4 | 0.756 | 0.219 | 335.1 |
| 5 | 0.858 | 0.135 | 208.3 |

## In these collections

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

## Other forms

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