# Sage blue and teal palette

The Sage blue and teal palette brings together dark blue, blue, and teal. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is teal.

- Also called: Analogous navy and teal linear swatches
- Seed: `kUQUm-LJ2-7oVPTGk7rA`
- Page: https://grabient.com/kUQUm-LJ2-7oVPTGk7rA?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.4 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 | `#0e1c53` | `oklch(25.59% 0.1006 267.19)` | Downriver | white, 16 to 1 |
| 2 | `#102256` | `oklch(27.26% 0.0972 266.02)` | Dark Soul | white, 15.1 to 1 |
| 3 | `#15295a` | `oklch(29.65% 0.0924 264.41)` | Ultramarine Violet | white, 13.9 to 1 |
| 4 | `#1a3260` | `oklch(32.37% 0.0869 262.09)` | Ending Navy Blue | white, 12.6 to 1 |
| 5 | `#1f3a64` | `oklch(35.04% 0.0813 258.73)` | Navy Peony | white, 11.3 to 1 |
| 6 | `#234268` | `oklch(37.63% 0.0753 254.43)` | Blue Mosque | white, 10.1 to 1 |
| 7 | `#294b6c` | `oklch(40.33% 0.0686 249.29)` | Blue Tang | white, 9 to 1 |
| 8 | `#2f5470` | `oklch(43.04% 0.0625 243.06)` | America’s Cup | white, 8 to 1 |
| 9 | `#355c73` | `oklch(45.67% 0.0579 235.48)` | Shasta Lake | white, 7.1 to 1 |
| 10 | `#3a6676` | `oklch(48.42% 0.0554 225.05)` | Barbados | white, 6.3 to 1 |
| 11 | `#3f6f79` | `oklch(51.25% 0.0543 212.37)` | Holy Water | white, 5.5 to 1 |
| 12 | `#46787b` | `oklch(53.76% 0.0540 200.41)` | Cool Waters | white, 4.9 to 1 |
| 13 | `#4c7d7b` | `oklch(55.51% 0.0537 192.16)` | Breaker Bay | white, 4.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0e1c53 0.000% 7.692%, #102256 7.692% 15.385%, #15295a 15.385% 23.077%, #1a3260 23.077% 30.769%, #1f3a64 30.769% 38.462%, #234268 38.462% 46.154%, #294b6c 46.154% 53.846%, #2f5470 53.846% 61.538%, #355c73 61.538% 69.231%, #3a6676 69.231% 76.923%, #3f6f79 76.923% 84.615%, #46787b 84.615% 92.308%, #4c7d7b 92.308% 100.000%);
background: linear-gradient(90deg, oklch(25.59% 0.1006 267.19) 0.000% 7.692%, oklch(27.26% 0.0972 266.02) 7.692% 15.385%, oklch(29.65% 0.0924 264.41) 15.385% 23.077%, oklch(32.37% 0.0869 262.09) 23.077% 30.769%, oklch(35.04% 0.0813 258.73) 30.769% 38.462%, oklch(37.63% 0.0753 254.43) 38.462% 46.154%, oklch(40.33% 0.0686 249.29) 46.154% 53.846%, oklch(43.04% 0.0625 243.06) 53.846% 61.538%, oklch(45.67% 0.0579 235.48) 61.538% 69.231%, oklch(48.42% 0.0554 225.05) 69.231% 76.923%, oklch(51.25% 0.0543 212.37) 76.923% 84.615%, oklch(53.76% 0.0540 200.41) 84.615% 92.308%, oklch(55.51% 0.0537 192.16) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.256 | 0.101 | 267.2 |
| 2 | 0.35 | 0.081 | 258.7 |
| 3 | 0.457 | 0.058 | 235.5 |
| 4 | 0.555 | 0.054 | 192.2 |

## In these collections

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

## Other forms

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