# White to gray linear gradient

White to gray linear gradient with 32 colors: #f4f3ef, #ecece7, #dfe1dd, #d1d5d1, #c1c8c5, #b2baba, #a3acae, #979fa4, #8c9399, #80878e, #737a82, #656e75, #59626a, #4f5960, #485259, #454e56, #484e58, #53545f, #635f68, #766d73, #887d7e, #978d8a, #a29a95, #a7a19b, #a6a09a, #9f9894, #958c8b, #877f81, #777176, #67646b, #5a5a61, #51545a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW9QRD1QTRDUGwVahFTOIQso`
- Page: https://grabient.com/kW9QRD1QTRDUGwVahFTOIQso?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark center, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 7.6 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 | `#ecece7` | `oklch(94.06% 0.0061 107.48)` | Whipped Coconut Cream | black, 17.6 to 1 |
| 3 | `#dfe1dd` | `oklch(90.83% 0.0068 125.29)` | City Brume | black, 16 to 1 |
| 4 | `#d1d5d1` | `oklch(86.97% 0.0077 146.55)` | Foggy Dew | black, 14.1 to 1 |
| 5 | `#c1c8c5` | `oklch(82.72% 0.0087 169.48)` | Sonnet Grey | black, 12.3 to 1 |
| 6 | `#b2baba` | `oklch(78.29% 0.0098 192.28)` | Silver Mistral | black, 10.6 to 1 |
| 7 | `#a3acae` | `oklch(73.89% 0.0108 213.16)` | Gull Grey | black, 9.1 to 1 |
| 8 | `#979fa4` | `oklch(69.74% 0.0118 230.33)` | UFO | black, 7.8 to 1 |
| 9 | `#8c9399` | `oklch(66.02% 0.0126 242.00)` | Quarry | black, 6.7 to 1 |
| 10 | `#80878e` | `oklch(62.02% 0.0135 247.33)` | Heavy Grey | black, 5.7 to 1 |
| 11 | `#737a82` | `oklch(57.66% 0.0145 247.88)` | Liquid Mercury | black, 4.8 to 1 |
| 12 | `#656e75` | `oklch(53.26% 0.0154 245.57)` | Wall Street | white, 5.2 to 1 |
| 13 | `#59626a` | `oklch(49.15% 0.0163 242.32)` | Calligraphy | white, 6.2 to 1 |
| 14 | `#4f5960` | `oklch(45.66% 0.0171 240.06)` | Dark and Stormy Night | white, 7.2 to 1 |
| 15 | `#485259` | `oklch(43.10% 0.0176 240.71)` | Vermont Slate | white, 8 to 1 |
| 16 | `#454e56` | `oklch(41.80% 0.0179 246.18)` | Deepest Sea | white, 8.5 to 1 |
| 17 | `#484e58` | `oklch(42.20% 0.0178 258.71)` | Blue Sash | white, 8.3 to 1 |
| 18 | `#53545f` | `oklch(44.85% 0.0173 280.23)` | Coal Tipple | white, 7.5 to 1 |
| 19 | `#635f68` | `oklch(49.19% 0.0164 308.00)` | Windsor Grey | white, 6.2 to 1 |
| 20 | `#766d73` | `oklch(54.50% 0.0153 338.80)` | Pineal Pink | white, 4.9 to 1 |
| 21 | `#887d7e` | `oklch(60.06% 0.0141 9.36)` | Classy Plum | black, 5.2 to 1 |
| 22 | `#978d8a` | `oklch(65.17% 0.0129 36.43)` | Gourmet Mushroom | black, 6.5 to 1 |
| 23 | `#a29a95` | `oklch(69.09% 0.0119 56.78)` | Flint Grey | black, 7.5 to 1 |
| 24 | `#a7a19b` | `oklch(71.13% 0.0111 67.15)` | Missouri Mud | black, 8.1 to 1 |
| 25 | `#a6a09a` | `oklch(70.78% 0.0108 64.75)` | Missouri Mud | black, 8 to 1 |
| 26 | `#9f9894` | `oklch(68.50% 0.0106 50.79)` | Polished Concrete | black, 7.4 to 1 |
| 27 | `#958c8b` | `oklch(64.83% 0.0105 28.49)` | Greylac | black, 6.4 to 1 |
| 28 | `#877f81` | `oklch(60.32% 0.0106 1.08)` | Classy Plum | black, 5.3 to 1 |
| 29 | `#777176` | `oklch(55.49% 0.0107 331.80)` | Steel Armour | white, 4.7 to 1 |
| 30 | `#67646b` | `oklch(50.89% 0.0109 303.88)` | Cracked Slate | white, 5.7 to 1 |
| 31 | `#5a5a61` | `oklch(47.04% 0.0110 280.55)` | Iron Gate | white, 6.8 to 1 |
| 32 | `#51545a` | `oklch(44.49% 0.0110 265.06)` | Orion Grey | white, 7.6 to 1 |

## CSS

```css
background: linear-gradient(45deg, #f4f3ef 0.0%, #ecece7 3.2%, #dfe1dd 6.5%, #d1d5d1 9.7%, #c1c8c5 12.9%, #b2baba 16.1%, #a3acae 19.4%, #979fa4 22.6%, #8c9399 25.8%, #80878e 29.0%, #737a82 32.3%, #656e75 35.5%, #59626a 38.7%, #4f5960 41.9%, #485259 45.2%, #454e56 48.4%, #484e58 51.6%, #53545f 54.8%, #635f68 58.1%, #766d73 61.3%, #887d7e 64.5%, #978d8a 67.7%, #a29a95 71.0%, #a7a19b 74.2%, #a6a09a 77.4%, #9f9894 80.6%, #958c8b 83.9%, #877f81 87.1%, #777176 90.3%, #67646b 93.5%, #5a5a61 96.8%, #51545a 100.0%);
background: linear-gradient(45deg in oklch, oklch(96.46% 0.0055 94.92) 0.0%, oklch(94.06% 0.0061 107.48) 3.2%, oklch(90.83% 0.0068 125.29) 6.5%, oklch(86.97% 0.0077 146.55) 9.7%, oklch(82.72% 0.0087 169.48) 12.9%, oklch(78.29% 0.0098 192.28) 16.1%, oklch(73.89% 0.0108 213.16) 19.4%, oklch(69.74% 0.0118 230.33) 22.6%, oklch(66.02% 0.0126 242.00) 25.8%, oklch(62.02% 0.0135 247.33) 29.0%, oklch(57.66% 0.0145 247.88) 32.3%, oklch(53.26% 0.0154 245.57) 35.5%, oklch(49.15% 0.0163 242.32) 38.7%, oklch(45.66% 0.0171 240.06) 41.9%, oklch(43.10% 0.0176 240.71) 45.2%, oklch(41.80% 0.0179 246.18) 48.4%, oklch(42.20% 0.0178 258.71) 51.6%, oklch(44.85% 0.0173 280.23) 54.8%, oklch(49.19% 0.0164 308.00) 58.1%, oklch(54.50% 0.0153 338.80) 61.3%, oklch(60.06% 0.0141 9.36) 64.5%, oklch(65.17% 0.0129 36.43) 67.7%, oklch(69.09% 0.0119 56.78) 71.0%, oklch(71.13% 0.0111 67.15) 74.2%, oklch(70.78% 0.0108 64.75) 77.4%, oklch(68.50% 0.0106 50.79) 80.6%, oklch(64.83% 0.0105 28.49) 83.9%, oklch(60.32% 0.0106 1.08) 87.1%, oklch(55.49% 0.0107 331.80) 90.3%, oklch(50.89% 0.0109 303.88) 93.5%, oklch(47.04% 0.0110 280.55) 96.8%, oklch(44.49% 0.0110 265.06) 100.0%);
```

## 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.669 | 0.012 | 239.7 |
| 3 | 0.417 | 0.018 | 251.3 |
| 4 | 0.713 | 0.011 | 427.8 |
| 5 | 0.445 | 0.011 | 265.1 |

## In these collections

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

## Other forms

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