# Navy blue and teal palette

The Navy blue and teal palette brings together blue, teal, light green, and light teal. The colors span a broad lightness range, combining moderate 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 light teal.

- Also called: Analogous navy, teal and light blue linear swatches
- Seed: `kYT0-6qys_jufvXSnDq5Jy9esPwm`
- Page: https://grabient.com/kYT0-6qys_jufvXSnDq5Jy9esPwm?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 8.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 | `#0f2c67` | `oklch(31.10% 0.1089 262.27)` | Deep Sea Dream | white, 13.3 to 1 |
| 2 | `#0e2d6a` | `oklch(31.54% 0.1143 262.08)` | Deep Sea Dream | white, 13.1 to 1 |
| 3 | `#0b3070` | `oklch(32.77% 0.1192 260.70)` | Konjō Blue | white, 12.5 to 1 |
| 4 | `#093d77` | `oklch(36.27% 0.1130 255.62)` | Azure Dragon | white, 10.8 to 1 |
| 5 | `#15507e` | `oklch(41.76% 0.0973 247.39)` | Cleo’s Bath | white, 8.5 to 1 |
| 6 | `#236587` | `oklch(48.19% 0.0852 235.00)` | Copenhagen Blue | white, 6.3 to 1 |
| 7 | `#318092` | `oklch(55.83% 0.0799 215.77)` | Forget-Me-Not Blue | black, 4.6 to 1 |
| 8 | `#4b9a9b` | `oklch(63.57% 0.0775 196.54)` | Aquatic Green | black, 6.3 to 1 |
| 9 | `#63b0a4` | `oklch(70.31% 0.0782 183.24)` | Artesian Well | black, 8.2 to 1 |
| 10 | `#79c3ae` | `oklch(76.32% 0.0806 174.21)` | Pale Jade | black, 10.2 to 1 |
| 11 | `#8cd0bc` | `oklch(80.57% 0.0743 173.76)` | Blue Frosting | black, 11.8 to 1 |
| 12 | `#9ed4cb` | `oklch(82.94% 0.0570 184.13)` | Refresh | black, 12.7 to 1 |
| 13 | `#acd5d3` | `oklch(84.25% 0.0427 193.58)` | Lake Breeze | black, 13.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0f2c67 0.000% 7.692%, #0e2d6a 7.692% 15.385%, #0b3070 15.385% 23.077%, #093d77 23.077% 30.769%, #15507e 30.769% 38.462%, #236587 38.462% 46.154%, #318092 46.154% 53.846%, #4b9a9b 53.846% 61.538%, #63b0a4 61.538% 69.231%, #79c3ae 69.231% 76.923%, #8cd0bc 76.923% 84.615%, #9ed4cb 84.615% 92.308%, #acd5d3 92.308% 100.000%);
background: linear-gradient(90deg, oklch(31.10% 0.1089 262.27) 0.000% 7.692%, oklch(31.54% 0.1143 262.08) 7.692% 15.385%, oklch(32.77% 0.1192 260.70) 15.385% 23.077%, oklch(36.27% 0.1130 255.62) 23.077% 30.769%, oklch(41.76% 0.0973 247.39) 30.769% 38.462%, oklch(48.19% 0.0852 235.00) 38.462% 46.154%, oklch(55.83% 0.0799 215.77) 46.154% 53.846%, oklch(63.57% 0.0775 196.54) 53.846% 61.538%, oklch(70.31% 0.0782 183.24) 61.538% 69.231%, oklch(76.32% 0.0806 174.21) 69.231% 76.923%, oklch(80.57% 0.0743 173.76) 76.923% 84.615%, oklch(82.94% 0.0570 184.13) 84.615% 92.308%, oklch(84.25% 0.0427 193.58) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.311 | 0.109 | 262.3 |
| 2 | 0.339 | 0.119 | 259.1 |
| 3 | 0.469 | 0.087 | 238 |
| 4 | 0.65 | 0.077 | 193.6 |
| 5 | 0.791 | 0.079 | 172.4 |
| 6 | 0.843 | 0.043 | 193.6 |

## In these collections

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

## Other forms

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