# Near-black, crimson and teal cyberpunk palette

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

- Also called: Black, maroon, orange and teal angular swatches
- Seed: `kWIQnip6LFFTRQ9sNsV4zlKI`
- Page: https://grabient.com/kWIQnip6LFFTRQ9sNsV4zlKI?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: light center, vivid, warm
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12.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 | `#09060a` | `oklch(12.99% 0.0124 318.52)` | Reversed Grey | white, 20.1 to 1 |
| 2 | `#55162d` | `oklch(31.10% 0.0951 1.84)` | Drops of God | white, 13.7 to 1 |
| 3 | `#ff4a1a` | `oklch(66.54% 0.2232 34.60)` | Ōtan Red | black, 6.2 to 1 |
| 4 | `#ffc34b` | `oklch(85.04% 0.1483 81.10)` | Nârenji Orange | black, 13.1 to 1 |
| 5 | `#0bd6a3` | `oklch(77.95% 0.1571 167.75)` | Wild Caribbean Green | black, 11.2 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #09060a 0.000% 20.000%, #55162d 20.000% 40.000%, #ff4a1a 40.000% 60.000%, #ffc34b 60.000% 80.000%, #0bd6a3 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(12.99% 0.0124 318.52) 0.000% 20.000%, oklch(31.10% 0.0951 1.84) 20.000% 40.000%, oklch(66.54% 0.2232 34.60) 40.000% 60.000%, oklch(85.04% 0.1483 81.10) 60.000% 80.000%, oklch(77.95% 0.1571 167.75) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.13 | 0.012 | 318.5 |
| 2 | 0.311 | 0.095 | 361.8 |
| 3 | 0.665 | 0.223 | 394.6 |
| 4 | 0.85 | 0.15 | 441.1 |
| 5 | 0.78 | 0.157 | 527.8 |

## In these collections

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

## Other forms

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