# Gray to brown linear gradient

Gray to brown linear gradient with 32 colors: #8a8a8a, #8a8887, #898683, #89837f, #88807a, #887d74, #877a6e, #867668, #847361, #836f5b, #816b54, #7f684d, #7c6447, #7a6040, #785d3b, #765935, #745531, #72512d, #6f4d2a, #6d4927, #6a4425, #673f24, #643b23, #613623, #5d3223, #592e23, #562a23, #522723, #4f2423, #4c2223, #491f23, #471e22. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSoQAnPRfByWXOU`
- Page: https://grabient.com/kSoQAnPRfByWXOU?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light to dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#8a8a8a` | `oklch(63.39% 0.0000 89.88)` | City Storm | black, 6 to 1 |
| 2 | `#8a8887` | `oklch(62.83% 0.0025 55.56)` | Falcon Grey | black, 5.9 to 1 |
| 3 | `#898683` | `oklch(62.18% 0.0057 56.63)` | Classic French Grey | black, 5.8 to 1 |
| 4 | `#89837f` | `oklch(61.43% 0.0095 58.00)` | Hagstone Choir | black, 5.6 to 1 |
| 5 | `#88807a` | `oklch(60.59% 0.0137 59.58)` | Susu Green | black, 5.4 to 1 |
| 6 | `#887d74` | `oklch(59.68% 0.0184 61.32)` | Spacious Grey | black, 5.2 to 1 |
| 7 | `#877a6e` | `oklch(58.70% 0.0234 63.13)` | Lost Summit | black, 5 to 1 |
| 8 | `#867668` | `oklch(57.67% 0.0285 64.94)` | Gosling | black, 4.8 to 1 |
| 9 | `#847361` | `oklch(56.59% 0.0338 66.70)` | Mudslide | black, 4.5 to 1 |
| 10 | `#836f5b` | `oklch(55.48% 0.0390 68.32)` | Golem | white, 4.7 to 1 |
| 11 | `#816b54` | `oklch(54.34% 0.0440 69.73)` | Salted Pretzel | white, 5 to 1 |
| 12 | `#7f684d` | `oklch(53.18% 0.0489 70.87)` | Anthill | white, 5.2 to 1 |
| 13 | `#7c6447` | `oklch(52.01% 0.0533 71.67)` | Arts and Crafts | white, 5.5 to 1 |
| 14 | `#7a6040` | `oklch(50.85% 0.0574 72.04)` | Eastlake | white, 5.8 to 1 |
| 15 | `#785d3b` | `oklch(49.71% 0.0608 71.93)` | Nut Oil | white, 6.1 to 1 |
| 16 | `#765935` | `oklch(48.58% 0.0636 71.26)` | Shingle Fawn | white, 6.4 to 1 |
| 17 | `#745531` | `oklch(47.47% 0.0657 69.95)` | Oak Barrel | white, 6.7 to 1 |
| 18 | `#72512d` | `oklch(46.29% 0.0672 67.87)` | Chocolate Rain | white, 7.1 to 1 |
| 19 | `#6f4d2a` | `oklch(45.02% 0.0683 65.13)` | Wagon Train | white, 7.5 to 1 |
| 20 | `#6d4927` | `oklch(43.70% 0.0689 61.81)` | Pickled Bean | white, 8 to 1 |
| 21 | `#6a4425` | `oklch(42.34% 0.0692 58.01)` | Flattery | white, 8.5 to 1 |
| 22 | `#673f24` | `oklch(40.95% 0.0691 53.85)` | Van Dyke Brown | white, 9 to 1 |
| 23 | `#643b23` | `oklch(39.55% 0.0688 49.43)` | Cassiterite Brown | white, 9.6 to 1 |
| 24 | `#613623` | `oklch(38.16% 0.0683 44.84)` | Chubby Chocolate | white, 10.2 to 1 |
| 25 | `#5d3223` | `oklch(36.80% 0.0676 40.20)` | Overbaked | white, 10.8 to 1 |
| 26 | `#592e23` | `oklch(35.49% 0.0669 35.60)` | Kōrozen | white, 11.4 to 1 |
| 27 | `#562a23` | `oklch(34.24% 0.0661 31.14)` | Worcestershire Sauce | white, 11.9 to 1 |
| 28 | `#522723` | `oklch(33.07% 0.0653 26.94)` | Bitter Chocolate | white, 12.5 to 1 |
| 29 | `#4f2423` | `oklch(31.99% 0.0646 23.09)` | Torrefacto Roast | white, 13 to 1 |
| 30 | `#4c2223` | `oklch(31.03% 0.0640 19.69)` | Lees | white, 13.5 to 1 |
| 31 | `#491f23` | `oklch(30.21% 0.0636 16.86)` | Dark Red Brown | white, 13.9 to 1 |
| 32 | `#471e22` | `oklch(29.53% 0.0634 14.69)` | Dark Red Brown | white, 14.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #8a8a8a 0.0%, #8a8887 3.2%, #898683 6.5%, #89837f 9.7%, #88807a 12.9%, #887d74 16.1%, #877a6e 19.4%, #867668 22.6%, #847361 25.8%, #836f5b 29.0%, #816b54 32.3%, #7f684d 35.5%, #7c6447 38.7%, #7a6040 41.9%, #785d3b 45.2%, #765935 48.4%, #745531 51.6%, #72512d 54.8%, #6f4d2a 58.1%, #6d4927 61.3%, #6a4425 64.5%, #673f24 67.7%, #643b23 71.0%, #613623 74.2%, #5d3223 77.4%, #592e23 80.6%, #562a23 83.9%, #522723 87.1%, #4f2423 90.3%, #4c2223 93.5%, #491f23 96.8%, #471e22 100.0%);
background: linear-gradient(135deg in oklch, oklch(63.39% 0.0000 89.88) 0.0%, oklch(62.83% 0.0025 55.56) 3.2%, oklch(62.18% 0.0057 56.63) 6.5%, oklch(61.43% 0.0095 58.00) 9.7%, oklch(60.59% 0.0137 59.58) 12.9%, oklch(59.68% 0.0184 61.32) 16.1%, oklch(58.70% 0.0234 63.13) 19.4%, oklch(57.67% 0.0285 64.94) 22.6%, oklch(56.59% 0.0338 66.70) 25.8%, oklch(55.48% 0.0390 68.32) 29.0%, oklch(54.34% 0.0440 69.73) 32.3%, oklch(53.18% 0.0489 70.87) 35.5%, oklch(52.01% 0.0533 71.67) 38.7%, oklch(50.85% 0.0574 72.04) 41.9%, oklch(49.71% 0.0608 71.93) 45.2%, oklch(48.58% 0.0636 71.26) 48.4%, oklch(47.47% 0.0657 69.95) 51.6%, oklch(46.29% 0.0672 67.87) 54.8%, oklch(45.02% 0.0683 65.13) 58.1%, oklch(43.70% 0.0689 61.81) 61.3%, oklch(42.34% 0.0692 58.01) 64.5%, oklch(40.95% 0.0691 53.85) 67.7%, oklch(39.55% 0.0688 49.43) 71.0%, oklch(38.16% 0.0683 44.84) 74.2%, oklch(36.80% 0.0676 40.20) 77.4%, oklch(35.49% 0.0669 35.60) 80.6%, oklch(34.24% 0.0661 31.14) 83.9%, oklch(33.07% 0.0653 26.94) 87.1%, oklch(31.99% 0.0646 23.09) 90.3%, oklch(31.03% 0.0640 19.69) 93.5%, oklch(30.21% 0.0636 16.86) 96.8%, oklch(29.53% 0.0634 14.69) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.634 | 0 | 54.8 |
| 2 | 0.48 | 0.065 | 70.7 |
| 3 | 0.295 | 0.063 | 14.7 |

## In these collections

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

## Other forms

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