# Sage and stone navy and teal palette

The Sage and stone navy and teal palette brings together blue, teal, light teal, light gray, and off-white. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Monochrome navy to gray radial gradient
- Seed: `kYUSW0vBG9c0OvRdjTyaoe_ncDv0`
- Page: https://grabient.com/kYUSW0vBG9c0OvRdjTyaoe_ncDv0?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark to light, neutral, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.6 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 | `#20344c` | `oklch(31.89% 0.0510 253.83)` | Blue Lobelia | white, 12.7 to 1 |
| 2 | `#223850` | `oklch(33.52% 0.0508 251.65)` | Cool Air of Debonair | white, 11.9 to 1 |
| 3 | `#273f56` | `oklch(35.78% 0.0505 248.69)` | Blue Shade Wash | white, 10.9 to 1 |
| 4 | `#2c465d` | `oklch(38.45% 0.0502 245.16)` | Indigo Streamer | white, 9.7 to 1 |
| 5 | `#324f64` | `oklch(41.32% 0.0497 241.29)` | Outer Space | white, 8.6 to 1 |
| 6 | `#38576b` | `oklch(44.16% 0.0492 237.30)` | Summer Night | white, 7.6 to 1 |
| 7 | `#3e5f71` | `oklch(46.77% 0.0484 233.43)` | Superior Blue | white, 6.8 to 1 |
| 8 | `#446676` | `oklch(49.07% 0.0474 229.74)` | Winter Evening | white, 6.1 to 1 |
| 9 | `#4a6d7b` | `oklch(51.29% 0.0461 225.99)` | Bismarck | white, 5.5 to 1 |
| 10 | `#507380` | `oklch(53.44% 0.0446 222.17)` | Hydro | white, 5.1 to 1 |
| 11 | `#567a84` | `oklch(55.57% 0.0431 218.25)` | St. Bart’s | white, 4.6 to 1 |
| 12 | `#5d8089` | `oklch(57.67% 0.0417 214.22)` | Refuge | black, 4.9 to 1 |
| 13 | `#64878d` | `oklch(59.78% 0.0404 210.08)` | Arctic | black, 5.3 to 1 |
| 14 | `#6a8d91` | `oklch(61.91% 0.0394 205.69)` | Blue Shoal | black, 5.8 to 1 |
| 15 | `#719496` | `oklch(64.08% 0.0389 200.70)` | Baltic Blue | black, 6.3 to 1 |
| 16 | `#789b9a` | `oklch(66.25% 0.0385 195.43)` | Undertow | black, 6.9 to 1 |
| 17 | `#7fa19f` | `oklch(68.39% 0.0381 190.24)` | Gnome | black, 7.5 to 1 |
| 18 | `#86a8a3` | `oklch(70.47% 0.0376 185.52)` | Lake Water | black, 8.1 to 1 |
| 19 | `#8eaea7` | `oklch(72.48% 0.0366 181.63)` | Donnegal | black, 8.7 to 1 |
| 20 | `#95b4ac` | `oklch(74.36% 0.0352 178.94)` | Treetop | black, 9.3 to 1 |
| 21 | `#9cb9b1` | `oklch(76.13% 0.0331 177.47)` | Opal Silk | black, 9.9 to 1 |
| 22 | `#a3beb6` | `oklch(77.80% 0.0306 176.88)` | Botanical Bliss | black, 10.5 to 1 |
| 23 | `#aac2bb` | `oklch(79.42% 0.0279 176.84)` | Dreaming of the Day | black, 11.1 to 1 |
| 24 | `#b1c7c0` | `oklch(81.00% 0.0251 177.00)` | Fresh Tone | black, 11.7 to 1 |
| 25 | `#b7cbc6` | `oklch(82.58% 0.0225 177.01)` | Sea Sprite | black, 12.3 to 1 |
| 26 | `#bed0cb` | `oklch(84.19% 0.0202 176.54)` | White Box | black, 13 to 1 |
| 27 | `#c5d5d0` | `oklch(85.94% 0.0181 175.72)` | Celtic Grey | black, 13.7 to 1 |
| 28 | `#cddad6` | `oklch(87.78% 0.0160 174.75)` | Blue Cypress | black, 14.6 to 1 |
| 29 | `#d4e0dc` | `oklch(89.60% 0.0140 173.75)` | Spring Mist | black, 15.4 to 1 |
| 30 | `#dae5e1` | `oklch(91.27% 0.0122 172.79)` | Melting Snowman | black, 16.2 to 1 |
| 31 | `#e0e9e6` | `oklch(92.68% 0.0108 171.98)` | Calm | black, 16.9 to 1 |
| 32 | `#e4ece9` | `oklch(93.70% 0.0096 171.40)` | Morning Song | black, 17.5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #20344c 0.0%, #223850 3.2%, #273f56 6.5%, #2c465d 9.7%, #324f64 12.9%, #38576b 16.1%, #3e5f71 19.4%, #446676 22.6%, #4a6d7b 25.8%, #507380 29.0%, #567a84 32.3%, #5d8089 35.5%, #64878d 38.7%, #6a8d91 41.9%, #719496 45.2%, #789b9a 48.4%, #7fa19f 51.6%, #86a8a3 54.8%, #8eaea7 58.1%, #95b4ac 61.3%, #9cb9b1 64.5%, #a3beb6 67.7%, #aac2bb 71.0%, #b1c7c0 74.2%, #b7cbc6 77.4%, #bed0cb 80.6%, #c5d5d0 83.9%, #cddad6 87.1%, #d4e0dc 90.3%, #dae5e1 93.5%, #e0e9e6 96.8%, #e4ece9 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(31.89% 0.0510 253.83) 0.0%, oklch(33.52% 0.0508 251.65) 3.2%, oklch(35.78% 0.0505 248.69) 6.5%, oklch(38.45% 0.0502 245.16) 9.7%, oklch(41.32% 0.0497 241.29) 12.9%, oklch(44.16% 0.0492 237.30) 16.1%, oklch(46.77% 0.0484 233.43) 19.4%, oklch(49.07% 0.0474 229.74) 22.6%, oklch(51.29% 0.0461 225.99) 25.8%, oklch(53.44% 0.0446 222.17) 29.0%, oklch(55.57% 0.0431 218.25) 32.3%, oklch(57.67% 0.0417 214.22) 35.5%, oklch(59.78% 0.0404 210.08) 38.7%, oklch(61.91% 0.0394 205.69) 41.9%, oklch(64.08% 0.0389 200.70) 45.2%, oklch(66.25% 0.0385 195.43) 48.4%, oklch(68.39% 0.0381 190.24) 51.6%, oklch(70.47% 0.0376 185.52) 54.8%, oklch(72.48% 0.0366 181.63) 58.1%, oklch(74.36% 0.0352 178.94) 61.3%, oklch(76.13% 0.0331 177.47) 64.5%, oklch(77.80% 0.0306 176.88) 67.7%, oklch(79.42% 0.0279 176.84) 71.0%, oklch(81.00% 0.0251 177.00) 74.2%, oklch(82.58% 0.0225 177.01) 77.4%, oklch(84.19% 0.0202 176.54) 80.6%, oklch(85.94% 0.0181 175.72) 83.9%, oklch(87.78% 0.0160 174.75) 87.1%, oklch(89.60% 0.0140 173.75) 90.3%, oklch(91.27% 0.0122 172.79) 93.5%, oklch(92.68% 0.0108 171.98) 96.8%, oklch(93.70% 0.0096 171.40) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.051 | 253.8 |
| 2 | 0.472 | 0.048 | 232.7 |
| 3 | 0.606 | 0.04 | 208.4 |
| 4 | 0.736 | 0.036 | 179.9 |
| 5 | 0.839 | 0.021 | 176.7 |
| 6 | 0.937 | 0.01 | 171.4 |

## In these collections

- [Navy and teal gradients](https://grabient.com/navy-and-teal-gradients)

## Other forms

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