# Sage Straw Umber Bands

These four vertical bands move through pale sage, deep brown, muted straw, and umber. The restrained natural colors give backgrounds, labels, borders, and accent marks separate roles without losing their earthy character. Use them for botanical packaging, outdoor branding, editorial layouts, or warm interface themes that need quiet contrast.

- Also called: Gray, black, tan and brown linear swatches
- Seed: `kU2yZiHhC6WegwOqmTwg`
- Page: https://grabient.com/kU2yZiHhC6WegwOqmTwg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.1 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 | `#c2dab9` | `oklch(86.22% 0.0524 137.81)` | Grasshopper Pie | black, 14 to 1 |
| 2 | `#271d02` | `oklch(23.62% 0.0455 90.26)` | Liquorice Root | white, 16.6 to 1 |
| 3 | `#d1c47f` | `oklch(81.50% 0.0896 98.71)` | Winter Hazel | black, 11.8 to 1 |
| 4 | `#4e2e06` | `oklch(33.46% 0.0689 67.01)` | Kyoto House | white, 12.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c2dab9 0.000% 25.000%, #271d02 25.000% 50.000%, #d1c47f 50.000% 75.000%, #4e2e06 75.000% 100.000%);
background: linear-gradient(90deg, oklch(86.22% 0.0524 137.81) 0.000% 25.000%, oklch(23.62% 0.0455 90.26) 25.000% 50.000%, oklch(81.50% 0.0896 98.71) 50.000% 75.000%, oklch(33.46% 0.0689 67.01) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.862 | 0.052 | 137.8 |
| 2 | 0.236 | 0.045 | 90.3 |
| 3 | 0.815 | 0.09 | 98.7 |
| 4 | 0.335 | 0.069 | 67 |

## In these collections

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

## Other forms

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