# Midnight Mauve

The Blue blue and mauve palette brings together dark blue, blue, and magenta. The colors span a narrow lightness range, combining restrained color with gentle contrast. Its dark and grounded character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is magenta.

- Also called: Muted analogous navy to purple linear gradient
- Seed: `kWNyW2pRO_iuOQwxkMVORTA4`
- Page: https://grabient.com/kWNyW2pRO_iuOQwxkMVORTA4?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: muted, dark
- Hues: wide
- Contrast of its darkest and lightest colors: 2.2 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 | `#091a31` | `oklch(21.65% 0.0510 256.64)` | Trapped Darkness | white, 17.4 to 1 |
| 2 | `#0a1b33` | `oklch(22.27% 0.0513 256.17)` | Trapped Darkness | white, 17.2 to 1 |
| 3 | `#0b1d35` | `oklch(23.11% 0.0519 255.32)` | Trapped Darkness | white, 16.8 to 1 |
| 4 | `#0c2038` | `oklch(24.11% 0.0527 254.29)` | Trapped Darkness | white, 16.4 to 1 |
| 5 | `#0e233b` | `oklch(25.21% 0.0534 253.29)` | Celestial Canvas | white, 15.9 to 1 |
| 6 | `#10263e` | `oklch(26.35% 0.0540 252.54)` | Cool Balaclavas Are Forever | white, 15.3 to 1 |
| 7 | `#122941` | `oklch(27.46% 0.0543 252.25)` | Eternal Darkness | white, 14.8 to 1 |
| 8 | `#152b44` | `oklch(28.47% 0.0542 252.62)` | Eternal Darkness | white, 14.3 to 1 |
| 9 | `#182d46` | `oklch(29.33% 0.0535 253.87)` | Crow Black Blue | white, 13.9 to 1 |
| 10 | `#1c2f48` | `oklch(30.10% 0.0521 255.85)` | Manganese Black | white, 13.5 to 1 |
| 11 | `#203049` | `oklch(30.80% 0.0500 258.41)` | Manganese Black | white, 13.2 to 1 |
| 12 | `#24314a` | `oklch(31.47% 0.0475 261.49)` | Blue Lobelia | white, 12.9 to 1 |
| 13 | `#28334a` | `oklch(32.10% 0.0449 265.01)` | Bunting | white, 12.6 to 1 |
| 14 | `#2c344b` | `oklch(32.71% 0.0425 268.92)` | Bunting | white, 12.4 to 1 |
| 15 | `#2f354b` | `oklch(33.32% 0.0404 273.13)` | Bunting | white, 12.1 to 1 |
| 16 | `#33364c` | `oklch(33.94% 0.0390 277.59)` | German Liquorice | white, 11.8 to 1 |
| 17 | `#36374d` | `oklch(34.57% 0.0384 282.36)` | Plush | white, 11.5 to 1 |
| 18 | `#3a384e` | `oklch(35.17% 0.0385 288.05)` | Martinique | white, 11.3 to 1 |
| 19 | `#3e394f` | `oklch(35.76% 0.0390 294.44)` | Call It a Night | white, 11 to 1 |
| 20 | `#423950` | `oklch(36.35% 0.0400 301.19)` | Gothic Grape | white, 10.8 to 1 |
| 21 | `#463a51` | `oklch(36.93% 0.0412 307.92)` | Gothic Grape | white, 10.6 to 1 |
| 22 | `#493a51` | `oklch(37.53% 0.0425 314.27)` | Gothic Grape | white, 10.3 to 1 |
| 23 | `#4d3b51` | `oklch(38.15% 0.0439 319.89)` | Amethyst Dark Violet | white, 10.1 to 1 |
| 24 | `#513c52` | `oklch(38.81% 0.0452 324.41)` | Amethyst Dark Violet | white, 9.8 to 1 |
| 25 | `#543e53` | `oklch(39.53% 0.0464 327.64)` | Currant Violet | white, 9.6 to 1 |
| 26 | `#583f55` | `oklch(40.35% 0.0479 329.91)` | Bella | white, 9.3 to 1 |
| 27 | `#5b4157` | `oklch(41.22% 0.0495 331.40)` | Dreamy Heaven | white, 8.9 to 1 |
| 28 | `#5e435a` | `oklch(42.11% 0.0512 332.31)` | Hortensia | white, 8.6 to 1 |
| 29 | `#61455c` | `oklch(42.97% 0.0528 332.82)` | Ripe Mulberry | white, 8.3 to 1 |
| 30 | `#64475f` | `oklch(43.75% 0.0543 333.12)` | Plum Rich | white, 8 to 1 |
| 31 | `#674861` | `oklch(44.40% 0.0556 333.37)` | Bunchberry | white, 7.8 to 1 |
| 32 | `#684962` | `oklch(44.88% 0.0565 333.78)` | Bunchberry | white, 7.7 to 1 |

## CSS

```css
background: linear-gradient(225deg, #091a31 0.0%, #0a1b33 3.2%, #0b1d35 6.5%, #0c2038 9.7%, #0e233b 12.9%, #10263e 16.1%, #122941 19.4%, #152b44 22.6%, #182d46 25.8%, #1c2f48 29.0%, #203049 32.3%, #24314a 35.5%, #28334a 38.7%, #2c344b 41.9%, #2f354b 45.2%, #33364c 48.4%, #36374d 51.6%, #3a384e 54.8%, #3e394f 58.1%, #423950 61.3%, #463a51 64.5%, #493a51 67.7%, #4d3b51 71.0%, #513c52 74.2%, #543e53 77.4%, #583f55 80.6%, #5b4157 83.9%, #5e435a 87.1%, #61455c 90.3%, #64475f 93.5%, #674861 96.8%, #684962 100.0%);
background: linear-gradient(225deg in oklch, oklch(21.65% 0.0510 256.64) 0.0%, oklch(22.27% 0.0513 256.17) 3.2%, oklch(23.11% 0.0519 255.32) 6.5%, oklch(24.11% 0.0527 254.29) 9.7%, oklch(25.21% 0.0534 253.29) 12.9%, oklch(26.35% 0.0540 252.54) 16.1%, oklch(27.46% 0.0543 252.25) 19.4%, oklch(28.47% 0.0542 252.62) 22.6%, oklch(29.33% 0.0535 253.87) 25.8%, oklch(30.10% 0.0521 255.85) 29.0%, oklch(30.80% 0.0500 258.41) 32.3%, oklch(31.47% 0.0475 261.49) 35.5%, oklch(32.10% 0.0449 265.01) 38.7%, oklch(32.71% 0.0425 268.92) 41.9%, oklch(33.32% 0.0404 273.13) 45.2%, oklch(33.94% 0.0390 277.59) 48.4%, oklch(34.57% 0.0384 282.36) 51.6%, oklch(35.17% 0.0385 288.05) 54.8%, oklch(35.76% 0.0390 294.44) 58.1%, oklch(36.35% 0.0400 301.19) 61.3%, oklch(36.93% 0.0412 307.92) 64.5%, oklch(37.53% 0.0425 314.27) 67.7%, oklch(38.15% 0.0439 319.89) 71.0%, oklch(38.81% 0.0452 324.41) 74.2%, oklch(39.53% 0.0464 327.64) 77.4%, oklch(40.35% 0.0479 329.91) 80.6%, oklch(41.22% 0.0495 331.40) 83.9%, oklch(42.11% 0.0512 332.31) 87.1%, oklch(42.97% 0.0528 332.82) 90.3%, oklch(43.75% 0.0543 333.12) 93.5%, oklch(44.40% 0.0556 333.37) 96.8%, oklch(44.88% 0.0565 333.78) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.051 | 256.6 |
| 2 | 0.291 | 0.054 | 253.5 |
| 3 | 0.343 | 0.039 | 279.9 |
| 4 | 0.39 | 0.045 | 325.3 |
| 5 | 0.449 | 0.056 | 333.8 |

## In these collections

- [Blue and mauve gradients](https://grabient.com/blue-and-mauve-gradients)

## Other forms

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