# Navy, turquoise and terracotta color palette

The Navy, turquoise and terracotta color palette brings together blue, teal, gold, and orange. 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 gold.

- Also called: Navy, blue, yellow and orange linear swatches
- Seed: `kWTTi1waa99yjO5uLjL0ra6A`
- Page: https://grabient.com/kWTTi1waa99yjO5uLjL0ra6A?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 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 | `#102f54` | `oklch(30.31% 0.0772 255.23)` | Ambassador Blue | white, 13.5 to 1 |
| 2 | `#186f9d` | `oklch(51.57% 0.1061 238.33)` | Disarm | white, 5.5 to 1 |
| 3 | `#50b9c0` | `oklch(72.83% 0.0965 201.34)` | Sussie | black, 9 to 1 |
| 4 | `#f1d06a` | `oklch(86.61% 0.1268 91.44)` | Ride off Into the Sunset | black, 13.9 to 1 |
| 5 | `#d96b3e` | `oklch(64.96% 0.1502 41.77)` | Sorbus | black, 6.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #102f54 0.000% 20.000%, #186f9d 20.000% 40.000%, #50b9c0 40.000% 60.000%, #f1d06a 60.000% 80.000%, #d96b3e 80.000% 100.000%);
background: linear-gradient(90deg, oklch(30.31% 0.0772 255.23) 0.000% 20.000%, oklch(51.57% 0.1061 238.33) 20.000% 40.000%, oklch(72.83% 0.0965 201.34) 40.000% 60.000%, oklch(86.61% 0.1268 91.44) 60.000% 80.000%, oklch(64.96% 0.1502 41.77) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.303 | 0.077 | 255.2 |
| 2 | 0.516 | 0.106 | 238.3 |
| 3 | 0.728 | 0.096 | 201.3 |
| 4 | 0.866 | 0.127 | 91.4 |
| 5 | 0.65 | 0.15 | 41.8 |

## In these collections

- [Tropical swatches](https://grabient.com/tropical-swatches)
- [Summer swatches](https://grabient.com/summer-swatches)

## Other forms

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