# Blue and sage color palette

The Blue and sage color palette brings together off-white, light blue, light green, and green. The colors span a moderate lightness range, combining restrained color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is green, and its lightest tone is off-white.

- Also called: Light blue, lavender and gray angular swatches
- Seed: `kW6g-nbRQ_-WWRneFC7TBDBA`
- Page: https://grabient.com/kW6g-nbRQ_-WWRneFC7TBDBA?style=angularSwatches&steps=5&angle=30
- Drawn as: angular swatches, 5 steps, 30 degrees
- Kinds: light to dark, pastel, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 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 | `#d8e8f1` | `oklch(92.13% 0.0207 234.84)` | Icicle Veil | black, 16.7 to 1 |
| 2 | `#aed7f0` | `oklch(85.83% 0.0551 234.84)` | Ariel | black, 13.7 to 1 |
| 3 | `#bcb8e3` | `oklch(79.92% 0.0606 289.79)` | Pretty Posie | black, 11 to 1 |
| 4 | `#96b596` | `oklch(74.02% 0.0551 145.02)` | Liebermann Green | black, 9.3 to 1 |
| 5 | `#6b8874` | `oklch(59.84% 0.0455 154.53)` | Green Adirondack | black, 5.4 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #d8e8f1 0.000% 20.000%, #aed7f0 20.000% 40.000%, #bcb8e3 40.000% 60.000%, #96b596 60.000% 80.000%, #6b8874 80.000% 100.000%);
background: conic-gradient(from 30deg, oklch(92.13% 0.0207 234.84) 0.000% 20.000%, oklch(85.83% 0.0551 234.84) 20.000% 40.000%, oklch(79.92% 0.0606 289.79) 40.000% 60.000%, oklch(74.02% 0.0551 145.02) 60.000% 80.000%, oklch(59.84% 0.0455 154.53) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.921 | 0.021 | 234.8 |
| 2 | 0.858 | 0.055 | 234.8 |
| 3 | 0.799 | 0.061 | 289.8 |
| 4 | 0.74 | 0.055 | 145 |
| 5 | 0.598 | 0.045 | 154.5 |

## In these collections

- [Soft swatches](https://grabient.com/soft-swatches)
- [Light swatches](https://grabient.com/light-swatches)

## Other forms

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