# White, gray and black radial gradient

White, gray and black radial gradient with 14 colors: #f7f9fa, #edeff1, #dee1e4, #cbcfd4, #b5bac0, #9ba1a7, #80878e, #696f76, #52575f, #3c4148, #2a2e34, #1a1d21, #0c0e11, #050507. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW-QKuaoNAUmFQGohMBjwJAY`
- Page: https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY?style=radialGradient&steps=14&angle=135
- Drawn as: radial gradient, 14 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 | `#edeff1` | `oklch(95.10% 0.0040 245.39)` | White Whale | black, 18.2 to 1 |
| 3 | `#dee1e4` | `oklch(90.81% 0.0059 246.42)` | Aura White | black, 15.9 to 1 |
| 4 | `#cbcfd4` | `oklch(85.37% 0.0078 247.57)` | Callisto | black, 13.4 to 1 |
| 5 | `#b5bac0` | `oklch(78.67% 0.0097 248.76)` | Dolphin at Play | black, 10.7 to 1 |
| 6 | `#9ba1a7` | `oklch(70.54% 0.0117 250.07)` | Grey Wolf | black, 8 to 1 |
| 7 | `#80878e` | `oklch(61.99% 0.0133 251.42)` | Heavy Grey | black, 5.7 to 1 |
| 8 | `#696f76` | `oklch(53.82% 0.0140 252.74)` | Dapper Greyhound | white, 5 to 1 |
| 9 | `#52575f` | `oklch(45.54% 0.0139 254.04)` | Edge of Black | white, 7.2 to 1 |
| 10 | `#3c4148` | `oklch(37.48% 0.0132 255.34)` | Chimney Smoke | white, 10.2 to 1 |
| 11 | `#2a2e34` | `oklch(30.10% 0.0120 256.65)` | Deep Space Echo | white, 13.5 to 1 |
| 12 | `#1a1d21` | `oklch(22.82% 0.0098 258.13)` | Satin Deep Black | white, 16.9 to 1 |
| 13 | `#0c0e11` | `oklch(16.32% 0.0073 259.55)` | Chaos Black | white, 19.3 to 1 |
| 14 | `#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.0%, #edeff1 7.7%, #dee1e4 15.4%, #cbcfd4 23.1%, #b5bac0 30.8%, #9ba1a7 38.5%, #80878e 46.2%, #696f76 53.8%, #52575f 61.5%, #3c4148 69.2%, #2a2e34 76.9%, #1a1d21 84.6%, #0c0e11 92.3%, #050507 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(98.03% 0.0028 244.69) 0.0%, oklch(95.10% 0.0040 245.39) 7.7%, oklch(90.81% 0.0059 246.42) 15.4%, oklch(85.37% 0.0078 247.57) 23.1%, oklch(78.67% 0.0097 248.76) 30.8%, oklch(70.54% 0.0117 250.07) 38.5%, oklch(61.99% 0.0133 251.42) 46.2%, oklch(53.82% 0.0140 252.74) 53.8%, oklch(45.54% 0.0139 254.04) 61.5%, oklch(37.48% 0.0132 255.34) 69.2%, oklch(30.10% 0.0120 256.65) 76.9%, oklch(22.82% 0.0098 258.13) 84.6%, oklch(16.32% 0.0073 259.55) 92.3%, oklch(11.81% 0.0055 260.54) 100.0%);
```

## 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=radialGradient&steps=14&angle=135)
- [PNG](https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY.png?style=radialGradient&steps=14&angle=135)
- [SVG](https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY.svg?style=radialGradient&steps=14&angle=135)
- [CSS](https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY.css?style=radialGradient&steps=14&angle=135)
- [ASE](https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY.ase?style=radialGradient&steps=14&angle=135)
- [GPL](https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY.gpl?style=radialGradient&steps=14&angle=135)
- [GRD](https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY.grd?style=radialGradient&steps=14&angle=135)
- [Design tokens](https://grabient.com/kW-QKuaoNAUmFQGohMBjwJAY.tokens.json?style=radialGradient&steps=14&angle=135)
- [Social card](https://grabient.com/api/og?seed=kW-QKuaoNAUmFQGohMBjwJAY&style=radialGradient&steps=14&angle=135)
- [Palettes like this one](https://grabient.com/palettes?q=kW-QKuaoNAUmFQGohMBjwJAY)
- [Guide for agents](https://grabient.com/llms.txt)