# Cyan and teal rings

Blue, teal, black and light blue radial swatches with 6 colors: #00b8d7, #7dabae, #399171, #052a2c, #9ac0c0, #b0f5e9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, teal, black and light blue radial swatches
- Seed: `kYt12Z2hI-Muju8hDsQYw6_fUZvk`
- Page: https://grabient.com/kYt12Z2hI-Muju8hDsQYw6_fUZvk?style=radialSwatches&steps=6&angle=0
- Drawn as: radial swatches, 6 steps, 0 degrees
- Kinds: dark center, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.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 | `#00b8d7` | `oklch(72.05% 0.1279 215.87)` | Maldives | black, 8.8 to 1 |
| 2 | `#7dabae` | `oklch(70.87% 0.0496 201.06)` | Solution | black, 8.2 to 1 |
| 3 | `#399171` | `oklch(59.45% 0.0978 166.19)` | Illuminating Emerald | black, 5.4 to 1 |
| 4 | `#052a2c` | `oklch(25.98% 0.0400 201.06)` | Black Box | white, 15.3 to 1 |
| 5 | `#9ac0c0` | `oklch(77.95% 0.0400 196.84)` | Bleu Nattier | black, 10.6 to 1 |
| 6 | `#b0f5e9` | `oklch(92.13% 0.0703 183.10)` | Pale King’s Blue | black, 17 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #00b8d7 0.000% 16.667%, #7dabae 16.667% 33.333%, #399171 33.333% 50.000%, #052a2c 50.000% 66.667%, #9ac0c0 66.667% 83.333%, #b0f5e9 83.333% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(72.05% 0.1279 215.87) 0.000% 16.667%, oklch(70.87% 0.0496 201.06) 16.667% 33.333%, oklch(59.45% 0.0978 166.19) 33.333% 50.000%, oklch(25.98% 0.0400 201.06) 50.000% 66.667%, oklch(77.95% 0.0400 196.84) 66.667% 83.333%, oklch(92.13% 0.0703 183.10) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.72 | 0.128 | 215.9 |
| 2 | 0.709 | 0.05 | 201.1 |
| 3 | 0.594 | 0.098 | 166.2 |
| 4 | 0.26 | 0.04 | 201.1 |
| 5 | 0.78 | 0.04 | 196.8 |
| 6 | 0.921 | 0.07 | 183.1 |

## In these collections

- [Teal swatches](https://grabient.com/teal-swatches)

## Other forms

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