# Maroon, pink, gray and brown linear gradient

Maroon, pink, gray and brown linear gradient with 7 colors: #540f20, #a36e73, #d9bbbb, #826863, #31180b, #4e3e1f, #7a7e58. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUTEkI6AzAp6Qw3JlEeA`
- Page: https://grabient.com/kUTEkI6AzAp6Qw3JlEeA
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: muted, warm, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 9.3 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 | `#540f20` | `oklch(29.92% 0.1006 11.95)` | Maroon Oak | white, 14.2 to 1 |
| 2 | `#a36e73` | `oklch(59.52% 0.0668 13.27)` | Turkish Rose | black, 5 to 1 |
| 3 | `#d9bbbb` | `oklch(81.89% 0.0344 18.29)` | Bombay Pink | black, 11.8 to 1 |
| 4 | `#826863` | `oklch(54.08% 0.0352 29.46)` | Pharlap | white, 5.1 to 1 |
| 5 | `#31180b` | `oklch(24.02% 0.0455 47.88)` | Darkout | white, 16.6 to 1 |
| 6 | `#4e3e1f` | `oklch(37.33% 0.0510 81.96)` | Avocado Stone | white, 10.3 to 1 |
| 7 | `#7a7e58` | `oklch(57.87% 0.0551 112.34)` | Grape Vine | black, 4.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #540f20 0.0%, #a36e73 16.7%, #d9bbbb 33.3%, #826863 50.0%, #31180b 66.7%, #4e3e1f 83.3%, #7a7e58 100.0%);
background: linear-gradient(90deg in oklch, oklch(29.92% 0.1006 11.95) 0.0%, oklch(59.52% 0.0668 13.27) 16.7%, oklch(81.89% 0.0344 18.29) 33.3%, oklch(54.08% 0.0352 29.46) 50.0%, oklch(24.02% 0.0455 47.88) 66.7%, oklch(37.33% 0.0510 81.96) 83.3%, oklch(57.87% 0.0551 112.34) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.299 | 0.101 | 12 |
| 2 | 0.819 | 0.034 | 18.3 |
| 3 | 0.24 | 0.045 | 47.9 |
| 4 | 0.579 | 0.055 | 112.3 |

## In these collections

- [Fall swatches](https://grabient.com/fall-swatches)
- [Red and green swatches](https://grabient.com/red-and-green-swatches)

## Other forms

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