# Yellow and sage color palette

The Yellow and sage color palette brings together light yellow and green. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is green, and its lightest tone is light yellow.

- Also called: Analogous tan, olive, green and gray linear swatches
- Seed: `kUyyxK2R1CUwZwk_kkJA`
- Page: https://grabient.com/kUyyxK2R1CUwZwk_kkJA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: muted
- Hues: analogous
- 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 | `#c3c093` | `oklch(79.92% 0.0606 104.77)` | Brimstone Butterfly | black, 11.2 to 1 |
| 2 | `#93a870` | `oklch(70.08% 0.0799 124.84)` | Lettuce Mound | black, 8 to 1 |
| 3 | `#658b66` | `oklch(59.84% 0.0703 144.92)` | Stone Green | black, 5.4 to 1 |
| 4 | `#486c5c` | `oklch(50.00% 0.0496 165.00)` | Smoke Pine | white, 5.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c3c093 0.000% 25.000%, #93a870 25.000% 50.000%, #658b66 50.000% 75.000%, #486c5c 75.000% 100.000%);
background: linear-gradient(90deg, oklch(79.92% 0.0606 104.77) 0.000% 25.000%, oklch(70.08% 0.0799 124.84) 25.000% 50.000%, oklch(59.84% 0.0703 144.92) 50.000% 75.000%, oklch(50.00% 0.0496 165.00) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.799 | 0.061 | 104.8 |
| 2 | 0.701 | 0.08 | 124.8 |
| 3 | 0.598 | 0.07 | 144.9 |
| 4 | 0.5 | 0.05 | 165 |

## In these collections

- [Natural swatches](https://grabient.com/natural-swatches)
- [Beach swatches](https://grabient.com/beach-swatches)

## Other forms

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