# Hot pink blue energy rings

The Hot pink blue energy rings brings together magenta, blue, orange, and dark gray. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is orange.

- Also called: Pink, blue, orange and black radial swatches
- Seed: `kUpLX8yj201490SgBzEA`
- Page: https://grabient.com/kUpLX8yj201490SgBzEA?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: light center, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#f62395` | `oklch(64.57% 0.2494 355.08)` | Prickly Pink | black, 5.5 to 1 |
| 2 | `#3d76de` | `oklch(58.27% 0.1695 261.03)` | Skies of Cyberspace | black, 4.8 to 1 |
| 3 | `#ff8440` | `oklch(74.02% 0.1695 46.86)` | Mango Tango | black, 8.6 to 1 |
| 4 | `#20212b` | `oklch(25.20% 0.0193 281.11)` | To Hell and Black | white, 15.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f62395 0.000% 25.000%, #3d76de 25.000% 50.000%, #ff8440 50.000% 75.000%, #20212b 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(64.57% 0.2494 355.08) 0.000% 25.000%, oklch(58.27% 0.1695 261.03) 25.000% 50.000%, oklch(74.02% 0.1695 46.86) 50.000% 75.000%, oklch(25.20% 0.0193 281.11) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.646 | 0.249 | 355.1 |
| 2 | 0.583 | 0.169 | 261 |
| 3 | 0.74 | 0.169 | 406.9 |
| 4 | 0.252 | 0.019 | 281.1 |

## In these collections

- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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