# White, gray and black radial swatches

White, gray and black radial swatches with 32 colors: #f7f9fa, #f3f5f7, #eff1f3, #e9ecee, #e3e6e9, #dcdfe3, #d4d8dc, #ccd1d5, #c4c8cd, #babfc5, #b0b5bb, #a5abb1, #9aa0a6, #8f959c, #848a91, #798087, #6f767d, #656c73, #5c6269, #52585f, #494f56, #40454c, #383d43, #30353b, #292d33, #22262b, #1b1e23, #15181c, #0f1115, #0a0c0f, #07080a, #050507. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW-QKuaoNAUmFQGohMBjwJAY`
- Page: https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY?style=radialSwatches&steps=32&angle=135
- Drawn as: radial swatches, 32 steps, 135 degrees
- Kinds: light to dark, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 19.2 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 | `#f7f9fa` | `oklch(98.03% 0.0028 244.69)` | Zhēn Zhū Bái Pearl | black, 19.8 to 1 |
| 2 | `#f3f5f7` | `oklch(96.98% 0.0032 244.93)` | Chef’s Hat | black, 19.2 to 1 |
| 3 | `#eff1f3` | `oklch(95.67% 0.0038 245.25)` | Maui Mist | black, 18.5 to 1 |
| 4 | `#e9ecee` | `oklch(94.12% 0.0045 245.64)` | Icewind Dale | black, 17.6 to 1 |
| 5 | `#e3e6e9` | `oklch(92.33% 0.0053 246.06)` | Little Dipper | black, 16.7 to 1 |
| 6 | `#dcdfe3` | `oklch(90.34% 0.0061 246.53)` | Terminator Chrome | black, 15.7 to 1 |
| 7 | `#d4d8dc` | `oklch(88.14% 0.0069 247.01)` | Supreme Pontiff | black, 14.7 to 1 |
| 8 | `#ccd1d5` | `oklch(85.76% 0.0077 247.50)` | Salina Springs | black, 13.6 to 1 |
| 9 | `#c4c8cd` | `oklch(83.20% 0.0084 247.98)` | Herring Silver | black, 12.5 to 1 |
| 10 | `#babfc5` | `oklch(80.34% 0.0092 248.48)` | Blue to You | black, 11.3 to 1 |
| 11 | `#b0b5bb` | `oklch(77.18% 0.0101 249.01)` | Cloud Cover | black, 10.2 to 1 |
| 12 | `#a5abb1` | `oklch(73.80% 0.0109 249.56)` | Laundry Blue | black, 9 to 1 |
| 13 | `#9aa0a6` | `oklch(70.27% 0.0118 250.12)` | Grey Wolf | black, 7.9 to 1 |
| 14 | `#8f959c` | `oklch(66.67% 0.0125 250.68)` | Dusky Grouse | black, 6.9 to 1 |
| 15 | `#848a91` | `oklch(63.08% 0.0131 251.25)` | Necron Compound | black, 6 to 1 |
| 16 | `#798087` | `oklch(59.57% 0.0136 251.81)` | Downing Slate | black, 5.2 to 1 |
| 17 | `#6f767d` | `oklch(56.19% 0.0139 252.36)` | Spitsbergen Blue | white, 4.6 to 1 |
| 18 | `#656c73` | `oklch(52.76% 0.0140 252.90)` | Wall Street | white, 5.3 to 1 |
| 19 | `#5c6269` | `oklch(49.28% 0.0140 253.45)` | Calligraphy | white, 6.1 to 1 |
| 20 | `#52585f` | `oklch(45.81% 0.0139 253.99)` | Edge of Black | white, 7.1 to 1 |
| 21 | `#494f56` | `oklch(42.37% 0.0137 254.54)` | Lamp Post | white, 8.3 to 1 |
| 22 | `#40454c` | `oklch(39.00% 0.0134 255.08)` | Alpine Duck Grey | white, 9.5 to 1 |
| 23 | `#383d43` | `oklch(35.75% 0.0130 255.63)` | Ferry | white, 10.9 to 1 |
| 24 | `#30353b` | `oklch(32.64% 0.0125 256.18)` | Blue Plaza | white, 12.3 to 1 |
| 25 | `#292d33` | `oklch(29.63% 0.0119 256.74)` | Deep Space Echo | white, 13.8 to 1 |
| 26 | `#22262b` | `oklch(26.56% 0.0111 257.35)` | Black Beauty | white, 15.2 to 1 |
| 27 | `#1b1e23` | `oklch(23.51% 0.0101 257.98)` | Satin Deep Black | white, 16.6 to 1 |
| 28 | `#15181c` | `oklch(20.58% 0.0090 258.61)` | Aswad Black | white, 17.8 to 1 |
| 29 | `#0f1115` | `oklch(17.85% 0.0079 259.21)` | Ruined Smores | white, 18.8 to 1 |
| 30 | `#0a0c0f` | `oklch(15.42% 0.0069 259.75)` | Black Wash | white, 19.5 to 1 |
| 31 | `#07080a` | `oklch(13.38% 0.0061 260.20)` | Reversed Grey | white, 20 to 1 |
| 32 | `#050507` | `oklch(11.81% 0.0055 260.54)` | Black Metal | white, 20.3 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f7f9fa 0.000% 3.125%, #f3f5f7 3.125% 6.250%, #eff1f3 6.250% 9.375%, #e9ecee 9.375% 12.500%, #e3e6e9 12.500% 15.625%, #dcdfe3 15.625% 18.750%, #d4d8dc 18.750% 21.875%, #ccd1d5 21.875% 25.000%, #c4c8cd 25.000% 28.125%, #babfc5 28.125% 31.250%, #b0b5bb 31.250% 34.375%, #a5abb1 34.375% 37.500%, #9aa0a6 37.500% 40.625%, #8f959c 40.625% 43.750%, #848a91 43.750% 46.875%, #798087 46.875% 50.000%, #6f767d 50.000% 53.125%, #656c73 53.125% 56.250%, #5c6269 56.250% 59.375%, #52585f 59.375% 62.500%, #494f56 62.500% 65.625%, #40454c 65.625% 68.750%, #383d43 68.750% 71.875%, #30353b 71.875% 75.000%, #292d33 75.000% 78.125%, #22262b 78.125% 81.250%, #1b1e23 81.250% 84.375%, #15181c 84.375% 87.500%, #0f1115 87.500% 90.625%, #0a0c0f 90.625% 93.750%, #07080a 93.750% 96.875%, #050507 96.875% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(98.03% 0.0028 244.69) 0.000% 3.125%, oklch(96.98% 0.0032 244.93) 3.125% 6.250%, oklch(95.67% 0.0038 245.25) 6.250% 9.375%, oklch(94.12% 0.0045 245.64) 9.375% 12.500%, oklch(92.33% 0.0053 246.06) 12.500% 15.625%, oklch(90.34% 0.0061 246.53) 15.625% 18.750%, oklch(88.14% 0.0069 247.01) 18.750% 21.875%, oklch(85.76% 0.0077 247.50) 21.875% 25.000%, oklch(83.20% 0.0084 247.98) 25.000% 28.125%, oklch(80.34% 0.0092 248.48) 28.125% 31.250%, oklch(77.18% 0.0101 249.01) 31.250% 34.375%, oklch(73.80% 0.0109 249.56) 34.375% 37.500%, oklch(70.27% 0.0118 250.12) 37.500% 40.625%, oklch(66.67% 0.0125 250.68) 40.625% 43.750%, oklch(63.08% 0.0131 251.25) 43.750% 46.875%, oklch(59.57% 0.0136 251.81) 46.875% 50.000%, oklch(56.19% 0.0139 252.36) 50.000% 53.125%, oklch(52.76% 0.0140 252.90) 53.125% 56.250%, oklch(49.28% 0.0140 253.45) 56.250% 59.375%, oklch(45.81% 0.0139 253.99) 59.375% 62.500%, oklch(42.37% 0.0137 254.54) 62.500% 65.625%, oklch(39.00% 0.0134 255.08) 65.625% 68.750%, oklch(35.75% 0.0130 255.63) 68.750% 71.875%, oklch(32.64% 0.0125 256.18) 71.875% 75.000%, oklch(29.63% 0.0119 256.74) 75.000% 78.125%, oklch(26.56% 0.0111 257.35) 78.125% 81.250%, oklch(23.51% 0.0101 257.98) 81.250% 84.375%, oklch(20.58% 0.0090 258.61) 84.375% 87.500%, oklch(17.85% 0.0079 259.21) 87.500% 90.625%, oklch(15.42% 0.0069 259.75) 90.625% 93.750%, oklch(13.38% 0.0061 260.20) 93.750% 96.875%, oklch(11.81% 0.0055 260.54) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.003 | 244.7 |
| 2 | 0.839 | 0.008 | 247.9 |
| 3 | 0.579 | 0.014 | 252.1 |
| 4 | 0.319 | 0.012 | 256.3 |
| 5 | 0.118 | 0.006 | 260.5 |

## In these collections

- [Silver gradients](https://grabient.com/silver-gradients)
- [Cool gray gradients](https://grabient.com/cool-gray-gradients)
- [Chrome gradients](https://grabient.com/chrome-gradients)

## Other forms

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