# Sage Clay Earth Bands

These diagonal bands move from pale sage through dusty clay, dark walnut, and near black green. The sequence combines soft natural light with two sturdy dark anchors. Use them for sustainable branding, home decor presentations, botanical packaging, or calm application themes that need an earthy balance of green, terracotta, and wood tones.

- Also called: Analogous gray, pink, brown and black linear swatches
- Seed: `kU4hVg5hcziWUQwbB8dg`
- Page: https://grabient.com/kU4hVg5hcziWUQwbB8dg?style=linearSwatches&steps=4&angle=300
- Drawn as: linear swatches, 4 steps, 300 degrees
- Kinds: light to dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.7 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 | `#d2dfcd` | `oklch(88.98% 0.0289 135.70)` | Comforting Green | black, 15.2 to 1 |
| 2 | `#e5b0a6` | `oklch(80.31% 0.0634 31.08)` | Rose Silk | black, 11.1 to 1 |
| 3 | `#41250e` | `oklch(29.53% 0.0551 57.50)` | Chocolate Castle | white, 14 to 1 |
| 4 | `#171a10` | `oklch(21.26% 0.0207 120.91)` | Nightshade Berries | white, 17.5 to 1 |

## CSS

```css
background: linear-gradient(300deg, #d2dfcd 0.000% 25.000%, #e5b0a6 25.000% 50.000%, #41250e 50.000% 75.000%, #171a10 75.000% 100.000%);
background: linear-gradient(300deg, oklch(88.98% 0.0289 135.70) 0.000% 25.000%, oklch(80.31% 0.0634 31.08) 25.000% 50.000%, oklch(29.53% 0.0551 57.50) 50.000% 75.000%, oklch(21.26% 0.0207 120.91) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.89 | 0.029 | 135.7 |
| 2 | 0.803 | 0.063 | 31.1 |
| 3 | 0.295 | 0.055 | 57.5 |
| 4 | 0.213 | 0.021 | 120.9 |

## In these collections

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

## Other forms

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