# Teal and navy ocean palette

The Teal and navy ocean palette brings together off-white, light teal, teal, and dark blue. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Analogous light blue, teal and navy linear swatches
- Seed: `kW9A-HbRs_9u6PzDxUSoChD4`
- Page: https://grabient.com/kW9A-HbRs_9u6PzDxUSoChD4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, pastel, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 14.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 | `#e3f7f5` | `oklch(96.06% 0.0207 189.84)` | Frosty Mint | black, 18.8 to 1 |
| 2 | `#96e1db` | `oklch(85.83% 0.0744 189.84)` | Pale Beryl | black, 14 to 1 |
| 3 | `#00bead` | `oklch(72.05% 0.1280 183.50)` | Tealish | black, 8.9 to 1 |
| 4 | `#007896` | `oklch(53.15% 0.0996 223.68)` | Celestial | white, 5 to 1 |
| 5 | `#00204d` | `oklch(25.21% 0.0919 257.64)` | Oxford Blue | white, 16 to 1 |

## CSS

```css
background: linear-gradient(90deg, #e3f7f5 0.000% 20.000%, #96e1db 20.000% 40.000%, #00bead 40.000% 60.000%, #007896 60.000% 80.000%, #00204d 80.000% 100.000%);
background: linear-gradient(90deg, oklch(96.06% 0.0207 189.84) 0.000% 20.000%, oklch(85.83% 0.0744 189.84) 20.000% 40.000%, oklch(72.05% 0.1280 183.50) 40.000% 60.000%, oklch(53.15% 0.0996 223.68) 60.000% 80.000%, oklch(25.21% 0.0919 257.64) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.021 | 189.8 |
| 2 | 0.858 | 0.074 | 189.8 |
| 3 | 0.72 | 0.16 | 183.5 |
| 4 | 0.531 | 0.19 | 223.7 |
| 5 | 0.252 | 0.11 | 257.5 |

## In these collections

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

## Other forms

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