# Navy and teal ocean palette

The Navy and teal ocean palette brings together blue and teal. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its lightest and darkest tones both fall within the blue color family.

- Also called: Seamless monochrome navy and blue linear swatches
- Seed: `kaUTuxqBc9zyfPpQK0B0a7Ar8nQIqHECg`
- Page: https://grabient.com/kaUTuxqBc9zyfPpQK0B0a7Ar8nQIqHECg?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: light center, vivid, cool, monochrome, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.2 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 | `#08345a` | `oklch(31.89% 0.0813 249.61)` | Incremental Blue | white, 12.7 to 1 |
| 2 | `#013350` | `oklch(30.68% 0.0710 241.35)` | Dark Denim Blue | white, 13.2 to 1 |
| 3 | `#01374c` | `oklch(31.50% 0.0634 231.64)` | Crowberry Blue | white, 12.7 to 1 |
| 4 | `#044b60` | `oklch(38.58% 0.0712 224.45)` | Lazurite Blue | white, 9.5 to 1 |
| 5 | `#05677e` | `oklch(47.64% 0.0854 220.02)` | Tahitian Tide | white, 6.4 to 1 |
| 6 | `#02829f` | `oklch(56.25% 0.1027 221.01)` | Decore Splash | black, 4.7 to 1 |
| 7 | `#0097be` | `oklch(62.99% 0.1185 224.25)` | Atomic Blue | black, 6.1 to 1 |
| 8 | `#019fcc` | `oklch(65.45% 0.1267 227.35)` | Blue Ocean | black, 6.8 to 1 |
| 9 | `#0499cc` | `oklch(64.17% 0.1281 230.59)` | Tomb Blue | black, 6.4 to 1 |
| 10 | `#0085b6` | `oklch(58.00% 0.1202 233.25)` | Lucario Blue | black, 5 to 1 |
| 11 | `#006a96` | `oklch(49.61% 0.1066 235.90)` | Hydra | white, 5.9 to 1 |
| 12 | `#014e74` | `oklch(40.43% 0.0910 239.37)` | Sail Maker | white, 8.9 to 1 |
| 13 | `#023959` | `oklch(33.07% 0.0772 242.21)` | Gibraltar Sea | white, 12.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #08345a 0.000% 7.692%, #013350 7.692% 15.385%, #01374c 15.385% 23.077%, #044b60 23.077% 30.769%, #05677e 30.769% 38.462%, #02829f 38.462% 46.154%, #0097be 46.154% 53.846%, #019fcc 53.846% 61.538%, #0499cc 61.538% 69.231%, #0085b6 69.231% 76.923%, #006a96 76.923% 84.615%, #014e74 84.615% 92.308%, #023959 92.308% 100.000%);
background: linear-gradient(90deg, oklch(31.89% 0.0813 249.61) 0.000% 7.692%, oklch(30.68% 0.0710 241.35) 7.692% 15.385%, oklch(31.50% 0.0634 231.64) 15.385% 23.077%, oklch(38.58% 0.0712 224.45) 23.077% 30.769%, oklch(47.64% 0.0854 220.02) 30.769% 38.462%, oklch(56.25% 0.1027 221.01) 38.462% 46.154%, oklch(62.99% 0.1185 224.25) 46.154% 53.846%, oklch(65.45% 0.1267 227.35) 53.846% 61.538%, oklch(64.17% 0.1281 230.59) 61.538% 69.231%, oklch(58.00% 0.1202 233.25) 69.231% 76.923%, oklch(49.61% 0.1066 235.90) 76.923% 84.615%, oklch(40.43% 0.0910 239.37) 84.615% 92.308%, oklch(33.07% 0.0772 242.21) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.081 | 249.6 |
| 2 | 0.315 | 0.063 | 231.6 |
| 3 | 0.476 | 0.085 | 220 |
| 4 | 0.63 | 0.119 | 224.2 |
| 5 | 0.642 | 0.128 | 230.6 |
| 6 | 0.496 | 0.107 | 235.9 |
| 7 | 0.331 | 0.077 | 242.2 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)

## Other forms

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