# Orange and Blue: Navy and mauve

The "Orange and Blue: Navy and mauve" palette brings together dark blue, blue, red, and orange. The colors span a moderate 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 orange.

- Also called: Navy, gray and brown linear gradient
- Seed: `kcNCi3pBm_S6hP65j0AQAxQcUuwdJNT_OTI_A`
- Page: https://grabient.com/kcNCi3pBm_S6hP65j0AQAxQcUuwdJNT_OTI_A?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.9 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 | `#061730` | `oklch(20.47% 0.0551 258.05)` | Liberty Blue | white, 17.9 to 1 |
| 2 | `#071a34` | `oklch(21.71% 0.0574 257.15)` | Naval Night | white, 17.4 to 1 |
| 3 | `#081e3a` | `oklch(23.47% 0.0606 255.84)` | Naval Night | white, 16.7 to 1 |
| 4 | `#092341` | `oklch(25.50% 0.0644 254.42)` | Dark Eclipse | white, 15.7 to 1 |
| 5 | `#0b2848` | `oklch(27.54% 0.0685 253.17)` | Midnight Ocean | white, 14.8 to 1 |
| 6 | `#0c2d4f` | `oklch(29.39% 0.0732 252.31)` | Royal Blue Metallic | white, 13.9 to 1 |
| 7 | `#0b3258` | `oklch(31.24% 0.0801 251.65)` | Effervescent Blue | white, 13 to 1 |
| 8 | `#0a3760` | `oklch(33.10% 0.0870 251.15)` | Lost in Space | white, 12.1 to 1 |
| 9 | `#0b3c68` | `oklch(34.98% 0.0913 250.81)` | Ateneo Blue | white, 11.3 to 1 |
| 10 | `#12416d` | `oklch(36.89% 0.0904 250.57)` | Epic Adventure | white, 10.4 to 1 |
| 11 | `#1a486e` | `oklch(38.91% 0.0821 247.28)` | Hopi Blue Corn | white, 9.5 to 1 |
| 12 | `#254e6d` | `oklch(40.99% 0.0690 242.59)` | Kinetic Blue | white, 8.7 to 1 |
| 13 | `#33546b` | `oklch(43.01% 0.0548 241.18)` | America’s Cup | white, 8 to 1 |
| 14 | `#41576c` | `oklch(44.82% 0.0435 247.72)` | Inlet Harbour | white, 7.4 to 1 |
| 15 | `#50596e` | `oklch(46.31% 0.0365 267.70)` | Midnight Sun | white, 7 to 1 |
| 16 | `#5f596b` | `oklch(47.57% 0.0304 301.32)` | Gobelin Mauve | white, 6.7 to 1 |
| 17 | `#6a5a64` | `oklch(48.66% 0.0269 339.83)` | Patina Violet | white, 6.4 to 1 |
| 18 | `#725c5d` | `oklch(49.67% 0.0281 14.20)` | Peppercorn | white, 6.1 to 1 |
| 19 | `#785e57` | `oklch(50.68% 0.0364 35.74)` | Bateau Brown | white, 5.9 to 1 |
| 20 | `#835e4d` | `oklch(51.65% 0.0554 45.34)` | Rawhide | white, 5.7 to 1 |
| 21 | `#915c40` | `oklch(52.55% 0.0809 47.94)` | Spiced Cider | white, 5.5 to 1 |
| 22 | `#9e5832` | `oklch(53.40% 0.1065 47.21)` | Cinnamon Sparkle | white, 5.4 to 1 |
| 23 | `#a95425` | `oklch(54.22% 0.1262 46.86)` | Wine Barrel | white, 5.2 to 1 |
| 24 | `#b0541b` | `oklch(55.23% 0.1369 48.00)` | Wine Barrel | white, 5 to 1 |
| 25 | `#b65718` | `oklch(56.51% 0.1425 48.12)` | Fallen Canopy | white, 4.8 to 1 |
| 26 | `#bb591b` | `oklch(57.56% 0.1448 47.52)` | Bloodhound | white, 4.6 to 1 |
| 27 | `#bd591e` | `oklch(57.85% 0.1456 46.56)` | Titian Red | black, 4.6 to 1 |
| 28 | `#ba551c` | `oklch(56.83% 0.1463 45.50)` | Taisha Brown | white, 4.7 to 1 |
| 29 | `#b14c18` | `oklch(54.14% 0.1450 43.81)` | Skrag Brown | white, 5.3 to 1 |
| 30 | `#a54113` | `oklch(50.60% 0.1424 41.79)` | Rust | white, 6.2 to 1 |
| 31 | `#99370e` | `oklch(47.18% 0.1396 39.89)` | Chocoholic | white, 7.2 to 1 |
| 32 | `#91300a` | `oklch(44.88% 0.1378 38.59)` | Brown Red | white, 7.9 to 1 |

## CSS

```css
background: linear-gradient(225deg, #061730 0.0%, #071a34 3.2%, #081e3a 6.5%, #092341 9.7%, #0b2848 12.9%, #0c2d4f 16.1%, #0b3258 19.4%, #0a3760 22.6%, #0b3c68 25.8%, #12416d 29.0%, #1a486e 32.3%, #254e6d 35.5%, #33546b 38.7%, #41576c 41.9%, #50596e 45.2%, #5f596b 48.4%, #6a5a64 51.6%, #725c5d 54.8%, #785e57 58.1%, #835e4d 61.3%, #915c40 64.5%, #9e5832 67.7%, #a95425 71.0%, #b0541b 74.2%, #b65718 77.4%, #bb591b 80.6%, #bd591e 83.9%, #ba551c 87.1%, #b14c18 90.3%, #a54113 93.5%, #99370e 96.8%, #91300a 100.0%);
background: linear-gradient(225deg in oklch, oklch(20.47% 0.0551 258.05) 0.0%, oklch(21.71% 0.0574 257.15) 3.2%, oklch(23.47% 0.0606 255.84) 6.5%, oklch(25.50% 0.0644 254.42) 9.7%, oklch(27.54% 0.0685 253.17) 12.9%, oklch(29.39% 0.0732 252.31) 16.1%, oklch(31.24% 0.0801 251.65) 19.4%, oklch(33.10% 0.0870 251.15) 22.6%, oklch(34.98% 0.0913 250.81) 25.8%, oklch(36.89% 0.0904 250.57) 29.0%, oklch(38.91% 0.0821 247.28) 32.3%, oklch(40.99% 0.0690 242.59) 35.5%, oklch(43.01% 0.0548 241.18) 38.7%, oklch(44.82% 0.0435 247.72) 41.9%, oklch(46.31% 0.0365 267.70) 45.2%, oklch(47.57% 0.0304 301.32) 48.4%, oklch(48.66% 0.0269 339.83) 51.6%, oklch(49.67% 0.0281 14.20) 54.8%, oklch(50.68% 0.0364 35.74) 58.1%, oklch(51.65% 0.0554 45.34) 61.3%, oklch(52.55% 0.0809 47.94) 64.5%, oklch(53.40% 0.1065 47.21) 67.7%, oklch(54.22% 0.1262 46.86) 71.0%, oklch(55.23% 0.1369 48.00) 74.2%, oklch(56.51% 0.1425 48.12) 77.4%, oklch(57.56% 0.1448 47.52) 80.6%, oklch(57.85% 0.1456 46.56) 83.9%, oklch(56.83% 0.1463 45.50) 87.1%, oklch(54.14% 0.1450 43.81) 90.3%, oklch(50.60% 0.1424 41.79) 93.5%, oklch(47.18% 0.1396 39.89) 96.8%, oklch(44.88% 0.1378 38.59) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.055 | 258 |
| 2 | 0.283 | 0.07 | 252.8 |
| 3 | 0.366 | 0.091 | 250.6 |
| 4 | 0.453 | 0.041 | 251.7 |
| 5 | 0.504 | 0.033 | 391.2 |
| 6 | 0.543 | 0.128 | 407 |
| 7 | 0.575 | 0.146 | 406 |
| 8 | 0.449 | 0.138 | 398.6 |

## In these collections

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

## Other forms

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