# Gray to brown linear gradient

Gray to brown linear gradient with 32 colors: #8b6c6e, #8a6b6d, #886a6c, #86686a, #846768, #816567, #7f6365, #7c6163, #795f60, #765d5e, #735b5c, #70595a, #6d5758, #6b5556, #685354, #665152, #634f50, #614d4e, #5f4b4c, #5c494b, #5a4749, #584547, #564345, #534143, #514041, #4f3e3f, #4d3c3e, #4b3b3c, #4a393b, #48383a, #473739, #463638. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSjx0KOYpACyIv0`
- Page: https://grabient.com/kSjx0KOYpACyIv0?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: neutral, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.4 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 | `#8b6c6e` | `oklch(56.30% 0.0400 14.06)` | Chocolate Sparkle | white, 4.6 to 1 |
| 2 | `#8a6b6d` | `oklch(55.90% 0.0395 14.11)` | Chocolate Sparkle | white, 4.7 to 1 |
| 3 | `#886a6c` | `oklch(55.41% 0.0389 14.19)` | Ferra | white, 4.8 to 1 |
| 4 | `#86686a` | `oklch(54.85% 0.0382 14.30)` | Mauving Up | white, 4.9 to 1 |
| 5 | `#846768` | `oklch(54.22% 0.0374 14.42)` | Brazil Nut | white, 5.1 to 1 |
| 6 | `#816567` | `oklch(53.53% 0.0366 14.55)` | Amazing Amethyst | white, 5.2 to 1 |
| 7 | `#7f6365` | `oklch(52.80% 0.0357 14.69)` | Amazing Amethyst | white, 5.4 to 1 |
| 8 | `#7c6163` | `oklch(52.03% 0.0347 14.82)` | Pretty Puce | white, 5.6 to 1 |
| 9 | `#795f60` | `oklch(51.22% 0.0338 14.95)` | Reading Tea Leaves | white, 5.7 to 1 |
| 10 | `#765d5e` | `oklch(50.41% 0.0328 15.07)` | Dove Feather | white, 5.9 to 1 |
| 11 | `#735b5c` | `oklch(49.58% 0.0319 15.17)` | Peppercorn | white, 6.2 to 1 |
| 12 | `#70595a` | `oklch(48.75% 0.0309 15.24)` | Falcon | white, 6.4 to 1 |
| 13 | `#6d5758` | `oklch(47.93% 0.0300 15.29)` | Grand Plum | white, 6.6 to 1 |
| 14 | `#6b5556` | `oklch(47.13% 0.0292 15.30)` | Grand Plum | white, 6.8 to 1 |
| 15 | `#685354` | `oklch(46.36% 0.0285 15.26)` | Ripe Fig | white, 7.1 to 1 |
| 16 | `#665152` | `oklch(45.62% 0.0278 15.18)` | Robeson Rose | white, 7.3 to 1 |
| 17 | `#634f50` | `oklch(44.93% 0.0273 15.04)` | Robeson Rose | white, 7.5 to 1 |
| 18 | `#614d4e` | `oklch(44.21% 0.0268 14.84)` | Soul Searching | white, 7.8 to 1 |
| 19 | `#5f4b4c` | `oklch(43.47% 0.0264 14.57)` | Raisin | white, 8 to 1 |
| 20 | `#5c494b` | `oklch(42.71% 0.0260 14.25)` | Deep Aubergine | white, 8.3 to 1 |
| 21 | `#5a4749` | `oklch(41.94% 0.0256 13.89)` | Wild Boysenberry | white, 8.5 to 1 |
| 22 | `#584547` | `oklch(41.17% 0.0253 13.50)` | Mahogany Spice | white, 8.8 to 1 |
| 23 | `#564345` | `oklch(40.40% 0.0250 13.08)` | Christmas Pudding | white, 9.1 to 1 |
| 24 | `#534143` | `oklch(39.65% 0.0248 12.65)` | Rich Bordeaux | white, 9.4 to 1 |
| 25 | `#514041` | `oklch(38.92% 0.0245 12.22)` | Rich Bordeaux | white, 9.7 to 1 |
| 26 | `#4f3e3f` | `oklch(38.22% 0.0243 11.79)` | Magenta Ink | white, 10 to 1 |
| 27 | `#4d3c3e` | `oklch(37.56% 0.0242 11.37)` | Burnt Bamboo | white, 10.3 to 1 |
| 28 | `#4b3b3c` | `oklch(36.93% 0.0240 10.98)` | Burnt Bamboo | white, 10.5 to 1 |
| 29 | `#4a393b` | `oklch(36.36% 0.0238 10.62)` | Vibrant Vine | white, 10.8 to 1 |
| 30 | `#48383a` | `oklch(35.85% 0.0237 10.30)` | Warm Operator’s Overalls | white, 11 to 1 |
| 31 | `#473739` | `oklch(35.41% 0.0236 10.04)` | Judah Silk | white, 11.2 to 1 |
| 32 | `#463638` | `oklch(35.04% 0.0234 9.84)` | Noblesse Oblige | white, 11.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #8b6c6e 0.0%, #8a6b6d 3.2%, #886a6c 6.5%, #86686a 9.7%, #846768 12.9%, #816567 16.1%, #7f6365 19.4%, #7c6163 22.6%, #795f60 25.8%, #765d5e 29.0%, #735b5c 32.3%, #70595a 35.5%, #6d5758 38.7%, #6b5556 41.9%, #685354 45.2%, #665152 48.4%, #634f50 51.6%, #614d4e 54.8%, #5f4b4c 58.1%, #5c494b 61.3%, #5a4749 64.5%, #584547 67.7%, #564345 71.0%, #534143 74.2%, #514041 77.4%, #4f3e3f 80.6%, #4d3c3e 83.9%, #4b3b3c 87.1%, #4a393b 90.3%, #48383a 93.5%, #473739 96.8%, #463638 100.0%);
background: linear-gradient(90deg in oklch, oklch(56.30% 0.0400 14.06) 0.0%, oklch(55.90% 0.0395 14.11) 3.2%, oklch(55.41% 0.0389 14.19) 6.5%, oklch(54.85% 0.0382 14.30) 9.7%, oklch(54.22% 0.0374 14.42) 12.9%, oklch(53.53% 0.0366 14.55) 16.1%, oklch(52.80% 0.0357 14.69) 19.4%, oklch(52.03% 0.0347 14.82) 22.6%, oklch(51.22% 0.0338 14.95) 25.8%, oklch(50.41% 0.0328 15.07) 29.0%, oklch(49.58% 0.0319 15.17) 32.3%, oklch(48.75% 0.0309 15.24) 35.5%, oklch(47.93% 0.0300 15.29) 38.7%, oklch(47.13% 0.0292 15.30) 41.9%, oklch(46.36% 0.0285 15.26) 45.2%, oklch(45.62% 0.0278 15.18) 48.4%, oklch(44.93% 0.0273 15.04) 51.6%, oklch(44.21% 0.0268 14.84) 54.8%, oklch(43.47% 0.0264 14.57) 58.1%, oklch(42.71% 0.0260 14.25) 61.3%, oklch(41.94% 0.0256 13.89) 64.5%, oklch(41.17% 0.0253 13.50) 67.7%, oklch(40.40% 0.0250 13.08) 71.0%, oklch(39.65% 0.0248 12.65) 74.2%, oklch(38.92% 0.0245 12.22) 77.4%, oklch(38.22% 0.0243 11.79) 80.6%, oklch(37.56% 0.0242 11.37) 83.9%, oklch(36.93% 0.0240 10.98) 87.1%, oklch(36.36% 0.0238 10.62) 90.3%, oklch(35.85% 0.0237 10.30) 93.5%, oklch(35.41% 0.0236 10.04) 96.8%, oklch(35.04% 0.0234 9.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.563 | 0.04 | 14.1 |
| 2 | 0.453 | 0.028 | 15.1 |
| 3 | 0.35 | 0.023 | 9.8 |

## In these collections

- [Warm neutral gradients](https://grabient.com/warm-neutral-gradients)
- [Minimal color palette](https://grabient.com/minimal-color-palette)

## Other forms

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