# Brown cream olive bands

These five diagonal bands move from deep brown through pale cream, olive, terracotta, and burgundy. The light neutral separates the dark opening from the colored earth tones, giving text, background, and accent roles clear contrast. Use the palette for heritage packaging, restaurant menus, or autumn editorial layouts that need classic soil, leaf, clay, and wine colors.

- Also called: Black, beige, olive and purple linear swatches
- Seed: `kWSAg8cQ2_cSdQ_NrbesZW7I`
- Page: https://grabient.com/kWSAg8cQ2_cSdQ_NrbesZW7I?style=linearSwatches&steps=5&angle=123
- Drawn as: linear swatches, 5 steps, 123 degrees
- Kinds: light center, muted, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 10.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 | `#2c2924` | `oklch(28.35% 0.0110 84.38)` | Maire | white, 14.4 to 1 |
| 2 | `#e8d9c0` | `oklch(88.98% 0.0372 80.15)` | Eaglet Beige | black, 15 to 1 |
| 3 | `#6e743b` | `oklch(53.94% 0.0799 113.96)` | Swamp Shrub | white, 4.9 to 1 |
| 4 | `#c0683f` | `oklch(61.02% 0.1254 44.22)` | Clay Pot | black, 5.2 to 1 |
| 5 | `#603741` | `oklch(38.98% 0.0593 4.06)` | Velvet Cape | white, 9.9 to 1 |

## CSS

```css
background: linear-gradient(123deg, #2c2924 0.000% 20.000%, #e8d9c0 20.000% 40.000%, #6e743b 40.000% 60.000%, #c0683f 60.000% 80.000%, #603741 80.000% 100.000%);
background: linear-gradient(123deg, oklch(28.35% 0.0110 84.38) 0.000% 20.000%, oklch(88.98% 0.0372 80.15) 20.000% 40.000%, oklch(53.94% 0.0799 113.96) 40.000% 60.000%, oklch(61.02% 0.1254 44.22) 60.000% 80.000%, oklch(38.98% 0.0593 4.06) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.011 | 84.4 |
| 2 | 0.89 | 0.037 | 80.1 |
| 3 | 0.539 | 0.08 | 114 |
| 4 | 0.61 | 0.125 | 44.2 |
| 5 | 0.39 | 0.059 | 4.1 |

## In these collections

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

## Other forms

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