# Cool enamel concentric rings

Five crisp radial bands run from teal at the center to powder blue, pale lilac, clear blue, and charcoal at the edge. The light lilac middle separates the related blues, while the dark outer ring gives the arrangement a firm setting. Use it for enamel-inspired packaging, compact album art, or a centered badge and poster system with space for a bold mark.

- Also called: Teal, light blue, gray and dark gray radial swatches
- Seed: `kWfjmB4BJJXKIR9HpTYqgWsw`
- Page: https://grabient.com/kWfjmB4BJJXKIR9HpTYqgWsw?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: light center, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 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 | `#1f7166` | `oklch(49.61% 0.0785 182.11)` | Advantageous | white, 5.8 to 1 |
| 2 | `#9eb1d0` | `oklch(75.59% 0.0496 261.37)` | Heartsong | black, 9.6 to 1 |
| 3 | `#e7dae6` | `oklch(90.16% 0.0220 327.94)` | Spangle | black, 15.5 to 1 |
| 4 | `#3c7bad` | `oklch(56.30% 0.1020 245.51)` | Beijing Blue | black, 4.6 to 1 |
| 5 | `#39352d` | `oklch(33.07% 0.0152 83.83)` | Sensaicha Brown | white, 12.1 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #1f7166 0.000% 20.000%, #9eb1d0 20.000% 40.000%, #e7dae6 40.000% 60.000%, #3c7bad 60.000% 80.000%, #39352d 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(49.61% 0.0785 182.11) 0.000% 20.000%, oklch(75.59% 0.0496 261.37) 20.000% 40.000%, oklch(90.16% 0.0220 327.94) 40.000% 60.000%, oklch(56.30% 0.1020 245.51) 60.000% 80.000%, oklch(33.07% 0.0152 83.83) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.496 | 0.079 | 182.1 |
| 2 | 0.756 | 0.05 | 261.4 |
| 3 | 0.902 | 0.022 | 327.9 |
| 4 | 0.563 | 0.102 | 245.5 |
| 5 | 0.331 | 0.015 | 83.8 |

## In these collections

- [Brooched](https://grabient.com/brooched)

## Other forms

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