# Near-black, rose and gold cyberpunk palette

The Near-black, rose and gold cyberpunk palette brings together dark magenta, magenta, red, and light orange. 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 magenta, and its lightest tone is light orange.

- Also called: Black, pink, orange and tan angular swatches
- Seed: `kWHibuKC7C8nUQVZR0MdqFGI`
- Page: https://grabient.com/kWHibuKC7C8nUQVZR0MdqFGI?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.8 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 | `#10000d` | `oklch(11.81% 0.0524 334.69)` | Glossy Black | white, 20.4 to 1 |
| 2 | `#5f002f` | `oklch(31.52% 0.1277 0.10)` | Mulberry Wood | white, 13.7 to 1 |
| 3 | `#e00055` | `oklch(57.88% 0.2313 11.69)` | Anger | white, 4.8 to 1 |
| 4 | `#ff6836` | `oklch(70.08% 0.1949 38.09)` | Halt and Catch Fire | black, 7.2 to 1 |
| 5 | `#ffe7a4` | `oklch(93.31% 0.0885 90.94)` | Sun Drenched | black, 17.2 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #10000d 0.000% 20.000%, #5f002f 20.000% 40.000%, #e00055 40.000% 60.000%, #ff6836 60.000% 80.000%, #ffe7a4 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(11.81% 0.0524 334.69) 0.000% 20.000%, oklch(31.52% 0.1277 0.10) 20.000% 40.000%, oklch(57.88% 0.2313 11.69) 40.000% 60.000%, oklch(70.08% 0.1949 38.09) 60.000% 80.000%, oklch(93.31% 0.0885 90.94) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.118 | 0.052 | 334.7 |
| 2 | 0.315 | 0.128 | 360 |
| 3 | 0.579 | 0.231 | 371.7 |
| 4 | 0.701 | 0.196 | 398.1 |
| 5 | 0.933 | 0.091 | 450.9 |

## In these collections

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

## Other forms

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