# Near-Black Magenta Deep Violet Rings

These 4 concentric rings move outward through near-black magenta, pale gold, deep rose, and deep violet. The separated colors give backgrounds, type, borders, and accents distinct assignments. Use it for digital fashion graphics, music artwork, event posters, or bold interface backgrounds with a glossy electronic mood.

- Also called: Black, yellow, pink and blue radial swatches
- Seed: `kUKA7x7zpM87bNU4W7dg`
- Page: https://grabient.com/kUKA7x7zpM87bNU4W7dg?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: light center, vivid, warm, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 13.3 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 | `#12090f` | `oklch(15.75% 0.0193 339.61)` | Noir Fiction | white, 19.5 to 1 |
| 2 | `#ffcf40` | `oklch(87.40% 0.1598 89.52)` | Habañero Gold | black, 14.2 to 1 |
| 3 | `#f00080` | `oklch(61.81% 0.2508 359.69)` | Fabulous Fuchsia | black, 5 to 1 |
| 4 | `#5901d1` | `oklch(44.09% 0.2522 287.83)` | Sea Serpent’s Tears | white, 8.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #12090f 0.000% 25.000%, #ffcf40 25.000% 50.000%, #f00080 50.000% 75.000%, #5901d1 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(15.75% 0.0193 339.61) 0.000% 25.000%, oklch(87.40% 0.1598 89.52) 25.000% 50.000%, oklch(61.81% 0.2508 359.69) 50.000% 75.000%, oklch(44.09% 0.2522 287.83) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.157 | 0.019 | 339.6 |
| 2 | 0.874 | 0.16 | 449.5 |
| 3 | 0.618 | 0.251 | 359.7 |
| 4 | 0.441 | 0.252 | 287.8 |

## In these collections

- [Glitchy glam](https://grabient.com/glitchy-glam)

## Other forms

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