# Black Acid Yellow Rings

These four concentric rings move from the center outward from black through ink blue, cyan, and finish in acid yellow. Use the bold ink colors for DIY editorial graphics, zine covers, posters, or print-inspired title panels. The contrasting tones can separate large backgrounds, strong lettering, borders, and small disruptive accents within a compact layout.

- Also called: Black, blue and yellow radial swatches
- Seed: `kULQBANrLUVatuz0R7MA`
- Page: https://grabient.com/kULQBANrLUVatuz0R7MA?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: dark to light, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 14.9 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 | `#111111` | `oklch(17.72% 0.0000 89.88)` | Dreamless Sleep | white, 18.8 to 1 |
| 2 | `#224a9a` | `oklch(42.91% 0.1392 262.25)` | Sea of Tears | white, 8.3 to 1 |
| 3 | `#04a9d0` | `oklch(68.11% 0.1254 222.09)` | Reboot | black, 7.5 to 1 |
| 4 | `#e4ef26` | `oklch(91.34% 0.1970 113.25)` | Robot Grendizer Gold | black, 16.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #111111 0.000% 25.000%, #224a9a 25.000% 50.000%, #04a9d0 50.000% 75.000%, #e4ef26 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(17.72% 0.0000 89.88) 0.000% 25.000%, oklch(42.91% 0.1392 262.25) 25.000% 50.000%, oklch(68.11% 0.1254 222.09) 50.000% 75.000%, oklch(91.34% 0.1970 113.25) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.177 | 0 | 90 |
| 2 | 0.429 | 0.139 | 262.3 |
| 3 | 0.681 | 0.125 | 222.1 |
| 4 | 0.913 | 0.197 | 113.2 |

## In these collections

- [Zine colors](https://grabient.com/zine-colors)

## Other forms

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