# Near-black, deep cyan and crimson cyberpunk palette

The Near-black, deep cyan and crimson cyberpunk palette brings together dark gray, dark teal, teal, and red. 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 gray, and its lightest tone is teal.

- Also called: Black, teal and pink radial swatches
- Seed: `kWJAiTpYzAT2avpsur0U1WtI`
- Page: https://grabient.com/kWJAiTpYzAT2avpsur0U1WtI?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: vivid, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 13.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 | `#050b0c` | `oklch(14.17% 0.0110 207.42)` | Dark Side of the Moon | white, 19.8 to 1 |
| 2 | `#163136` | `oklch(29.53% 0.0344 210.59)` | Elite Teal | white, 13.7 to 1 |
| 3 | `#1d6b6e` | `oklch(48.43% 0.0730 198.97)` | Peacock Plume | white, 6.1 to 1 |
| 4 | `#04f1c8` | `oklch(85.43% 0.1612 174.66)` | Fake Jade | black, 14.3 to 1 |
| 5 | `#ff315c` | `oklch(65.35% 0.2356 16.15)` | Radical Red | black, 5.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #050b0c 0.000% 20.000%, #163136 20.000% 40.000%, #1d6b6e 40.000% 60.000%, #04f1c8 60.000% 80.000%, #ff315c 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(14.17% 0.0110 207.42) 0.000% 20.000%, oklch(29.53% 0.0344 210.59) 20.000% 40.000%, oklch(48.43% 0.0730 198.97) 40.000% 60.000%, oklch(85.43% 0.1612 174.66) 60.000% 80.000%, oklch(65.35% 0.2356 16.15) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.142 | 0.011 | 207.4 |
| 2 | 0.295 | 0.034 | 210.6 |
| 3 | 0.484 | 0.073 | 199 |
| 4 | 0.854 | 0.161 | 174.7 |
| 5 | 0.654 | 0.236 | 16.1 |

## In these collections

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

## Other forms

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