# Cream Brown Olive Bands

These three horizontal bands move from near-black brown through warm cream and finish in deep olive. The large pale center supplies space for dark lettering, while the outer bands create strong framing contrast. Use them for natural product labels, understated posters, presentation dividers, or minimal earth-tone interfaces.

- Also called: Black and beige linear swatches
- Seed: `kSLhk7bw0_pwSRE`
- Page: https://grabient.com/kSLhk7bw0_pwSRE?style=linearSwatches&steps=3&angle=180
- Drawn as: linear swatches, 3 steps, 180 degrees
- Kinds: light center, neutral, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.8 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 | `#191001` | `oklch(18.11% 0.0344 82.97)` | Crowshead | white, 18.7 to 1 |
| 2 | `#e2d4bc` | `oklch(87.40% 0.0358 80.86)` | Barberry Sand | black, 14.3 to 1 |
| 3 | `#191d01` | `oklch(22.05% 0.0496 117.84)` | Yuzu Soy | white, 17.1 to 1 |

## CSS

```css
background: linear-gradient(180deg, #191001 0.000% 33.333%, #e2d4bc 33.333% 66.667%, #191d01 66.667% 100.000%);
background: linear-gradient(180deg, oklch(18.11% 0.0344 82.97) 0.000% 33.333%, oklch(87.40% 0.0358 80.86) 33.333% 66.667%, oklch(22.05% 0.0496 117.84) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.034 | 83 |
| 2 | 0.874 | 0.036 | 80.9 |
| 3 | 0.22 | 0.05 | 117.8 |

## In these collections

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

## Other forms

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