# Evergreen Ice Winter Rings

These 5 concentric rings move outward through near-black teal, pale sage, clear teal, deep green, and pale periwinkle. The separated colors provide clear roles for backgrounds, headings, borders, icons, and small accents while preserving the collection's visual character.

- Also called: Black, teal, dark green and light blue radial swatches
- Seed: `kWNRSdYhY50QgQevnrx6ZzMo`
- Page: https://grabient.com/kWNRSdYhY50QgQevnrx6ZzMo?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.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 | `#081b21` | `oklch(20.87% 0.0276 220.78)` | Black Stallion | white, 17.6 to 1 |
| 2 | `#8fc2ae` | `oklch(77.17% 0.0606 169.00)` | Bella Green | black, 10.4 to 1 |
| 3 | `#187e75` | `oklch(53.54% 0.0882 185.91)` | Geneva Green | white, 4.9 to 1 |
| 4 | `#0b4e2d` | `oklch(37.40% 0.0841 156.32)` | Troll Green | white, 9.8 to 1 |
| 5 | `#aec8fc` | `oklch(83.07% 0.0785 264.11)` | Night Snow | black, 12.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #081b21 0.000% 20.000%, #8fc2ae 20.000% 40.000%, #187e75 40.000% 60.000%, #0b4e2d 60.000% 80.000%, #aec8fc 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(20.87% 0.0276 220.78) 0.000% 20.000%, oklch(77.17% 0.0606 169.00) 20.000% 40.000%, oklch(53.54% 0.0882 185.91) 40.000% 60.000%, oklch(37.40% 0.0841 156.32) 60.000% 80.000%, oklch(83.07% 0.0785 264.11) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.028 | 220.8 |
| 2 | 0.772 | 0.061 | 169 |
| 3 | 0.535 | 0.088 | 185.9 |
| 4 | 0.374 | 0.084 | 156.3 |
| 5 | 0.831 | 0.079 | 264.1 |

## In these collections

- [Winter swatches](https://grabient.com/winter-swatches)

## Other forms

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