# Brown, mauve, pink and white linear gradient

Brown, mauve, pink and white linear gradient with 7 colors: #39201a, #af7c79, #dcb0ab, #e8c7b1, #ebdaba, #f6ead6, #fef8ea. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYRh0Y2Bg-eiQwVvEsVdoxAPyHQO`
- Page: https://grabient.com/kYRh0Y2Bg-eiQwVvEsVdoxAPyHQO
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, pastel, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 14.1 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 | `#39201a` | `oklch(27.56% 0.0400 34.45)` | Scorched | white, 15 to 1 |
| 2 | `#af7c79` | `oklch(63.52% 0.0642 22.63)` | Ferris Wheel | black, 5.9 to 1 |
| 3 | `#dcb0ab` | `oklch(79.60% 0.0522 26.12)` | Borlotti Bean | black, 10.8 to 1 |
| 4 | `#e8c7b1` | `oklch(85.29% 0.0481 56.71)` | Pinkham | black, 13.2 to 1 |
| 5 | `#ebdaba` | `oklch(89.36% 0.0466 82.52)` | Porcelain Pink | black, 15.2 to 1 |
| 6 | `#f6ead6` | `oklch(94.22% 0.0304 82.09)` | Marquee White | black, 17.7 to 1 |
| 7 | `#fef8ea` | `oklch(98.03% 0.0193 89.40)` | Toasted Marshmallow Fluff | black, 19.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #39201a 0.0%, #af7c79 16.7%, #dcb0ab 33.3%, #e8c7b1 50.0%, #ebdaba 66.7%, #f6ead6 83.3%, #fef8ea 100.0%);
background: linear-gradient(90deg in oklch, oklch(27.56% 0.0400 34.45) 0.0%, oklch(63.52% 0.0642 22.63) 16.7%, oklch(79.60% 0.0522 26.12) 33.3%, oklch(85.29% 0.0481 56.71) 50.0%, oklch(89.36% 0.0466 82.52) 66.7%, oklch(94.22% 0.0304 82.09) 83.3%, oklch(98.03% 0.0193 89.40) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.04 | 34.5 |
| 2 | 0.693 | 0.066 | 21.8 |
| 3 | 0.823 | 0.045 | 33.4 |
| 4 | 0.874 | 0.051 | 78.8 |
| 5 | 0.933 | 0.033 | 81 |
| 6 | 0.98 | 0.019 | 89.4 |

## In these collections

- [Luxury swatches](https://grabient.com/luxury-swatches)

## Other forms

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