# Gray sage palette

The Gray sage palette brings together green and gray. The colors span a moderate lightness range, combining restrained color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its lightest and darkest tones both fall within the green color family.

- Also called: Gray angular swatches
- Seed: `kWZhd7wIu986MvXcjj4xo9BA`
- Page: https://grabient.com/kWZhd7wIu986MvXcjj4xo9BA?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: neutral
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.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 | `#364e47` | `oklch(40.16% 0.0317 173.67)` | Amphitrite | white, 8.9 to 1 |
| 2 | `#576b5e` | `oklch(50.79% 0.0317 156.76)` | Hockham Green | white, 5.7 to 1 |
| 3 | `#7d8b76` | `oklch(61.81% 0.0344 135.63)` | Amazon Moss | black, 5.7 to 1 |
| 4 | `#a3ab91` | `oklch(72.83% 0.0386 120.83)` | Mountain Sage | black, 8.8 to 1 |
| 5 | `#6b785f` | `oklch(55.51% 0.0413 130.35)` | Old Vine | white, 4.6 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #364e47 0.000% 20.000%, #576b5e 20.000% 40.000%, #7d8b76 40.000% 60.000%, #a3ab91 60.000% 80.000%, #6b785f 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(40.16% 0.0317 173.67) 0.000% 20.000%, oklch(50.79% 0.0317 156.76) 20.000% 40.000%, oklch(61.81% 0.0344 135.63) 40.000% 60.000%, oklch(72.83% 0.0386 120.83) 60.000% 80.000%, oklch(55.51% 0.0413 130.35) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.032 | 173.7 |
| 2 | 0.508 | 0.032 | 156.8 |
| 3 | 0.618 | 0.034 | 135.6 |
| 4 | 0.728 | 0.039 | 120.8 |
| 5 | 0.555 | 0.041 | 130.3 |

## In these collections

- [Sage swatches](https://grabient.com/sage-swatches)

## Other forms

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