# Blue and Green: Olive and moss

The "Blue and Green: Olive and moss" palette brings together green, yellow, light green, and off-white. 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 green, and its lightest tone is off-white.

- Also called: Dark green, olive and light blue linear gradient
- Seed: `kWWzNcRaM-V2fQLvDMMdIfM4`
- Page: https://grabient.com/kWWzNcRaM-V2fQLvDMMdIfM4?steps=5&angle=225
- Drawn as: linear gradient, 5 steps, 225 degrees
- Kinds: dark to light, pastel
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 8.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 | `#314419` | `oklch(35.83% 0.0703 129.37)` | Forestry | white, 10.7 to 1 |
| 2 | `#6e772f` | `oklch(54.72% 0.0965 115.64)` | Olive Drab | white, 4.8 to 1 |
| 3 | `#a0b375` | `oklch(73.62% 0.0854 121.98)` | Serpentine | black, 9.1 to 1 |
| 4 | `#c7dcc9` | `oklch(87.40% 0.0344 148.40)` | Misty Afternoon | black, 14.5 to 1 |
| 5 | `#dbe4f2` | `oklch(91.73% 0.0207 258.30)` | Iceberg | black, 16.4 to 1 |

## CSS

```css
background: linear-gradient(225deg, #314419 0.0%, #6e772f 25.0%, #a0b375 50.0%, #c7dcc9 75.0%, #dbe4f2 100.0%);
background: linear-gradient(225deg in oklch, oklch(35.83% 0.0703 129.37) 0.0%, oklch(54.72% 0.0965 115.64) 25.0%, oklch(73.62% 0.0854 121.98) 50.0%, oklch(87.40% 0.0344 148.40) 75.0%, oklch(91.73% 0.0207 258.30) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.358 | 0.07 | 129.4 |
| 2 | 0.547 | 0.096 | 115.6 |
| 3 | 0.736 | 0.085 | 122 |
| 4 | 0.874 | 0.034 | 148.4 |
| 5 | 0.917 | 0.021 | 258.3 |

## In these collections

- [Blue and green gradients](https://grabient.com/blue-and-green-gradients)

## Other forms

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