# Navy and sage turquoise palette

The Navy and sage turquoise palette brings together dark blue, off-white, and teal. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Analogous navy, gray, teal and cyan linear gradient
- Seed: `kUSkK7fgQ4L0dP7kL0Ag`
- Page: https://grabient.com/kUSkK7fgQ4L0dP7kL0Ag?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light center, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 13.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 | `#122858` | `oklch(29.13% 0.0909 262.97)` | Fibonacci Blue | white, 14.2 to 1 |
| 2 | `#193663` | `oklch(33.66% 0.0857 258.95)` | Navy Trim | white, 11.9 to 1 |
| 3 | `#274971` | `oklch(40.12% 0.0783 253.45)` | Pretty Twilight Night | white, 9.1 to 1 |
| 4 | `#3c6183` | `oklch(47.98% 0.0691 246.84)` | Atlantic Schooner | white, 6.4 to 1 |
| 5 | `#567c96` | `oklch(56.73% 0.0590 239.46)` | Mallorca Blue | black, 4.7 to 1 |
| 6 | `#7498ab` | `oklch(65.85% 0.0484 231.66)` | American Anthem | black, 6.7 to 1 |
| 7 | `#94b3bf` | `oklch(74.82% 0.0381 223.79)` | Bright Bluebonnet | black, 9.4 to 1 |
| 8 | `#b4cdd4` | `oklch(83.11% 0.0286 216.20)` | Pallid Blue | black, 12.5 to 1 |
| 9 | `#d0e3e6` | `oklch(90.21% 0.0206 209.25)` | Ski White | black, 15.7 to 1 |
| 10 | `#e6f4f5` | `oklch(95.60% 0.0146 203.28)` | Milky Way | black, 18.5 to 1 |
| 11 | `#f3fdfe` | `oklch(98.75% 0.0114 198.64)` | Sparkling Snow | black, 20.3 to 1 |
| 12 | `#f4ffff` | `oklch(99.17% 0.0113 195.52)` | Sparkling Snow | black, 20.5 to 1 |
| 13 | `#ebf8f7` | `oklch(96.94% 0.0139 193.47)` | Aijiro White | black, 19.3 to 1 |
| 14 | `#d9ebea` | `oklch(92.59% 0.0187 192.30)` | Water Squirt | black, 16.9 to 1 |
| 15 | `#c1d9d7` | `oklch(86.68% 0.0253 191.85)` | Haint Blue | black, 14.1 to 1 |
| 16 | `#a5c4c2` | `oklch(79.75% 0.0331 191.95)` | Ocean Kiss | black, 11.2 to 1 |
| 17 | `#88aead` | `oklch(72.37% 0.0418 192.46)` | Shallow Water Ground | black, 8.7 to 1 |
| 18 | `#6a9a98` | `oklch(65.07% 0.0509 193.20)` | Desaturated Cyan | black, 6.6 to 1 |
| 19 | `#4e8786` | `oklch(58.42% 0.0598 194.02)` | Jericho Jade | black, 5.1 to 1 |
| 20 | `#347878` | `oklch(52.96% 0.0683 194.75)` | Atoll | white, 5.1 to 1 |
| 21 | `#1b6e6f` | `oklch(49.26% 0.0757 195.23)` | Peacock Plume | white, 5.9 to 1 |
| 22 | `#006b6c` | `oklch(47.80% 0.0815 195.34)` | Mayan Blue | white, 6.3 to 1 |
| 23 | `#006c6d` | `oklch(48.21% 0.0822 195.42)` | Byzantine Blue | white, 6.2 to 1 |
| 24 | `#007273` | `oklch(50.03% 0.0853 195.57)` | Natural Instinct Green | white, 5.7 to 1 |
| 25 | `#007b7c` | `oklch(52.96% 0.0903 195.78)` | Blue Grass | white, 5 to 1 |
| 26 | `#008889` | `oklch(56.69% 0.0966 196.03)` | Green Moblin | black, 4.8 to 1 |
| 27 | `#009698` | `oklch(60.91% 0.1038 196.31)` | Sea Fantasy | black, 5.7 to 1 |
| 28 | `#00a5a7` | `oklch(65.33% 0.1112 196.59)` | Wax Crayon Blue | black, 6.9 to 1 |
| 29 | `#00b3b6` | `oklch(69.62% 0.1185 196.87)` | Cyan Sky | black, 8.1 to 1 |
| 30 | `#10c1c4` | `oklch(73.49% 0.1233 197.11)` | Cala Benirrás Blue | black, 9.4 to 1 |
| 31 | `#1ccbcf` | `oklch(76.63% 0.1268 197.31)` | Mermaid Net | black, 10.5 to 1 |
| 32 | `#21d3d7` | `oklch(78.74% 0.1295 197.45)` | Aztec Turquoise | black, 11.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #122858 0.0%, #193663 3.2%, #274971 6.5%, #3c6183 9.7%, #567c96 12.9%, #7498ab 16.1%, #94b3bf 19.4%, #b4cdd4 22.6%, #d0e3e6 25.8%, #e6f4f5 29.0%, #f3fdfe 32.3%, #f4ffff 35.5%, #ebf8f7 38.7%, #d9ebea 41.9%, #c1d9d7 45.2%, #a5c4c2 48.4%, #88aead 51.6%, #6a9a98 54.8%, #4e8786 58.1%, #347878 61.3%, #1b6e6f 64.5%, #006b6c 67.7%, #006c6d 71.0%, #007273 74.2%, #007b7c 77.4%, #008889 80.6%, #009698 83.9%, #00a5a7 87.1%, #00b3b6 90.3%, #10c1c4 93.5%, #1ccbcf 96.8%, #21d3d7 100.0%);
background: linear-gradient(180deg in oklch, oklch(29.13% 0.0909 262.97) 0.0%, oklch(33.66% 0.0857 258.95) 3.2%, oklch(40.12% 0.0783 253.45) 6.5%, oklch(47.98% 0.0691 246.84) 9.7%, oklch(56.73% 0.0590 239.46) 12.9%, oklch(65.85% 0.0484 231.66) 16.1%, oklch(74.82% 0.0381 223.79) 19.4%, oklch(83.11% 0.0286 216.20) 22.6%, oklch(90.21% 0.0206 209.25) 25.8%, oklch(95.60% 0.0146 203.28) 29.0%, oklch(98.75% 0.0114 198.64) 32.3%, oklch(99.17% 0.0113 195.52) 35.5%, oklch(96.94% 0.0139 193.47) 38.7%, oklch(92.59% 0.0187 192.30) 41.9%, oklch(86.68% 0.0253 191.85) 45.2%, oklch(79.75% 0.0331 191.95) 48.4%, oklch(72.37% 0.0418 192.46) 51.6%, oklch(65.07% 0.0509 193.20) 54.8%, oklch(58.42% 0.0598 194.02) 58.1%, oklch(52.96% 0.0683 194.75) 61.3%, oklch(49.26% 0.0757 195.23) 64.5%, oklch(47.80% 0.0815 195.34) 67.7%, oklch(48.21% 0.0822 195.42) 71.0%, oklch(50.03% 0.0853 195.57) 74.2%, oklch(52.96% 0.0903 195.78) 77.4%, oklch(56.69% 0.0966 196.03) 80.6%, oklch(60.91% 0.1038 196.31) 83.9%, oklch(65.33% 0.1112 196.59) 87.1%, oklch(69.62% 0.1185 196.87) 90.3%, oklch(73.49% 0.1233 197.11) 93.5%, oklch(76.63% 0.1268 197.31) 96.8%, oklch(78.74% 0.1295 197.45) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.291 | 0.091 | 263 |
| 2 | 0.992 | 0.011 | 197.5 |
| 3 | 0.48 | 0.08 | 195.3 |
| 4 | 0.787 | 0.13 | 197.5 |

## In these collections

- [Turquoise](https://grabient.com/turquoise)

## Other forms

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