# Orange, mauve and sage tetradic palette

The Orange, mauve and sage tetradic palette brings together light orange, gray, orange, blue, purple, and green. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light orange.

- Also called: Tan, navy and gray linear swatches
- Seed: `kY2DQsWIbW0sdU4wFS6t5LE0SOVO`
- Page: https://grabient.com/kY2DQsWIbW0sdU4wFS6t5LE0SOVO?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: dark center, muted
- Hues: triadic
- Contrast of its darkest and lightest colors: 6.3 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 | `#f1c49e` | `oklch(85.04% 0.0717 61.88)` | Carving Party | black, 13.1 to 1 |
| 2 | `#969ea9` | `oklch(69.69% 0.0179 255.26)` | Shining Knight | black, 7.7 to 1 |
| 3 | `#a0724b` | `oklch(59.06% 0.0799 61.17)` | Cinnamon Twist | black, 5 to 1 |
| 4 | `#393f61` | `oklch(37.80% 0.0579 275.34)` | Mangosteen | white, 10.2 to 1 |
| 5 | `#5d4965` | `oklch(43.70% 0.0510 316.55)` | Paparazzi | white, 8 to 1 |
| 6 | `#65745d` | `oklch(53.94% 0.0386 134.09)` | Bean Counter | white, 4.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f1c49e 0.000% 16.667%, #969ea9 16.667% 33.333%, #a0724b 33.333% 50.000%, #393f61 50.000% 66.667%, #5d4965 66.667% 83.333%, #65745d 83.333% 100.000%);
background: linear-gradient(90deg, oklch(85.04% 0.0717 61.88) 0.000% 16.667%, oklch(69.69% 0.0179 255.26) 16.667% 33.333%, oklch(59.06% 0.0799 61.17) 33.333% 50.000%, oklch(37.80% 0.0579 275.34) 50.000% 66.667%, oklch(43.70% 0.0510 316.55) 66.667% 83.333%, oklch(53.94% 0.0386 134.09) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.85 | 0.072 | 61.9 |
| 2 | 0.697 | 0.018 | 255.3 |
| 3 | 0.591 | 0.08 | 421.2 |
| 4 | 0.378 | 0.058 | 275.3 |
| 5 | 0.437 | 0.051 | 316.6 |
| 6 | 0.539 | 0.039 | 494.1 |

## In these collections

- [Tetradic color palette](https://grabient.com/tetradic-color-palette)

## Other forms

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