# Silver Graphite Gray Rings

These 5 concentric rings move outward through soft white, dark graphite, pale greige, silver gray, and dark slate. The separated colors provide clear roles for backgrounds, headings, borders, icons, and small accents while preserving the collection's visual character.

- Also called: White, black and gray radial swatches
- Seed: `kW9QRDooVSGIDqzYhVQuwdAA`
- Page: https://grabient.com/kW9QRDooVSGIDqzYhVQuwdAA?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 13.5 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 | `#f4f3ef` | `oklch(96.46% 0.0055 94.92)` | Classic Chalk | black, 18.9 to 1 |
| 2 | `#22282d` | `oklch(27.17% 0.0138 248.15)` | Black Grey | white, 14.9 to 1 |
| 3 | `#b9b4ae` | `oklch(77.17% 0.0096 72.73)` | Soft Beige | black, 10.1 to 1 |
| 4 | `#979fa6` | `oklch(69.69% 0.0138 243.92)` | Shining Knight | black, 7.7 to 1 |
| 5 | `#515b64` | `oklch(46.46% 0.0193 244.98)` | Novelty Navy | white, 6.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f4f3ef 0.000% 20.000%, #22282d 20.000% 40.000%, #b9b4ae 40.000% 60.000%, #979fa6 60.000% 80.000%, #515b64 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(96.46% 0.0055 94.92) 0.000% 20.000%, oklch(27.17% 0.0138 248.15) 20.000% 40.000%, oklch(77.17% 0.0096 72.73) 40.000% 60.000%, oklch(69.69% 0.0138 243.92) 60.000% 80.000%, oklch(46.46% 0.0193 244.98) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.965 | 0.006 | 94.9 |
| 2 | 0.272 | 0.014 | 248.2 |
| 3 | 0.772 | 0.01 | 72.7 |
| 4 | 0.697 | 0.014 | 243.9 |
| 5 | 0.465 | 0.019 | 245 |

## In these collections

- [Gray swatches](https://grabient.com/gray-swatches)

## Other forms

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