# Blue and sage color palette

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

- Also called: Light blue, blue and green linear swatches
- Seed: `kW1Cq_XqO_VSgP9cmzGUSc_o`
- Page: https://grabient.com/kW1Cq_XqO_VSgP9cmzGUSc_o?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 1.9 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 | `#b9c8f0` | `oklch(83.46% 0.0579 268.59)` | Pale Wisteria | black, 12.5 to 1 |
| 2 | `#8cacea` | `oklch(74.41% 0.0978 263.31)` | Queer Blue | black, 9.1 to 1 |
| 3 | `#7694ca` | `oklch(66.54% 0.0882 262.25)` | Blue Shock | black, 6.8 to 1 |
| 4 | `#8eb387` | `oklch(72.83% 0.0744 140.73)` | Chatty Cricket | black, 8.9 to 1 |
| 5 | `#699b5a` | `oklch(63.78% 0.1075 138.61)` | Green Hornet | black, 6.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #b9c8f0 0.000% 20.000%, #8cacea 20.000% 40.000%, #7694ca 40.000% 60.000%, #8eb387 60.000% 80.000%, #699b5a 80.000% 100.000%);
background: linear-gradient(90deg, oklch(83.46% 0.0579 268.59) 0.000% 20.000%, oklch(74.41% 0.0978 263.31) 20.000% 40.000%, oklch(66.54% 0.0882 262.25) 40.000% 60.000%, oklch(72.83% 0.0744 140.73) 60.000% 80.000%, oklch(63.78% 0.1075 138.61) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.835 | 0.058 | 268.6 |
| 2 | 0.744 | 0.098 | 263.3 |
| 3 | 0.665 | 0.088 | 262.3 |
| 4 | 0.728 | 0.074 | 140.7 |
| 5 | 0.638 | 0.107 | 138.6 |

## In these collections

- [Blue and green swatches](https://grabient.com/blue-and-green-swatches)
- [Coastal rockpool spring](https://grabient.com/coastal-rockpool-spring)
- [Spring tide seagrass](https://grabient.com/spring-tide-seagrass)

## Other forms

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