# Navy, magenta and gold color palette

The Navy, magenta and gold color palette brings together dark blue, blue, orange, and light orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is light orange.

- Also called: Tritone navy, purple and tan linear gradient
- Seed: `kUPTOzMKC986r1HoEkNg`
- Page: https://grabient.com/kUPTOzMKC986r1HoEkNg?steps=40&angle=135
- Drawn as: linear gradient, 40 steps, 135 degrees
- Kinds: dark to light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 9.3 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 | `#01203f` | `oklch(24.02% 0.0703 251.72)` | Midnight Mirage | white, 16.4 to 1 |
| 2 | `#002141` | `oklch(24.63% 0.0709 250.65)` | Rhapsody in Blue | white, 16.1 to 1 |
| 3 | `#002441` | `oklch(25.33% 0.0688 248.34)` | Rhapsody in Blue | white, 15.8 to 1 |
| 4 | `#002642` | `oklch(26.14% 0.0661 245.25)` | Rhapsody in Blue | white, 15.4 to 1 |
| 5 | `#002943` | `oklch(27.03% 0.0638 241.69)` | Murky Depths | white, 14.9 to 1 |
| 6 | `#002c44` | `oklch(28.02% 0.0621 237.93)` | Cosmos Blue | white, 14.4 to 1 |
| 7 | `#003045` | `oklch(29.08% 0.0611 234.26)` | Cosmos Blue | white, 13.9 to 1 |
| 8 | `#003347` | `oklch(30.21% 0.0609 230.97)` | Crowberry Blue | white, 13.3 to 1 |
| 9 | `#00374a` | `oklch(31.41% 0.0615 228.32)` | Crowberry Blue | white, 12.7 to 1 |
| 10 | `#003b4d` | `oklch(32.68% 0.0629 226.62)` | Gibraltar Sea | white, 12.1 to 1 |
| 11 | `#003e52` | `oklch(33.99% 0.0651 226.14)` | Maniac Mansion | white, 11.5 to 1 |
| 12 | `#004257` | `oklch(35.35% 0.0684 227.17)` | Maniac Mansion | white, 10.9 to 1 |
| 13 | `#00465e` | `oklch(36.76% 0.0732 229.98)` | Loyal Blue | white, 10.3 to 1 |
| 14 | `#004967` | `oklch(38.20% 0.0809 234.87)` | Adriatic | white, 9.7 to 1 |
| 15 | `#054b74` | `oklch(39.71% 0.0918 242.30)` | Blue Meridian | white, 9.2 to 1 |
| 16 | `#204d7d` | `oklch(41.34% 0.0946 252.44)` | Classic Blue | white, 8.7 to 1 |
| 17 | `#354d85` | `oklch(43.07% 0.0979 264.76)` | Tory Blue | white, 8.1 to 1 |
| 18 | `#494d8c` | `oklch(44.88% 0.1014 278.82)` | Beaded Blue | white, 7.6 to 1 |
| 19 | `#5e4d8f` | `oklch(46.75% 0.1050 294.16)` | Purple Corallite | white, 7.1 to 1 |
| 20 | `#734c8d` | `oklch(48.66% 0.1086 310.31)` | Purple Sapphire | white, 6.6 to 1 |
| 21 | `#864c86` | `oklch(50.60% 0.1120 326.84)` | Lilikoi Flower Purple | white, 6.2 to 1 |
| 22 | `#974d7c` | `oklch(52.55% 0.1150 343.27)` | Verve Violet | white, 5.7 to 1 |
| 23 | `#a5506e` | `oklch(54.49% 0.1176 359.16)` | China Rose | white, 5.2 to 1 |
| 24 | `#b05560` | `oklch(56.41% 0.1195 14.04)` | Alsike Clover Red | white, 4.8 to 1 |
| 25 | `#b85c52` | `oklch(58.28% 0.1206 27.47)` | Wild Poppy | black, 4.6 to 1 |
| 26 | `#bc6447` | `oklch(60.08% 0.1208 38.98)` | Dirt Track | black, 5 to 1 |
| 27 | `#bf6d40` | `oklch(61.81% 0.1199 48.12)` | Screaming Bell Metal | black, 5.4 to 1 |
| 28 | `#c1763e` | `oklch(63.53% 0.1176 55.18)` | Tomato Cream | black, 5.9 to 1 |
| 29 | `#c27e41` | `oklch(65.30% 0.1139 60.88)` | Caramel Toffee | black, 6.3 to 1 |
| 30 | `#c38747` | `oklch(67.10% 0.1091 65.36)` | Automn Fox | black, 6.8 to 1 |
| 31 | `#c58f50` | `oklch(68.91% 0.1034 68.79)` | Light Copper | black, 7.4 to 1 |
| 32 | `#c7965a` | `oklch(70.71% 0.0970 71.31)` | Burnt Pumpkin | black, 7.9 to 1 |
| 33 | `#c99d65` | `oklch(72.47% 0.0901 73.09)` | Shetland | black, 8.5 to 1 |
| 34 | `#cba46f` | `oklch(74.17% 0.0831 74.27)` | Root Beer Float | black, 9 to 1 |
| 35 | `#cdaa7a` | `oklch(75.79% 0.0761 75.02)` | Burning Gold | black, 9.6 to 1 |
| 36 | `#cfb084` | `oklch(77.31% 0.0693 75.49)` | Castell Harlech | black, 10.1 to 1 |
| 37 | `#d1b58d` | `oklch(78.70% 0.0631 75.84)` | Link to the Past | black, 10.6 to 1 |
| 38 | `#d3b995` | `oklch(79.94% 0.0576 76.22)` | Community | black, 11.1 to 1 |
| 39 | `#d5bd9b` | `oklch(81.01% 0.0530 76.79)` | Eire | black, 11.5 to 1 |
| 40 | `#d6c0a0` | `oklch(81.89% 0.0496 77.71)` | Dune | black, 11.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #01203f 0.0%, #002141 2.6%, #002441 5.1%, #002642 7.7%, #002943 10.3%, #002c44 12.8%, #003045 15.4%, #003347 17.9%, #00374a 20.5%, #003b4d 23.1%, #003e52 25.6%, #004257 28.2%, #00465e 30.8%, #004967 33.3%, #054b74 35.9%, #204d7d 38.5%, #354d85 41.0%, #494d8c 43.6%, #5e4d8f 46.2%, #734c8d 48.7%, #864c86 51.3%, #974d7c 53.8%, #a5506e 56.4%, #b05560 59.0%, #b85c52 61.5%, #bc6447 64.1%, #bf6d40 66.7%, #c1763e 69.2%, #c27e41 71.8%, #c38747 74.4%, #c58f50 76.9%, #c7965a 79.5%, #c99d65 82.1%, #cba46f 84.6%, #cdaa7a 87.2%, #cfb084 89.7%, #d1b58d 92.3%, #d3b995 94.9%, #d5bd9b 97.4%, #d6c0a0 100.0%);
background: linear-gradient(135deg in oklch, oklch(24.02% 0.0703 251.72) 0.0%, oklch(24.63% 0.0709 250.65) 2.6%, oklch(25.33% 0.0688 248.34) 5.1%, oklch(26.14% 0.0661 245.25) 7.7%, oklch(27.03% 0.0638 241.69) 10.3%, oklch(28.02% 0.0621 237.93) 12.8%, oklch(29.08% 0.0611 234.26) 15.4%, oklch(30.21% 0.0609 230.97) 17.9%, oklch(31.41% 0.0615 228.32) 20.5%, oklch(32.68% 0.0629 226.62) 23.1%, oklch(33.99% 0.0651 226.14) 25.6%, oklch(35.35% 0.0684 227.17) 28.2%, oklch(36.76% 0.0732 229.98) 30.8%, oklch(38.20% 0.0809 234.87) 33.3%, oklch(39.71% 0.0918 242.30) 35.9%, oklch(41.34% 0.0946 252.44) 38.5%, oklch(43.07% 0.0979 264.76) 41.0%, oklch(44.88% 0.1014 278.82) 43.6%, oklch(46.75% 0.1050 294.16) 46.2%, oklch(48.66% 0.1086 310.31) 48.7%, oklch(50.60% 0.1120 326.84) 51.3%, oklch(52.55% 0.1150 343.27) 53.8%, oklch(54.49% 0.1176 359.16) 56.4%, oklch(56.41% 0.1195 14.04) 59.0%, oklch(58.28% 0.1206 27.47) 61.5%, oklch(60.08% 0.1208 38.98) 64.1%, oklch(61.81% 0.1199 48.12) 66.7%, oklch(63.53% 0.1176 55.18) 69.2%, oklch(65.30% 0.1139 60.88) 71.8%, oklch(67.10% 0.1091 65.36) 74.4%, oklch(68.91% 0.1034 68.79) 76.9%, oklch(70.71% 0.0970 71.31) 79.5%, oklch(72.47% 0.0901 73.09) 82.1%, oklch(74.17% 0.0831 74.27) 84.6%, oklch(75.79% 0.0761 75.02) 87.2%, oklch(77.31% 0.0693 75.49) 89.7%, oklch(78.70% 0.0631 75.84) 92.3%, oklch(79.94% 0.0576 76.22) 94.9%, oklch(81.01% 0.0530 76.79) 97.4%, oklch(81.89% 0.0496 77.71) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.07 | 251.7 |
| 2 | 0.382 | 0.09 | 234.8 |
| 3 | 0.618 | 0.12 | 408.1 |
| 4 | 0.819 | 0.05 | 437.7 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)
- [Wallpaper gradients](https://grabient.com/wallpaper-gradients)

## Other forms

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