# Mauve and navy orange and blue palette

The Mauve and navy orange and blue palette brings together light orange, orange, magenta, blue, and dark blue. 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: Peach to navy linear gradient
- Seed: `ka4Tsw5Ki-lOqvvAETitxq2SsgP0eGb-g`
- Page: https://grabient.com/ka4Tsw5Ki-lOqvvAETitxq2SsgP0eGb-g?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light to dark
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 11.7 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 | `#fed09f` | `oklch(88.58% 0.0813 68.20)` | Atoll Sand | black, 14.7 to 1 |
| 2 | `#fccb99` | `oklch(87.41% 0.0856 66.64)` | Peach Orange | black, 14.1 to 1 |
| 3 | `#fbc490` | `oklch(85.79% 0.0920 64.40)` | Tuscan Wall | black, 13.4 to 1 |
| 4 | `#f9bc86` | `oklch(83.86% 0.0991 61.82)` | Mango Ice | black, 12.5 to 1 |
| 5 | `#f6b37c` | `oklch(81.72% 0.1058 59.22)` | Sunburst | black, 11.6 to 1 |
| 6 | `#f2aa73` | `oklch(79.50% 0.1110 56.91)` | Catalina Tile | black, 10.7 to 1 |
| 7 | `#eda16b` | `oklch(77.22% 0.1147 55.61)` | Monarch Orange | black, 9.9 to 1 |
| 8 | `#e69860` | `oklch(74.75% 0.1185 55.49)` | Outgoing Orange | black, 9 to 1 |
| 9 | `#df9056` | `oklch(72.15% 0.1212 55.35)` | Jasper Orange | black, 8.2 to 1 |
| 10 | `#d7864f` | `oklch(69.44% 0.1217 53.98)` | Copperhead | black, 7.4 to 1 |
| 11 | `#ce7d4d` | `oklch(66.67% 0.1190 50.16)` | Apricot Buff | black, 6.6 to 1 |
| 12 | `#c37453` | `oklch(63.80% 0.1111 42.95)` | Spanish Peanut | black, 5.9 to 1 |
| 13 | `#b46c5c` | `oklch(60.65% 0.0967 32.97)` | Cobrizo | black, 5.2 to 1 |
| 14 | `#a26564` | `oklch(57.41% 0.0792 20.98)` | Withered Rose | black, 4.6 to 1 |
| 15 | `#906069` | `oklch(54.31% 0.0625 7.68)` | Prosperity | white, 5.1 to 1 |
| 16 | `#7f5c6a` | `oklch(51.56% 0.0502 353.78)` | Royal Fig | white, 5.7 to 1 |
| 17 | `#74586a` | `oklch(49.39% 0.0456 339.43)` | Exotic Orchid | white, 6.3 to 1 |
| 18 | `#6a546d` | `oklch(47.80% 0.0477 322.40)` | Medicine Man | white, 6.7 to 1 |
| 19 | `#605272` | `oklch(46.57% 0.0540 304.16)` | Futaai Indigo | white, 7.1 to 1 |
| 20 | `#545178` | `oklch(45.48% 0.0620 286.79)` | Deep Orchid | white, 7.4 to 1 |
| 21 | `#46517a` | `oklch(44.28% 0.0695 272.38)` | Provocative | white, 7.7 to 1 |
| 22 | `#394e78` | `oklch(42.77% 0.0744 262.97)` | Noble Knight | white, 8.2 to 1 |
| 23 | `#2f4b75` | `oklch(41.06% 0.0785 258.62)` | Dragonfly | white, 8.8 to 1 |
| 24 | `#284671` | `oklch(39.24% 0.0825 257.73)` | Pretty Twilight Night | white, 9.5 to 1 |
| 25 | `#23406d` | `oklch(37.37% 0.0857 258.73)` | Limoges | white, 10.3 to 1 |
| 26 | `#1f3b69` | `oklch(35.45% 0.0877 260.02)` | Limoges | white, 11.1 to 1 |
| 27 | `#1a3563` | `oklch(33.53% 0.0881 260.06)` | Navy Trim | white, 12 to 1 |
| 28 | `#14305c` | `oklch(31.40% 0.0860 259.45)` | Ambassador Blue | white, 13 to 1 |
| 29 | `#0f2a54` | `oklch(29.10% 0.0821 258.96)` | Dark Tyrian Blue | white, 14.1 to 1 |
| 30 | `#0b254b` | `oklch(26.88% 0.0774 258.59)` | Dark Eclipse | white, 15.2 to 1 |
| 31 | `#082044` | `oklch(24.97% 0.0731 258.29)` | Oxford Blue | white, 16 to 1 |
| 32 | `#061d3f` | `oklch(23.62% 0.0703 258.07)` | Midnight Mirage | white, 16.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #fed09f 0.0%, #fccb99 3.2%, #fbc490 6.5%, #f9bc86 9.7%, #f6b37c 12.9%, #f2aa73 16.1%, #eda16b 19.4%, #e69860 22.6%, #df9056 25.8%, #d7864f 29.0%, #ce7d4d 32.3%, #c37453 35.5%, #b46c5c 38.7%, #a26564 41.9%, #906069 45.2%, #7f5c6a 48.4%, #74586a 51.6%, #6a546d 54.8%, #605272 58.1%, #545178 61.3%, #46517a 64.5%, #394e78 67.7%, #2f4b75 71.0%, #284671 74.2%, #23406d 77.4%, #1f3b69 80.6%, #1a3563 83.9%, #14305c 87.1%, #0f2a54 90.3%, #0b254b 93.5%, #082044 96.8%, #061d3f 100.0%);
background: linear-gradient(180deg in oklch, oklch(88.58% 0.0813 68.20) 0.0%, oklch(87.41% 0.0856 66.64) 3.2%, oklch(85.79% 0.0920 64.40) 6.5%, oklch(83.86% 0.0991 61.82) 9.7%, oklch(81.72% 0.1058 59.22) 12.9%, oklch(79.50% 0.1110 56.91) 16.1%, oklch(77.22% 0.1147 55.61) 19.4%, oklch(74.75% 0.1185 55.49) 22.6%, oklch(72.15% 0.1212 55.35) 25.8%, oklch(69.44% 0.1217 53.98) 29.0%, oklch(66.67% 0.1190 50.16) 32.3%, oklch(63.80% 0.1111 42.95) 35.5%, oklch(60.65% 0.0967 32.97) 38.7%, oklch(57.41% 0.0792 20.98) 41.9%, oklch(54.31% 0.0625 7.68) 45.2%, oklch(51.56% 0.0502 353.78) 48.4%, oklch(49.39% 0.0456 339.43) 51.6%, oklch(47.80% 0.0477 322.40) 54.8%, oklch(46.57% 0.0540 304.16) 58.1%, oklch(45.48% 0.0620 286.79) 61.3%, oklch(44.28% 0.0695 272.38) 64.5%, oklch(42.77% 0.0744 262.97) 67.7%, oklch(41.06% 0.0785 258.62) 71.0%, oklch(39.24% 0.0825 257.73) 74.2%, oklch(37.37% 0.0857 258.73) 77.4%, oklch(35.45% 0.0877 260.02) 80.6%, oklch(33.53% 0.0881 260.06) 83.9%, oklch(31.40% 0.0860 259.45) 87.1%, oklch(29.10% 0.0821 258.96) 90.3%, oklch(26.88% 0.0774 258.59) 93.5%, oklch(24.97% 0.0731 258.29) 96.8%, oklch(23.62% 0.0703 258.07) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.886 | 0.081 | 68.2 |
| 2 | 0.791 | 0.112 | 56.6 |
| 3 | 0.657 | 0.117 | 48.1 |
| 4 | 0.504 | 0.047 | -13.2 |
| 5 | 0.433 | 0.073 | -94.5 |
| 6 | 0.339 | 0.088 | -99.8 |
| 7 | 0.236 | 0.07 | -101.9 |

## In these collections

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

## Other forms

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