# Moss Walnut Earth Fan

These angular wedges move from muted olive through pale sage, walnut brown, ochre brown, and smoky cocoa. The fan feels organic and material focused, with enough separation for clear graphic use. Use them for landscape diagrams, craft branding, natural packaging, or rustic editorial layouts built from moss, wood, and stone colors.

- Also called: Brown and gray angular swatches
- Seed: `kWjSc7b49Gq0WtrAmsHrYm5o`
- Page: https://grabient.com/kWjSc7b49Gq0WtrAmsHrYm5o?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: muted, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.9 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 | `#82704e` | `oklch(55.51% 0.0537 82.97)` | Outrigger | white, 4.7 to 1 |
| 2 | `#c9dec4` | `oklch(87.80% 0.0413 140.03)` | Shanghai Silk | black, 14.7 to 1 |
| 3 | `#533416` | `oklch(35.43% 0.0620 61.83)` | Moelleux au Chocolat | white, 11.2 to 1 |
| 4 | `#7c6032` | `oklch(50.79% 0.0730 78.74)` | Bronze Brown | white, 5.8 to 1 |
| 5 | `#4a3836` | `oklch(35.83% 0.0262 25.90)` | Warm Operator’s Overalls | white, 11 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #82704e 0.000% 20.000%, #c9dec4 20.000% 40.000%, #533416 40.000% 60.000%, #7c6032 60.000% 80.000%, #4a3836 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(55.51% 0.0537 82.97) 0.000% 20.000%, oklch(87.80% 0.0413 140.03) 20.000% 40.000%, oklch(35.43% 0.0620 61.83) 40.000% 60.000%, oklch(50.79% 0.0730 78.74) 60.000% 80.000%, oklch(35.83% 0.0262 25.90) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.555 | 0.054 | 83 |
| 2 | 0.878 | 0.041 | 140 |
| 3 | 0.354 | 0.062 | 61.8 |
| 4 | 0.508 | 0.073 | 78.7 |
| 5 | 0.358 | 0.026 | 25.9 |

## In these collections

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

## Other forms

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