# Stone, sage and dusty blue color palette

The Stone, sage and dusty blue color palette brings together light yellow, green, orange, and blue. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is green, and its lightest tone is light yellow.

- Also called: Gray and tan linear swatches
- Seed: `kU2xVCvQvI9meNlIjNIg`
- Page: https://grabient.com/kU2xVCvQvI9meNlIjNIg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#d8d2bd` | `oklch(86.22% 0.0289 93.52)` | Bleached Pebble | black, 13.8 to 1 |
| 2 | `#4c645b` | `oklch(48.03% 0.0317 169.60)` | Jasper Park | white, 6.4 to 1 |
| 3 | `#b59d62` | `oklch(70.47% 0.0827 88.23)` | Antique Gold | black, 7.9 to 1 |
| 4 | `#667b8b` | `oklch(57.09% 0.0344 242.52)` | Pier 17 Steel | black, 4.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d8d2bd 0.000% 25.000%, #4c645b 25.000% 50.000%, #b59d62 50.000% 75.000%, #667b8b 75.000% 100.000%);
background: linear-gradient(90deg, oklch(86.22% 0.0289 93.52) 0.000% 25.000%, oklch(48.03% 0.0317 169.60) 25.000% 50.000%, oklch(70.47% 0.0827 88.23) 50.000% 75.000%, oklch(57.09% 0.0344 242.52) 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.029 | 93.5 |
| 2 | 0.48 | 0.032 | 169.6 |
| 3 | 0.705 | 0.083 | 88.2 |
| 4 | 0.571 | 0.034 | 242.5 |

## In these collections

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

## Other forms

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