# Sage and blue color palette

The Sage and blue color palette brings together green, teal, light blue, pale teal, and off-white. The colors span a moderate lightness range, combining restrained 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 off-white.

- Also called: Analogous teal, light blue and white linear gradient
- Seed: `kYqy502hRCGiYxJ4Gb3e46-_2GwI`
- Page: https://grabient.com/kYqy502hRCGiYxJ4Gb3e46-_2GwI
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, pastel, light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.7 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 | `#71a38c` | `oklch(67.32% 0.0634 163.83)` | Quilotoa Green | black, 7.3 to 1 |
| 2 | `#78a99d` | `oklch(69.78% 0.0554 177.37)` | Twining Vine | black, 8 to 1 |
| 3 | `#88c3cf` | `oklch(78.13% 0.0633 211.30)` | After the Rain | black, 10.7 to 1 |
| 4 | `#a3e7f8` | `oklch(88.93% 0.0716 214.88)` | Fresh Air | black, 15.3 to 1 |
| 5 | `#ccfdff` | `oklch(96.15% 0.0502 198.88)` | Dawn Departs | black, 19.1 to 1 |
| 6 | `#ddfffe` | `oklch(97.59% 0.0346 194.64)` | Apollo’s White | black, 19.8 to 1 |
| 7 | `#f0feff` | `oklch(98.82% 0.0147 199.70)` | Vapour | black, 20.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #71a38c 0.0%, #78a99d 16.7%, #88c3cf 33.3%, #a3e7f8 50.0%, #ccfdff 66.7%, #ddfffe 83.3%, #f0feff 100.0%);
background: linear-gradient(90deg in oklch, oklch(67.32% 0.0634 163.83) 0.0%, oklch(69.78% 0.0554 177.37) 16.7%, oklch(78.13% 0.0633 211.30) 33.3%, oklch(88.93% 0.0716 214.88) 50.0%, oklch(96.15% 0.0502 198.88) 66.7%, oklch(97.59% 0.0346 194.64) 83.3%, oklch(98.82% 0.0147 199.70) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.673 | 0.063 | 163.8 |
| 2 | 0.709 | 0.055 | 181.8 |
| 3 | 0.823 | 0.068 | 220.9 |
| 4 | 0.945 | 0.07 | 202.9 |
| 5 | 0.972 | 0.04 | 194.5 |
| 6 | 0.988 | 0.018 | 199.8 |

## In these collections

- [Spring pastel gradients](https://grabient.com/spring-pastel-gradients)
- [Light mode color palette](https://grabient.com/light-mode-color-palette)
- [Beach swatches](https://grabient.com/beach-swatches)

## Other forms

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