# White, gray, purple and beige linear gradient

White, gray, purple and beige linear gradient with 7 colors: #f5f0f4, #e0d7e1, #b4aaba, #82798e, #8f7fa7, #c795aa, #dbc3a7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW9AXsagg-csMvjVGcFaZFNo`
- Page: https://grabient.com/kW9AXsagg-csMvjVGcFaZFNo
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, neutral
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#f5f0f4` | `oklch(96.06% 0.0069 331.88)` | Grim White | black, 18.6 to 1 |
| 2 | `#e0d7e1` | `oklch(89.01% 0.0166 324.05)` | Pastel Day | black, 15 to 1 |
| 3 | `#b4aaba` | `oklch(75.01% 0.0255 313.44)` | Chatelle | black, 9.3 to 1 |
| 4 | `#82798e` | `oklch(59.06% 0.0344 304.40)` | Mythical | black, 5 to 1 |
| 5 | `#8f7fa7` | `oklch(62.50% 0.0619 303.42)` | Violet Chalk | black, 5.7 to 1 |
| 6 | `#c795aa` | `oklch(72.30% 0.0660 351.33)` | Honey Pink | black, 8.2 to 1 |
| 7 | `#dbc3a7` | `oklch(83.07% 0.0469 72.27)` | Elafonisi Beach | black, 12.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f5f0f4 0.0%, #e0d7e1 16.7%, #b4aaba 33.3%, #82798e 50.0%, #8f7fa7 66.7%, #c795aa 83.3%, #dbc3a7 100.0%);
background: linear-gradient(90deg in oklch, oklch(96.06% 0.0069 331.88) 0.0%, oklch(89.01% 0.0166 324.05) 16.7%, oklch(75.01% 0.0255 313.44) 33.3%, oklch(59.06% 0.0344 304.40) 50.0%, oklch(62.50% 0.0619 303.42) 66.7%, oklch(72.30% 0.0660 351.33) 83.3%, oklch(83.07% 0.0469 72.27) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.007 | 331.9 |
| 2 | 0.835 | 0.022 | 319.2 |
| 3 | 0.591 | 0.034 | 304.4 |
| 4 | 0.669 | 0.07 | 316 |
| 5 | 0.831 | 0.047 | 432.3 |

## In these collections

- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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