# Sage and olive color palette

The Sage and olive color palette brings together light green, green, dark green, gold, and pale yellow. 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 dark green, and its lightest tone is pale yellow.

- Also called: Gray, dark green and beige angular swatches
- Seed: `kYuShjxiC9iYbQ3NqDf4i9BXeQwK`
- Page: https://grabient.com/kYuShjxiC9iYbQ3NqDf4i9BXeQwK?style=angularSwatches&steps=6&angle=30
- Drawn as: angular swatches, 6 steps, 30 degrees
- Kinds: dark center, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.2 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 | `#95b08f` | `oklch(72.83% 0.0551 139.92)` | Mint Stone | black, 8.9 to 1 |
| 2 | `#6b7a3a` | `oklch(55.12% 0.0896 119.84)` | Military Green | white, 4.7 to 1 |
| 3 | `#093718` | `oklch(29.92% 0.0744 149.43)` | Gameboy Contrast | white, 13.2 to 1 |
| 4 | `#a47c27` | `oklch(61.02% 0.1102 81.80)` | Chai Tea | black, 5.4 to 1 |
| 5 | `#d1b347` | `oklch(77.17% 0.1295 93.42)` | Farm Straw | black, 10.2 to 1 |
| 6 | `#f2edca` | `oklch(94.09% 0.0455 99.77)` | Minimal | black, 17.7 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #95b08f 0.000% 16.667%, #6b7a3a 16.667% 33.333%, #093718 33.333% 50.000%, #a47c27 50.000% 66.667%, #d1b347 66.667% 83.333%, #f2edca 83.333% 100.000%);
background: conic-gradient(from 30deg, oklch(72.83% 0.0551 139.92) 0.000% 16.667%, oklch(55.12% 0.0896 119.84) 16.667% 33.333%, oklch(29.92% 0.0744 149.43) 33.333% 50.000%, oklch(61.02% 0.1102 81.80) 50.000% 66.667%, oklch(77.17% 0.1295 93.42) 66.667% 83.333%, oklch(94.09% 0.0455 99.77) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.728 | 0.055 | 139.9 |
| 2 | 0.551 | 0.09 | 119.8 |
| 3 | 0.299 | 0.074 | 149.4 |
| 4 | 0.61 | 0.11 | 81.8 |
| 5 | 0.772 | 0.13 | 93.4 |
| 6 | 0.941 | 0.045 | 99.8 |

## In these collections

- [Green and gold swatches](https://grabient.com/green-and-gold-swatches)
- [Luxury swatches](https://grabient.com/luxury-swatches)

## Other forms

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