# Sage and yellow monochrome green palette

The Sage and yellow monochrome green palette brings together green and light yellow. The colors span a moderate lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is green, and its lightest tone is light yellow.

- Also called: Analogous gray, olive and beige linear gradient
- Seed: `kUbB5bzZu_GCcv5vFj9g`
- Page: https://grabient.com/kUbB5bzZu_GCcv5vFj9g?steps=5&angle=225
- Drawn as: linear gradient, 5 steps, 225 degrees
- Kinds: dark to light, muted
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 5.6 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 | `#48533b` | `oklch(42.52% 0.0413 128.67)` | Broccoli Green | white, 8.1 to 1 |
| 2 | `#6d7c4e` | `oklch(56.21% 0.0686 123.00)` | Mint Leaves | black, 4.6 to 1 |
| 3 | `#95a369` | `oklch(68.95% 0.0804 119.49)` | Banana Palm | black, 7.7 to 1 |
| 4 | `#b8c28b` | `oklch(79.36% 0.0751 117.02)` | Jitterbug | black, 11.1 to 1 |
| 5 | `#d5dbad` | `oklch(87.40% 0.0606 113.88)` | Willow Wind | black, 14.5 to 1 |

## CSS

```css
background: linear-gradient(225deg, #48533b 0.0%, #6d7c4e 25.0%, #95a369 50.0%, #b8c28b 75.0%, #d5dbad 100.0%);
background: linear-gradient(225deg in oklch, oklch(42.52% 0.0413 128.67) 0.0%, oklch(56.21% 0.0686 123.00) 25.0%, oklch(68.95% 0.0804 119.49) 50.0%, oklch(79.36% 0.0751 117.02) 75.0%, oklch(87.40% 0.0606 113.88) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.425 | 0.041 | 128.7 |
| 2 | 0.61 | 0.076 | 121.3 |
| 3 | 0.76 | 0.079 | 118.1 |
| 4 | 0.874 | 0.061 | 113.9 |

## In these collections

- [Monochrome green gradients](https://grabient.com/monochrome-green-gradients)

## Other forms

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