# Periwinkle Indigo Rings

These four concentric rings move outward from near-black indigo through periwinkle, deep indigo, and muted violet. The bright inner band stands clearly against both dark regions, giving labels, icons, and framing elements distinct roles. Use them for night-themed interfaces, editorial graphics, presentation accents, or restrained indigo branding.

- Also called: Analogous black, blue and purple radial swatches
- Seed: `kUICW5ULJB5AXwZQl0Fg`
- Page: https://grabient.com/kUICW5ULJB5AXwZQl0Fg?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.7 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 | `#00051a` | `oklch(12.60% 0.0510 260.16)` | Melanophobia | white, 20.2 to 1 |
| 2 | `#7680dc` | `oklch(63.39% 0.1378 277.06)` | Tanzine | black, 5.9 to 1 |
| 3 | `#08011e` | `oklch(12.60% 0.0648 290.80)` | Midnight Jam | white, 20.3 to 1 |
| 4 | `#9281aa` | `oklch(63.39% 0.0634 303.48)` | Purple Phantom | black, 5.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #00051a 0.000% 25.000%, #7680dc 25.000% 50.000%, #08011e 50.000% 75.000%, #9281aa 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(12.60% 0.0510 260.16) 0.000% 25.000%, oklch(63.39% 0.1378 277.06) 25.000% 50.000%, oklch(12.60% 0.0648 290.80) 50.000% 75.000%, oklch(63.39% 0.0634 303.48) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.126 | 0.051 | 260.2 |
| 2 | 0.634 | 0.138 | 277.1 |
| 3 | 0.126 | 0.065 | 290.8 |
| 4 | 0.634 | 0.063 | 303.5 |

## In these collections

- [Indigo swatches](https://grabient.com/indigo-swatches)

## Other forms

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