# Sage color palette

The Sage color palette brings together green and teal. The colors span a moderate lightness range, combining restrained color with gentle contrast. Its balanced and composed character suits invitation suites and ceremony stationery. Its lightest and darkest tones both fall within the green color family.

- Also called: Gray, dark green and teal angular swatches
- Seed: `kUqyZfuI9C66OQXGjsHg`
- Page: https://grabient.com/kUqyZfuI9C66OQXGjsHg?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: dark center, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#899e7d` | `oklch(67.32% 0.0524 134.30)` | Grey Green | black, 7.2 to 1 |
| 2 | `#405b4c` | `oklch(44.49% 0.0413 159.66)` | Woodlawn Green | white, 7.4 to 1 |
| 3 | `#28453c` | `oklch(36.61% 0.0386 172.34)` | Mushiao Green | white, 10.3 to 1 |
| 4 | `#587b78` | `oklch(55.51% 0.0400 189.25)` | Green Hour | white, 4.6 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #899e7d 0.000% 25.000%, #405b4c 25.000% 50.000%, #28453c 50.000% 75.000%, #587b78 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(67.32% 0.0524 134.30) 0.000% 25.000%, oklch(44.49% 0.0413 159.66) 25.000% 50.000%, oklch(36.61% 0.0386 172.34) 50.000% 75.000%, oklch(55.51% 0.0400 189.25) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.673 | 0.052 | 134.3 |
| 2 | 0.445 | 0.041 | 159.7 |
| 3 | 0.366 | 0.039 | 172.3 |
| 4 | 0.555 | 0.04 | 189.2 |

## In these collections

- [Sage](https://grabient.com/sage)
- [Spring garden wedding](https://grabient.com/spring-garden-wedding)
- [Hydrangea ribbon boutonniere](https://grabient.com/hydrangea-ribbon-boutonniere)
- [Alpine harvest embroidery](https://grabient.com/alpine-harvest-embroidery)

## Other forms

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