# Mauve, sage and stone color palette

The Mauve, sage and stone color palette brings together magenta, green, light green, pale orange, and light red. The colors span a moderate lightness range, combining restrained color with gentle contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is green, and its lightest tone is pale orange.

- Also called: Purple, gray, beige and pink linear swatches
- Seed: `kWmS_3TBPUN8TO_0DDm4g85A`
- Page: https://grabient.com/kWmS_3TBPUN8TO_0DDm4g85A?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: pastel
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#9e7188` | `oklch(60.24% 0.0648 347.34)` | Artiste | black, 5.1 to 1 |
| 2 | `#648a74` | `oklch(59.84% 0.0537 158.54)` | Juniper Oil | black, 5.4 to 1 |
| 3 | `#a6b490` | `oklch(74.80% 0.0524 124.72)` | Haven | black, 9.5 to 1 |
| 4 | `#f1dfcb` | `oklch(91.34% 0.0331 71.88)` | Pearled Ivory | black, 16.1 to 1 |
| 5 | `#ceabad` | `oklch(77.17% 0.0413 13.76)` | Vista | black, 10 to 1 |

## CSS

```css
background: linear-gradient(45deg, #9e7188 0.000% 20.000%, #648a74 20.000% 40.000%, #a6b490 40.000% 60.000%, #f1dfcb 60.000% 80.000%, #ceabad 80.000% 100.000%);
background: linear-gradient(45deg, oklch(60.24% 0.0648 347.34) 0.000% 20.000%, oklch(59.84% 0.0537 158.54) 20.000% 40.000%, oklch(74.80% 0.0524 124.72) 40.000% 60.000%, oklch(91.34% 0.0331 71.88) 60.000% 80.000%, oklch(77.17% 0.0413 13.76) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.602 | 0.065 | 347.3 |
| 2 | 0.598 | 0.054 | 518.5 |
| 3 | 0.748 | 0.052 | 484.7 |
| 4 | 0.913 | 0.033 | 431.9 |
| 5 | 0.772 | 0.041 | 373.8 |

## In these collections

- [Pastel swatches](https://grabient.com/pastel-swatches)
- [Light mode color palette](https://grabient.com/light-mode-color-palette)
- [Spring swatches](https://grabient.com/spring-swatches)

## Other forms

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