# Near-black and violet color palette

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

- Also called: Black, navy, purple and pink angular swatches
- Seed: `kWIBLUnac_jbZPzI7EHW1tD4`
- Page: https://grabient.com/kWIBLUnac_jbZPzI7EHW1tD4?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#08050f` | `oklch(12.60% 0.0248 298.83)` | Not Tonight | white, 20.2 to 1 |
| 2 | `#240949` | `oklch(23.23% 0.1075 295.66)` | Shadow Planet | white, 17.3 to 1 |
| 3 | `#5800c8` | `oklch(42.93% 0.2439 289.31)` | Sea Serpent’s Tears | white, 9.3 to 1 |
| 4 | `#a300fe` | `oklch(57.09% 0.2963 305.16)` | Vivid Violet | white, 5.2 to 1 |
| 5 | `#ff51d5` | `oklch(71.65% 0.2472 338.98)` | Purple Pizzazz | black, 7.3 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #08050f 0.000% 20.000%, #240949 20.000% 40.000%, #5800c8 40.000% 60.000%, #a300fe 60.000% 80.000%, #ff51d5 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(12.60% 0.0248 298.83) 0.000% 20.000%, oklch(23.23% 0.1075 295.66) 20.000% 40.000%, oklch(42.93% 0.2439 289.31) 40.000% 60.000%, oklch(57.09% 0.2963 305.16) 60.000% 80.000%, oklch(71.65% 0.2472 338.98) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.126 | 0.025 | 298.8 |
| 2 | 0.232 | 0.107 | 295.7 |
| 3 | 0.429 | 0.245 | 289.3 |
| 4 | 0.571 | 0.298 | 305.2 |
| 5 | 0.717 | 0.251 | 339 |

## In these collections

- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)
- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)

## Other forms

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