# Stone, sage and silver color palette

The Stone, sage and silver color palette brings together off-white, green, and light gray. The colors span a broad lightness range, combining restrained 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 off-white.

- Also called: Monochrome gray and green angular swatches
- Seed: `kW5Q1nVpQ_70ZwQnlEEYwS_4`
- Page: https://grabient.com/kW5Q1nVpQ_70ZwQnlEEYwS_4?style=angularSwatches&steps=5&angle=25
- Drawn as: angular swatches, 5 steps, 25 degrees
- Kinds: dark center, muted, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 9.5 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 | `#d8e2d7` | `oklch(90.16% 0.0179 144.84)` | Fleeting Green | black, 15.7 to 1 |
| 2 | `#84a284` | `oklch(68.11% 0.0551 144.84)` | Gallery Green | black, 7.4 to 1 |
| 3 | `#3c694c` | `oklch(48.03% 0.0703 154.35)` | Spirulina | white, 6.3 to 1 |
| 4 | `#0f3929` | `oklch(31.10% 0.0551 163.87)` | Deep Fir | white, 12.7 to 1 |
| 5 | `#b0bab5` | `oklch(77.95% 0.0124 163.87)` | Grey Tweed | black, 10.5 to 1 |

## CSS

```css
background: conic-gradient(from 25deg, #d8e2d7 0.000% 20.000%, #84a284 20.000% 40.000%, #3c694c 40.000% 60.000%, #0f3929 60.000% 80.000%, #b0bab5 80.000% 100.000%);
background: conic-gradient(from 25deg, oklch(90.16% 0.0179 144.84) 0.000% 20.000%, oklch(68.11% 0.0551 144.84) 20.000% 40.000%, oklch(48.03% 0.0703 154.35) 40.000% 60.000%, oklch(31.10% 0.0551 163.87) 60.000% 80.000%, oklch(77.95% 0.0124 163.87) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.018 | 144.8 |
| 2 | 0.681 | 0.055 | 144.8 |
| 3 | 0.48 | 0.07 | 154.4 |
| 4 | 0.311 | 0.055 | 163.9 |
| 5 | 0.78 | 0.012 | 163.9 |

## In these collections

- [Calm swatches](https://grabient.com/calm-swatches)
- [Dusty swatches](https://grabient.com/dusty-swatches)
- [Marble swatches](https://grabient.com/marble-swatches)
- [Elegant swatches](https://grabient.com/elegant-swatches)

## Other forms

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