# Navy, plum and terracotta color palette

The Navy, plum and terracotta color palette brings together dark blue, dark purple, magenta, red, and orange. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is orange.

- Also called: Tritone navy, purple and brown linear swatches
- Seed: `kWNxrAISZETKuQ3FK8QUCfEY`
- Page: https://grabient.com/kWNxrAISZETKuQ3FK8QUCfEY?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: dark to light
- Hues: wide
- Contrast of its darkest and lightest colors: 4.8 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 | `#13192a` | `oklch(21.65% 0.0358 270.00)` | Sambucus | white, 17.5 to 1 |
| 2 | `#310f4a` | `oklch(25.98% 0.1047 306.99)` | Oily Purple | white, 16.1 to 1 |
| 3 | `#6f2560` | `oklch(39.76% 0.1268 336.58)` | Byzantium | white, 9.9 to 1 |
| 4 | `#a94e5e` | `oklch(54.33% 0.1199 11.45)` | Rose Vale | white, 5.3 to 1 |
| 5 | `#be744a` | `oklch(62.99% 0.1089 49.49)` | Orange Lily | black, 5.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #13192a 0.000% 20.000%, #310f4a 20.000% 40.000%, #6f2560 40.000% 60.000%, #a94e5e 60.000% 80.000%, #be744a 80.000% 100.000%);
background: linear-gradient(180deg, oklch(21.65% 0.0358 270.00) 0.000% 20.000%, oklch(25.98% 0.1047 306.99) 20.000% 40.000%, oklch(39.76% 0.1268 336.58) 40.000% 60.000%, oklch(54.33% 0.1199 11.45) 60.000% 80.000%, oklch(62.99% 0.1089 49.49) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.036 | 270 |
| 2 | 0.26 | 0.105 | 307 |
| 3 | 0.398 | 0.127 | 336.6 |
| 4 | 0.543 | 0.12 | 371.4 |
| 5 | 0.63 | 0.109 | 409.5 |

## In these collections

- [Violet rain on sandstone](https://grabient.com/violet-rain-on-sandstone)
- [Pantone fall 2026 swatches](https://grabient.com/pantone-fall-2026-swatches)
- [Desert swatches](https://grabient.com/desert-swatches)

## Other forms

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