# Moss to Burnt Clay

The gradient follows a complete visible route from #171b16 to #3b2a23, passing through near-black, cool gray, yellow-green, gold, orange, and orange-red. The continuous transitions create both calm intermediate areas and stronger color turns for foreground placement.

- Also called: Black, dark green, olive and brown linear gradient
- Seed: `kWNwhjLhA_8McvXRJLxpoq6g`
- Page: https://grabient.com/kWNwhjLhA_8McvXRJLxpoq6g?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center
- Hues: wide
- Contrast of its darkest and lightest colors: 5.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 | `#171b16` | `oklch(21.65% 0.0110 139.22)` | Twilight Zone | white, 17.4 to 1 |
| 2 | `#191e18` | `oklch(22.81% 0.0137 139.37)` | Coco’s Black | white, 16.9 to 1 |
| 3 | `#1c221a` | `oklch(24.33% 0.0172 139.74)` | Underworld | white, 16.2 to 1 |
| 4 | `#1f271d` | `oklch(26.14% 0.0214 140.19)` | Underworld | white, 15.3 to 1 |
| 5 | `#222d20` | `oklch(28.16% 0.0260 140.58)` | Quartzite | white, 14.3 to 1 |
| 6 | `#263324` | `oklch(30.31% 0.0309 140.78)` | Mountain Range Green | white, 13.3 to 1 |
| 7 | `#2a3927` | `oklch(32.51% 0.0359 140.65)` | Palm Green | white, 12.2 to 1 |
| 8 | `#2e3f2b` | `oklch(34.67% 0.0407 140.05)` | English Holly | white, 11.2 to 1 |
| 9 | `#33452e` | `oklch(36.73% 0.0452 138.86)` | Palm Leaf | white, 10.3 to 1 |
| 10 | `#384b30` | `oklch(38.84% 0.0497 137.10)` | Nettle Green | white, 9.4 to 1 |
| 11 | `#3e5133` | `oklch(41.04% 0.0544 134.88)` | Highlander | white, 8.6 to 1 |
| 12 | `#445835` | `oklch(43.30% 0.0591 132.28)` | Trefoil | white, 7.8 to 1 |
| 13 | `#4b5e37` | `oklch(45.55% 0.0638 129.38)` | Stinging Nettle | white, 7.1 to 1 |
| 14 | `#536439` | `oklch(47.76% 0.0683 126.27)` | Interior Green | white, 6.4 to 1 |
| 15 | `#5b6a3a` | `oklch(49.87% 0.0726 123.03)` | Spring Onion | white, 5.9 to 1 |
| 16 | `#636f3a` | `oklch(51.84% 0.0767 119.73)` | Venom Wyrm | white, 5.4 to 1 |
| 17 | `#6b743b` | `oklch(53.71% 0.0805 116.44)` | Cedar Green | white, 5 to 1 |
| 18 | `#747a3c` | `oklch(55.91% 0.0850 113.13)` | Hot Dog Relish | white, 4.5 to 1 |
| 19 | `#7f803d` | `oklch(58.29% 0.0899 109.72)` | Green Commando | black, 5 to 1 |
| 20 | `#89853d` | `oklch(60.60% 0.0946 106.18)` | Apeland | black, 5.5 to 1 |
| 21 | `#938a3e` | `oklch(62.58% 0.0986 102.46)` | Cider Mill | black, 5.9 to 1 |
| 22 | `#9c8d3e` | `oklch(64.00% 0.1014 98.50)` | Jalapeño | black, 6.2 to 1 |
| 23 | `#a28d3d` | `oklch(64.59% 0.1025 94.26)` | Autumn Festival | black, 6.4 to 1 |
| 24 | `#a5893c` | `oklch(64.10% 0.1013 89.69)` | Peanut Brittle | black, 6.2 to 1 |
| 25 | `#a2823b` | `oklch(62.16% 0.0971 84.53)` | Indian Brass | black, 5.7 to 1 |
| 26 | `#997539` | `oklch(58.57% 0.0893 78.41)` | Heavy Ochre | black, 4.9 to 1 |
| 27 | `#8b6637` | `oklch(53.83% 0.0792 71.70)` | Beagle Brown | white, 5.1 to 1 |
| 28 | `#795734` | `oklch(48.43% 0.0676 64.78)` | Cold Brew Coffee | white, 6.5 to 1 |
| 29 | `#674830` | `oklch(42.88% 0.0558 58.07)` | Buckeye | white, 8.2 to 1 |
| 30 | `#553b2b` | `oklch(37.67% 0.0447 51.94)` | Tuk Tuk | white, 10.2 to 1 |
| 31 | `#463127` | `oklch(33.32% 0.0354 46.81)` | Slugger | white, 12.2 to 1 |
| 32 | `#3b2a23` | `oklch(30.31% 0.0289 43.05)` | Tree House | white, 13.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #171b16 0.0%, #191e18 3.2%, #1c221a 6.5%, #1f271d 9.7%, #222d20 12.9%, #263324 16.1%, #2a3927 19.4%, #2e3f2b 22.6%, #33452e 25.8%, #384b30 29.0%, #3e5133 32.3%, #445835 35.5%, #4b5e37 38.7%, #536439 41.9%, #5b6a3a 45.2%, #636f3a 48.4%, #6b743b 51.6%, #747a3c 54.8%, #7f803d 58.1%, #89853d 61.3%, #938a3e 64.5%, #9c8d3e 67.7%, #a28d3d 71.0%, #a5893c 74.2%, #a2823b 77.4%, #997539 80.6%, #8b6637 83.9%, #795734 87.1%, #674830 90.3%, #553b2b 93.5%, #463127 96.8%, #3b2a23 100.0%);
background: linear-gradient(90deg in oklch, oklch(21.65% 0.0110 139.22) 0.0%, oklch(22.81% 0.0137 139.37) 3.2%, oklch(24.33% 0.0172 139.74) 6.5%, oklch(26.14% 0.0214 140.19) 9.7%, oklch(28.16% 0.0260 140.58) 12.9%, oklch(30.31% 0.0309 140.78) 16.1%, oklch(32.51% 0.0359 140.65) 19.4%, oklch(34.67% 0.0407 140.05) 22.6%, oklch(36.73% 0.0452 138.86) 25.8%, oklch(38.84% 0.0497 137.10) 29.0%, oklch(41.04% 0.0544 134.88) 32.3%, oklch(43.30% 0.0591 132.28) 35.5%, oklch(45.55% 0.0638 129.38) 38.7%, oklch(47.76% 0.0683 126.27) 41.9%, oklch(49.87% 0.0726 123.03) 45.2%, oklch(51.84% 0.0767 119.73) 48.4%, oklch(53.71% 0.0805 116.44) 51.6%, oklch(55.91% 0.0850 113.13) 54.8%, oklch(58.29% 0.0899 109.72) 58.1%, oklch(60.60% 0.0946 106.18) 61.3%, oklch(62.58% 0.0986 102.46) 64.5%, oklch(64.00% 0.1014 98.50) 67.7%, oklch(64.59% 0.1025 94.26) 71.0%, oklch(64.10% 0.1013 89.69) 74.2%, oklch(62.16% 0.0971 84.53) 77.4%, oklch(58.57% 0.0893 78.41) 80.6%, oklch(53.83% 0.0792 71.70) 83.9%, oklch(48.43% 0.0676 64.78) 87.1%, oklch(42.88% 0.0558 58.07) 90.3%, oklch(37.67% 0.0447 51.94) 93.5%, oklch(33.32% 0.0354 46.81) 96.8%, oklch(30.31% 0.0289 43.05) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.011 | 139.2 |
| 2 | 0.362 | 0.044 | 139.2 |
| 3 | 0.528 | 0.079 | 118.1 |
| 4 | 0.638 | 0.101 | 88.5 |
| 5 | 0.303 | 0.029 | 43.1 |

## In these collections

- [Earth tone gradients](https://grabient.com/earth-tone-gradients)

## Other forms

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