# Gray and white linear gradient

Gray and white linear gradient with 7 colors: #b8aea1, #ccc4b7, #e2dcd1, #f1ede3, #eee9de, #d9d1c1, #c4baa9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYwBA3aodAXUFwH5BUBb4g_eSJv4`
- Page: https://grabient.com/kYwBA3aodAXUFwH5BUBb4g_eSJv4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: neutral, light, warm
- Hues: achromatic
- Contrast of its darkest and lightest colors: 1.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 | `#b8aea1` | `oklch(75.59% 0.0220 77.34)` | Marshy Habitat | black, 9.6 to 1 |
| 2 | `#ccc4b7` | `oklch(82.38% 0.0199 79.89)` | Sculptor Clay | black, 12.1 to 1 |
| 3 | `#e2dcd1` | `oklch(89.75% 0.0164 83.37)` | White Luxe | black, 15.4 to 1 |
| 4 | `#f1ede3` | `oklch(94.69% 0.0137 86.85)` | Flurries | black, 17.9 to 1 |
| 5 | `#eee9de` | `oklch(93.61% 0.0160 87.01)` | Palladian | black, 17.4 to 1 |
| 6 | `#d9d1c1` | `oklch(86.32% 0.0230 83.06)` | Clam | black, 13.8 to 1 |
| 7 | `#c4baa9` | `oklch(79.13% 0.0262 80.51)` | Castle Path | black, 10.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #b8aea1 0.0%, #ccc4b7 16.7%, #e2dcd1 33.3%, #f1ede3 50.0%, #eee9de 66.7%, #d9d1c1 83.3%, #c4baa9 100.0%);
background: linear-gradient(90deg in oklch, oklch(75.59% 0.0220 77.34) 0.0%, oklch(82.38% 0.0199 79.89) 16.7%, oklch(89.75% 0.0164 83.37) 33.3%, oklch(94.69% 0.0137 86.85) 50.0%, oklch(93.61% 0.0160 87.01) 66.7%, oklch(86.32% 0.0230 83.06) 83.3%, oklch(79.13% 0.0262 80.51) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.756 | 0.022 | 77.3 |
| 2 | 0.839 | 0.019 | 80.5 |
| 3 | 0.921 | 0.015 | 84.7 |
| 4 | 0.953 | 0.014 | 87.9 |
| 5 | 0.878 | 0.022 | 83.7 |
| 6 | 0.791 | 0.026 | 80.5 |

## In these collections

- [Beige](https://grabient.com/beige)

## Other forms

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