# Blue and Green: Forest green and off-white

The "Blue and Green: Forest green and off-white" palette brings together dark green, off-white, and dark blue. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits botanical branding and garden event graphics. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Dark green, gray and navy linear swatches
- Seed: `kSRzpq9gI_5wdTO`
- Page: https://grabient.com/kSRzpq9gI_5wdTO?style=linearSwatches&steps=3&angle=135
- Drawn as: linear swatches, 3 steps, 135 degrees
- Kinds: light center, muted
- Hues: two-hue
- Contrast of its darkest and lightest colors: 14.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 | `#003312` | `oklch(27.96% 0.0776 149.67)` | Haunted Hills | white, 14.2 to 1 |
| 2 | `#e5e9e6` | `oklch(92.91% 0.0055 149.77)` | Grey Wonder | black, 17 to 1 |
| 3 | `#02183f` | `oklch(22.05% 0.0799 259.67)` | Navy | white, 17.4 to 1 |

## CSS

```css
background: linear-gradient(135deg, #003312 0.000% 33.333%, #e5e9e6 33.333% 66.667%, #02183f 66.667% 100.000%);
background: linear-gradient(135deg, oklch(27.96% 0.0776 149.67) 0.000% 33.333%, oklch(92.91% 0.0055 149.77) 33.333% 66.667%, oklch(22.05% 0.0799 259.67) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.08 | 149.8 |
| 2 | 0.929 | 0.006 | 149.8 |
| 3 | 0.22 | 0.08 | 259.7 |

## In these collections

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

## Other forms

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