# Navy, violet and terracotta sunset palette

The Navy, violet and terracotta sunset palette brings together dark blue, blue, magenta, and light orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is light orange.

- Also called: Tritone navy, purple and salmon linear gradient
- Seed: `kUSD28NrNA0syx9doUjA`
- Page: https://grabient.com/kUSD28NrNA0syx9doUjA?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light
- Hues: wide
- Contrast of its darkest and lightest colors: 6 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 | `#142753` | `oklch(28.35% 0.0841 264.38)` | Dark Tyrian Blue | white, 14.5 to 1 |
| 2 | `#152857` | `oklch(29.17% 0.0875 264.55)` | Ultramarine Violet | white, 14.2 to 1 |
| 3 | `#162b5c` | `oklch(30.23% 0.0923 264.45)` | Ultramarine Violet | white, 13.7 to 1 |
| 4 | `#172e62` | `oklch(31.46% 0.0981 264.21)` | Mythical Night | white, 13.1 to 1 |
| 5 | `#18316a` | `oklch(32.85% 0.1045 263.98)` | Atlantic Navy | white, 12.4 to 1 |
| 6 | `#1a3472` | `oklch(34.36% 0.1112 263.90)` | Atlantic Navy | white, 11.8 to 1 |
| 7 | `#1c387a` | `oklch(35.95% 0.1181 264.11)` | Surf the Web | white, 11.1 to 1 |
| 8 | `#1f3b82` | `oklch(37.58% 0.1246 264.75)` | Surf the Web | white, 10.4 to 1 |
| 9 | `#243f8b` | `oklch(39.23% 0.1306 265.95)` | Blue Oblivion | white, 9.7 to 1 |
| 10 | `#2b4292` | `oklch(40.85% 0.1357 267.87)` | Blue Oblivion | white, 9.1 to 1 |
| 11 | `#334499` | `oklch(42.41% 0.1396 270.64)` | Cascade Twilight | white, 8.6 to 1 |
| 12 | `#3d469f` | `oklch(43.91% 0.1422 274.38)` | Galaxy Express | white, 8.1 to 1 |
| 13 | `#4848a4` | `oklch(45.44% 0.1441 279.06)` | Galaxy Express | white, 7.6 to 1 |
| 14 | `#554aa8` | `oklch(47.01% 0.1455 284.54)` | Swiss Plum | white, 7.1 to 1 |
| 15 | `#614baa` | `oklch(48.59% 0.1462 290.68)` | Ultrapurple Merge | white, 6.7 to 1 |
| 16 | `#6e4dab` | `oklch(50.18% 0.1465 297.35)` | Studio | white, 6.3 to 1 |
| 17 | `#7c4eab` | `oklch(51.78% 0.1462 304.40)` | Royal Lavender | white, 5.9 to 1 |
| 18 | `#8850a9` | `oklch(53.38% 0.1455 311.70)` | Vicious Violet | white, 5.5 to 1 |
| 19 | `#9552a6` | `oklch(54.96% 0.1443 319.10)` | Vicious Violet | white, 5.2 to 1 |
| 20 | `#a054a2` | `oklch(56.52% 0.1427 326.48)` | Orchid Dottyback | white, 4.9 to 1 |
| 21 | `#ab579d` | `oklch(58.06% 0.1407 333.70)` | Magenta Memoir | white, 4.6 to 1 |
| 22 | `#b45a98` | `oklch(59.56% 0.1383 340.68)` | Spruce Tree Flower | black, 4.8 to 1 |
| 23 | `#bd5e91` | `oklch(61.12% 0.1349 348.16)` | Beauty Queen | black, 5.1 to 1 |
| 24 | `#c5648b` | `oklch(62.74% 0.1305 356.20)` | Old Geranium | black, 5.5 to 1 |
| 25 | `#cb6a84` | `oklch(64.38% 0.1254 4.57)` | Artful Pink | black, 5.9 to 1 |
| 26 | `#d1717d` | `oklch(66.02% 0.1198 13.04)` | Lotus Red | black, 6.3 to 1 |
| 27 | `#d47978` | `oklch(67.61% 0.1140 21.40)` | Hearts Afire | black, 6.8 to 1 |
| 28 | `#d68174` | `oklch(69.11% 0.1083 29.40)` | Golgfag Brown | black, 7.2 to 1 |
| 29 | `#d78972` | `oklch(70.51% 0.1028 36.83)` | Vintage Coral | black, 7.7 to 1 |
| 30 | `#d89071` | `oklch(71.74% 0.0980 43.45)` | Balcony Sunset | black, 8.1 to 1 |
| 31 | `#d89572` | `oklch(72.79% 0.0939 49.04)` | Sweet Cardamom | black, 8.4 to 1 |
| 32 | `#d79a73` | `oklch(73.62% 0.0909 53.38)` | Laredo | black, 8.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #142753 0.0%, #152857 3.2%, #162b5c 6.5%, #172e62 9.7%, #18316a 12.9%, #1a3472 16.1%, #1c387a 19.4%, #1f3b82 22.6%, #243f8b 25.8%, #2b4292 29.0%, #334499 32.3%, #3d469f 35.5%, #4848a4 38.7%, #554aa8 41.9%, #614baa 45.2%, #6e4dab 48.4%, #7c4eab 51.6%, #8850a9 54.8%, #9552a6 58.1%, #a054a2 61.3%, #ab579d 64.5%, #b45a98 67.7%, #bd5e91 71.0%, #c5648b 74.2%, #cb6a84 77.4%, #d1717d 80.6%, #d47978 83.9%, #d68174 87.1%, #d78972 90.3%, #d89071 93.5%, #d89572 96.8%, #d79a73 100.0%);
background: linear-gradient(90deg in oklch, oklch(28.35% 0.0841 264.38) 0.0%, oklch(29.17% 0.0875 264.55) 3.2%, oklch(30.23% 0.0923 264.45) 6.5%, oklch(31.46% 0.0981 264.21) 9.7%, oklch(32.85% 0.1045 263.98) 12.9%, oklch(34.36% 0.1112 263.90) 16.1%, oklch(35.95% 0.1181 264.11) 19.4%, oklch(37.58% 0.1246 264.75) 22.6%, oklch(39.23% 0.1306 265.95) 25.8%, oklch(40.85% 0.1357 267.87) 29.0%, oklch(42.41% 0.1396 270.64) 32.3%, oklch(43.91% 0.1422 274.38) 35.5%, oklch(45.44% 0.1441 279.06) 38.7%, oklch(47.01% 0.1455 284.54) 41.9%, oklch(48.59% 0.1462 290.68) 45.2%, oklch(50.18% 0.1465 297.35) 48.4%, oklch(51.78% 0.1462 304.40) 51.6%, oklch(53.38% 0.1455 311.70) 54.8%, oklch(54.96% 0.1443 319.10) 58.1%, oklch(56.52% 0.1427 326.48) 61.3%, oklch(58.06% 0.1407 333.70) 64.5%, oklch(59.56% 0.1383 340.68) 67.7%, oklch(61.12% 0.1349 348.16) 71.0%, oklch(62.74% 0.1305 356.20) 74.2%, oklch(64.38% 0.1254 4.57) 77.4%, oklch(66.02% 0.1198 13.04) 80.6%, oklch(67.61% 0.1140 21.40) 83.9%, oklch(69.11% 0.1083 29.40) 87.1%, oklch(70.51% 0.1028 36.83) 90.3%, oklch(71.74% 0.0980 43.45) 93.5%, oklch(72.79% 0.0939 49.04) 96.8%, oklch(73.62% 0.0909 53.38) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.084 | 264.4 |
| 2 | 0.429 | 0.141 | 271.8 |
| 3 | 0.591 | 0.139 | 338.3 |
| 4 | 0.736 | 0.091 | 413.4 |

## In these collections

- [Sunset gradients](https://grabient.com/sunset-gradients)

## Other forms

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