# Clay Berry Sage Fan

These four angular wedges move from warm clay through brick red, dark berry brown, and muted sage. The compact arrangement pairs mineral warmth with a calm foliage accent while keeping every band distinct. Use them for botanical packaging, rustic event graphics, food branding, or interior mood boards that need natural color without relying only on green and beige.

- Also called: Tritone brown, maroon and green angular swatches
- Seed: `kUrUUjwqW9bMcPXSGtCg`
- Page: https://grabient.com/kUrUUjwqW9bMcPXSGtCg?style=angularSwatches&steps=4&angle=180
- Drawn as: angular swatches, 4 steps, 180 degrees
- Kinds: warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.2 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 | `#c88762` | `oklch(68.11% 0.0951 49.92)` | Wheatberry | black, 7.1 to 1 |
| 2 | `#9d5147` | `oklch(52.36% 0.1033 28.79)` | Sappanwood Incense | white, 5.7 to 1 |
| 3 | `#6b3540` | `oklch(40.16% 0.0772 7.65)` | Chestnut Red | white, 9.5 to 1 |
| 4 | `#6e9b76` | `oklch(64.57% 0.0730 149.26)` | Oxley | black, 6.5 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #c88762 0.000% 25.000%, #9d5147 25.000% 50.000%, #6b3540 50.000% 75.000%, #6e9b76 75.000% 100.000%);
background: conic-gradient(from 180deg, oklch(68.11% 0.0951 49.92) 0.000% 25.000%, oklch(52.36% 0.1033 28.79) 25.000% 50.000%, oklch(40.16% 0.0772 7.65) 50.000% 75.000%, oklch(64.57% 0.0730 149.26) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.681 | 0.095 | 49.9 |
| 2 | 0.524 | 0.103 | 28.8 |
| 3 | 0.402 | 0.077 | 7.7 |
| 4 | 0.646 | 0.073 | 149.3 |

## In these collections

- [Natural swatches](https://grabient.com/natural-swatches)

## Other forms

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