# Gray and white linear gradient

Gray and white linear gradient with 7 colors: #737f87, #c9cfd2, #d7e4dc, #c8ac98, #edefe4, #c8cdcd, #505c65. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWlg2md4K9GEPrj8gcuO4fJw`
- Page: https://grabient.com/kWlg2md4K9GEPrj8gcuO4fJw
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, neutral, light
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.8 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 | `#737f87` | `oklch(59.06% 0.0179 233.44)` | Bay Wharf | black, 5.1 to 1 |
| 2 | `#c9cfd2` | `oklch(85.02% 0.0075 227.45)` | Callisto | black, 13.3 to 1 |
| 3 | `#d7e4dc` | `oklch(90.64% 0.0181 159.23)` | Cactus Blossom | black, 16 to 1 |
| 4 | `#c8ac98` | `oklch(76.38% 0.0427 59.07)` | Sanderling | black, 9.8 to 1 |
| 5 | `#edefe4` | `oklch(94.75% 0.0157 116.49)` | Creamy Garlic | black, 18 to 1 |
| 6 | `#c8cdcd` | `oklch(84.47% 0.0062 189.37)` | Where There Is Smoke | black, 13 to 1 |
| 7 | `#505c65` | `oklch(46.85% 0.0207 240.83)` | Novelty Navy | white, 6.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #737f87 0.0%, #c9cfd2 16.7%, #d7e4dc 33.3%, #c8ac98 50.0%, #edefe4 66.7%, #c8cdcd 83.3%, #505c65 100.0%);
background: linear-gradient(90deg in oklch, oklch(59.06% 0.0179 233.44) 0.0%, oklch(85.02% 0.0075 227.45) 16.7%, oklch(90.64% 0.0181 159.23) 33.3%, oklch(76.38% 0.0427 59.07) 50.0%, oklch(94.75% 0.0157 116.49) 66.7%, oklch(84.47% 0.0062 189.37) 83.3%, oklch(46.85% 0.0207 240.83) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.591 | 0.018 | 233.4 |
| 2 | 0.941 | 0.007 | 209.1 |
| 3 | 0.764 | 0.043 | 59.1 |
| 4 | 0.98 | 0.004 | 157.4 |
| 5 | 0.469 | 0.021 | 240.8 |

## In these collections

- [Muted multicolor swatches](https://grabient.com/muted-multicolor-swatches)
- [Muted swatches](https://grabient.com/muted-swatches)
- [Silver color palette](https://grabient.com/silver-color-palette)

## Other forms

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