# Navy Violet Burnt Orange

A linear gradient begins in deep navy and cobalt blue, passes through violet and crimson, and finishes in burnt orange. The saturated cool-to-warm transition gives posters, sports graphics, presentation covers, album artwork, and interface banners a strong directional sweep with dark blue depth and a clear warm endpoint.

- Also called: Navy, purple, red and orange linear gradient
- Seed: `kUXz23TSG_Us50VaM0GA`
- Page: https://grabient.com/kUXz23TSG_Us50VaM0GA?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark to light
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.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 | `#22416d` | `oklch(37.40% 0.0841 257.34)` | Blue Mosque | white, 10.3 to 1 |
| 2 | `#244571` | `oklch(38.84% 0.0843 256.40)` | Pretty Twilight Night | white, 9.7 to 1 |
| 3 | `#274b76` | `oklch(40.81% 0.0843 254.36)` | Sapphire Earrings | white, 8.9 to 1 |
| 4 | `#2a527d` | `oklch(43.19% 0.0841 251.64)` | Slumber | white, 8 to 1 |
| 5 | `#2e5b84` | `oklch(45.84% 0.0840 248.69)` | Dead Lake | white, 7.1 to 1 |
| 6 | `#33648c` | `oklch(48.64% 0.0840 245.93)` | Drake’s Neck | white, 6.3 to 1 |
| 7 | `#396c94` | `oklch(51.46% 0.0843 243.79)` | Rainy Lake | white, 5.5 to 1 |
| 8 | `#3f759d` | `oklch(54.15% 0.0851 242.69)` | Phenomenon | white, 4.9 to 1 |
| 9 | `#467ca5` | `oklch(56.60% 0.0864 243.06)` | Parisian Blue | black, 4.6 to 1 |
| 10 | `#4d81ae` | `oklch(58.68% 0.0884 245.33)` | Seabrook | black, 5 to 1 |
| 11 | `#5585b6` | `oklch(60.24% 0.0912 249.93)` | Hideout | black, 5.4 to 1 |
| 12 | `#5f85bd` | `oklch(61.20% 0.0951 257.50)` | Marine Ink | black, 5.5 to 1 |
| 13 | `#6c82c2` | `oklch(61.64% 0.1006 268.57)` | Orbital | black, 5.6 to 1 |
| 14 | `#7c7cc4` | `oklch(61.65% 0.1074 282.45)` | Ube | black, 5.5 to 1 |
| 15 | `#8d74c0` | `oklch(61.36% 0.1149 298.35)` | Middle Blue Purple | black, 5.3 to 1 |
| 16 | `#9f6ab5` | `oklch(60.85% 0.1230 315.51)` | Prickly Purple | black, 5.2 to 1 |
| 17 | `#ae61a2` | `oklch(60.24% 0.1311 333.14)` | Bodacious | black, 5 to 1 |
| 18 | `#bb588a` | `oklch(59.63% 0.1389 350.48)` | Berry Boost | black, 4.8 to 1 |
| 19 | `#c3526f` | `oklch(59.12% 0.1459 6.74)` | Ripe Cherry | black, 4.7 to 1 |
| 20 | `#c75054` | `oklch(58.82% 0.1519 21.15)` | Autumn Fire | black, 4.7 to 1 |
| 21 | `#c8523a` | `oklch(58.83% 0.1565 32.93)` | Cinnamon Stone | black, 4.7 to 1 |
| 22 | `#c95624` | `oklch(59.24% 0.1591 41.41)` | Rusty Nail | black, 4.8 to 1 |
| 23 | `#ca5b0e` | `oklch(60.01% 0.1601 47.34)` | Rusty Orange | black, 5 to 1 |
| 24 | `#cb6100` | `oklch(61.05% 0.1585 51.31)` | Kvass | black, 5.2 to 1 |
| 25 | `#cd6700` | `oklch(62.29% 0.1567 53.69)` | Curry Powder | black, 5.5 to 1 |
| 26 | `#d16c07` | `oklch(63.66% 0.1560 54.82)` | Autumn Maple | black, 5.8 to 1 |
| 27 | `#d47119` | `oklch(65.10% 0.1531 54.97)` | Marmalade | black, 6.2 to 1 |
| 28 | `#d87627` | `oklch(66.54% 0.1500 54.48)` | Bitter Orange | black, 6.5 to 1 |
| 29 | `#dc7b32` | `oklch(67.90% 0.1470 53.68)` | Sandy Peppers | black, 6.9 to 1 |
| 30 | `#e07f3b` | `oklch(69.12% 0.1442 52.90)` | Tree Poppy | black, 7.2 to 1 |
| 31 | `#e28341` | `oklch(70.13% 0.1419 52.46)` | Tree Poppy | black, 7.5 to 1 |
| 32 | `#e48645` | `oklch(70.87% 0.1406 52.69)` | Muskmelon | black, 7.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #22416d 0.0%, #244571 3.2%, #274b76 6.5%, #2a527d 9.7%, #2e5b84 12.9%, #33648c 16.1%, #396c94 19.4%, #3f759d 22.6%, #467ca5 25.8%, #4d81ae 29.0%, #5585b6 32.3%, #5f85bd 35.5%, #6c82c2 38.7%, #7c7cc4 41.9%, #8d74c0 45.2%, #9f6ab5 48.4%, #ae61a2 51.6%, #bb588a 54.8%, #c3526f 58.1%, #c75054 61.3%, #c8523a 64.5%, #c95624 67.7%, #ca5b0e 71.0%, #cb6100 74.2%, #cd6700 77.4%, #d16c07 80.6%, #d47119 83.9%, #d87627 87.1%, #dc7b32 90.3%, #e07f3b 93.5%, #e28341 96.8%, #e48645 100.0%);
background: linear-gradient(45deg in oklch, oklch(37.40% 0.0841 257.34) 0.0%, oklch(38.84% 0.0843 256.40) 3.2%, oklch(40.81% 0.0843 254.36) 6.5%, oklch(43.19% 0.0841 251.64) 9.7%, oklch(45.84% 0.0840 248.69) 12.9%, oklch(48.64% 0.0840 245.93) 16.1%, oklch(51.46% 0.0843 243.79) 19.4%, oklch(54.15% 0.0851 242.69) 22.6%, oklch(56.60% 0.0864 243.06) 25.8%, oklch(58.68% 0.0884 245.33) 29.0%, oklch(60.24% 0.0912 249.93) 32.3%, oklch(61.20% 0.0951 257.50) 35.5%, oklch(61.64% 0.1006 268.57) 38.7%, oklch(61.65% 0.1074 282.45) 41.9%, oklch(61.36% 0.1149 298.35) 45.2%, oklch(60.85% 0.1230 315.51) 48.4%, oklch(60.24% 0.1311 333.14) 51.6%, oklch(59.63% 0.1389 350.48) 54.8%, oklch(59.12% 0.1459 6.74) 58.1%, oklch(58.82% 0.1519 21.15) 61.3%, oklch(58.83% 0.1565 32.93) 64.5%, oklch(59.24% 0.1591 41.41) 67.7%, oklch(60.01% 0.1601 47.34) 71.0%, oklch(61.05% 0.1585 51.31) 74.2%, oklch(62.29% 0.1567 53.69) 77.4%, oklch(63.66% 0.1560 54.82) 80.6%, oklch(65.10% 0.1531 54.97) 83.9%, oklch(66.54% 0.1500 54.48) 87.1%, oklch(67.90% 0.1470 53.68) 90.3%, oklch(69.12% 0.1442 52.90) 93.5%, oklch(70.13% 0.1419 52.46) 96.8%, oklch(70.87% 0.1406 52.69) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.374 | 0.084 | 257.3 |
| 2 | 0.606 | 0.092 | 252.1 |
| 3 | 0.591 | 0.158 | 398.9 |
| 4 | 0.709 | 0.141 | 412.7 |

## In these collections

- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)

## Other forms

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