# Navy, turquoise and coral ocean palette

The Navy, turquoise and coral ocean palette brings together blue, teal, and light red. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is blue, and its lightest tone is teal.

- Also called: Vivid navy, cyan and salmon linear swatches
- Seed: `kUVEW5SSk8-euO3aqaxA`
- Page: https://grabient.com/kUVEW5SSk8-euO3aqaxA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#163466` | `oklch(33.07% 0.0951 260.16)` | Funnel Cloud | white, 12.3 to 1 |
| 2 | `#1c82b1` | `oklch(57.48% 0.1130 234.79)` | Lucario Blue | black, 4.9 to 1 |
| 3 | `#3bdbde` | `oklch(81.50% 0.1268 196.75)` | Neon Nazar | black, 12.4 to 1 |
| 4 | `#e18676` | `oklch(71.26% 0.1144 30.84)` | Peach Posey | black, 7.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #163466 0.000% 25.000%, #1c82b1 25.000% 50.000%, #3bdbde 50.000% 75.000%, #e18676 75.000% 100.000%);
background: linear-gradient(90deg, oklch(33.07% 0.0951 260.16) 0.000% 25.000%, oklch(57.48% 0.1130 234.79) 25.000% 50.000%, oklch(81.50% 0.1268 196.75) 50.000% 75.000%, oklch(71.26% 0.1144 30.84) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.331 | 0.095 | 260.2 |
| 2 | 0.575 | 0.113 | 234.8 |
| 3 | 0.815 | 0.127 | 196.8 |
| 4 | 0.713 | 0.114 | 30.8 |

## In these collections

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

## Other forms

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