# Monochrome brown and tan linear gradient

Monochrome brown and tan linear gradient with 7 colors: #4d332a, #66483b, #8b6c5a, #b0927b, #9b7963, #6e5042, #3e2c26. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWWR4dPZHAtaRwXEEz6p4q-Y`
- Page: https://grabient.com/kWWR4dPZHAtaRwXEEz6p4q-Y
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, muted, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.5 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 | `#4d332a` | `oklch(35.04% 0.0413 40.78)` | Barn Swallow | white, 11.4 to 1 |
| 2 | `#66483b` | `oklch(43.00% 0.0462 44.30)` | Choco Death | white, 8.2 to 1 |
| 3 | `#8b6c5a` | `oklch(55.79% 0.0486 51.74)` | Mocha Madness | white, 4.7 to 1 |
| 4 | `#b0927b` | `oklch(68.11% 0.0482 59.80)` | Rikyūshira Brown | black, 7.2 to 1 |
| 5 | `#9b7963` | `oklch(60.25% 0.0529 53.78)` | Fudge Bar | black, 5.2 to 1 |
| 6 | `#6e5042` | `oklch(45.82% 0.0457 44.70)` | Moroccan Henna | white, 7.3 to 1 |
| 7 | `#3e2c26` | `oklch(31.10% 0.0289 36.55)` | English Walnut | white, 13.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #4d332a 0.0%, #66483b 16.7%, #8b6c5a 33.3%, #b0927b 50.0%, #9b7963 66.7%, #6e5042 83.3%, #3e2c26 100.0%);
background: linear-gradient(90deg in oklch, oklch(35.04% 0.0413 40.78) 0.0%, oklch(43.00% 0.0462 44.30) 16.7%, oklch(55.79% 0.0486 51.74) 33.3%, oklch(68.11% 0.0482 59.80) 50.0%, oklch(60.25% 0.0529 53.78) 66.7%, oklch(45.82% 0.0457 44.70) 83.3%, oklch(31.10% 0.0289 36.55) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.35 | 0.041 | 40.8 |
| 2 | 0.484 | 0.048 | 47.1 |
| 3 | 0.681 | 0.048 | 59.8 |
| 4 | 0.535 | 0.052 | 49.2 |
| 5 | 0.311 | 0.029 | 36.6 |

## In these collections

- [Brown gradients](https://grabient.com/brown-gradients)
- [Brown swatches](https://grabient.com/brown-swatches)

## Other forms

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