# Stone and sage color palette

The Stone and sage color palette brings together light gray, off-white, gray, and light orange. The colors span a broad lightness range, combining restrained color with clear contrast. Its light and open character suits website sections and interface mockups. Its darkest tone is gray, and its lightest tone is off-white.

- Also called: Gray, white and tan radial swatches
- Seed: `kY3Amk-II4tMIRvcEqtMgireWGvg`
- Page: https://grabient.com/kY3Amk-II4tMIRvcEqtMgireWGvg?style=radialSwatches&steps=6&angle=0
- Drawn as: radial swatches, 6 steps, 0 degrees
- Kinds: neutral
- Hues: two-hue
- Contrast of its darkest and lightest colors: 8.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 | `#cbd5da` | `oklch(86.61% 0.0124 231.33)` | Polar Drift | black, 14 to 1 |
| 2 | `#ebefed` | `oklch(94.88% 0.0055 170.04)` | Day Spa | black, 18.1 to 1 |
| 3 | `#83939b` | `oklch(65.35% 0.0220 229.21)` | Coastal Vista | black, 6.6 to 1 |
| 4 | `#c09e88` | `oklch(72.44% 0.0510 54.85)` | Chestnut Bisque | black, 8.4 to 1 |
| 5 | `#3b4852` | `oklch(39.37% 0.0234 241.54)` | Limed Spruce | white, 9.4 to 1 |
| 6 | `#b2c0c6` | `oklch(79.92% 0.0179 225.69)` | Winter Wonderland | black, 11.2 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #cbd5da 0.000% 16.667%, #ebefed 16.667% 33.333%, #83939b 33.333% 50.000%, #c09e88 50.000% 66.667%, #3b4852 66.667% 83.333%, #b2c0c6 83.333% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(86.61% 0.0124 231.33) 0.000% 16.667%, oklch(94.88% 0.0055 170.04) 16.667% 33.333%, oklch(65.35% 0.0220 229.21) 33.333% 50.000%, oklch(72.44% 0.0510 54.85) 50.000% 66.667%, oklch(39.37% 0.0234 241.54) 66.667% 83.333%, oklch(79.92% 0.0179 225.69) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.866 | 0.012 | 231.3 |
| 2 | 0.949 | 0.006 | 170 |
| 3 | 0.654 | 0.022 | 229.2 |
| 4 | 0.724 | 0.051 | 54.9 |
| 5 | 0.394 | 0.023 | -118.5 |
| 6 | 0.799 | 0.018 | -134.3 |

## In these collections

- [Muted multicolor swatches](https://grabient.com/muted-multicolor-swatches)
- [Silver color palette](https://grabient.com/silver-color-palette)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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