# Black Plum Rings

Seamless black radial swatches with 5 colors: #070508, #17131b, #2e2734, #1b171f, #09070a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Seamless black radial swatches
- Seed: `kWHwXcmQY_qSJP-bBj_kQPA4`
- Page: https://grabient.com/kWHwXcmQY_qSJP-bBj_kQPA4?style=radialSwatches&steps=5
- Drawn as: radial swatches, 5 steps, 90 degrees
- Kinds: neutral, dark, seamless
- Hues: achromatic
- Contrast of its darkest and lightest colors: 1.4 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 | `#070508` | `oklch(12.20% 0.0069 310.08)` | Black Metal | white, 20.2 to 1 |
| 2 | `#17131b` | `oklch(19.69% 0.0165 307.96)` | Back in Black | white, 18.2 to 1 |
| 3 | `#2e2734` | `oklch(28.74% 0.0248 307.96)` | Black Safflower | white, 14.3 to 1 |
| 4 | `#1b171f` | `oklch(21.26% 0.0165 307.96)` | Violet Void | white, 17.6 to 1 |
| 5 | `#09070a` | `oklch(13.39% 0.0096 316.42)` | Reversed Grey | white, 20 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #070508 0.000% 20.000%, #17131b 20.000% 40.000%, #2e2734 40.000% 60.000%, #1b171f 60.000% 80.000%, #09070a 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(12.20% 0.0069 310.08) 0.000% 20.000%, oklch(19.69% 0.0165 307.96) 20.000% 40.000%, oklch(28.74% 0.0248 307.96) 40.000% 60.000%, oklch(21.26% 0.0165 307.96) 60.000% 80.000%, oklch(13.39% 0.0096 316.42) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.122 | 0.007 | 310.1 |
| 2 | 0.197 | 0.017 | 308 |
| 3 | 0.287 | 0.025 | 308 |
| 4 | 0.213 | 0.017 | 308 |
| 5 | 0.134 | 0.01 | 316.4 |

## In these collections

- [Black swatches](https://grabient.com/black-swatches)
- [Neutral swatches](https://grabient.com/neutral-swatches)

## Other forms

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