# Blue and mauve color palette

The Blue and mauve color palette brings together dark blue, dark red, gray, and blue. 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 blue.

- Also called: Navy, black, brown and blue linear gradient
- Seed: `kYJEO7iZFBqQTTJAhbuTpKzMowQM`
- Page: https://grabient.com/kYJEO7iZFBqQTTJAhbuTpKzMowQM?steps=34
- Drawn as: linear gradient, 34 steps, 90 degrees
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 5.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 | `#00012f` | `oklch(14.21% 0.0921 264.20)` | Illicit Darkness | white, 20 to 1 |
| 2 | `#00012a` | `oklch(13.26% 0.0874 264.21)` | Illicit Darkness | white, 20.2 to 1 |
| 3 | `#000023` | `oklch(11.76% 0.0803 264.12)` | Hadopelagic Water | white, 20.4 to 1 |
| 4 | `#00001c` | `oklch(10.22% 0.0706 264.38)` | Hadopelagic Water | white, 20.6 to 1 |
| 5 | `#000014` | `oklch(8.73% 0.0596 265.54)` | Benthic Black | white, 20.7 to 1 |
| 6 | `#00000f` | `oklch(7.72% 0.0514 268.25)` | Benthic Black | white, 20.8 to 1 |
| 7 | `#01000c` | `oklch(7.39% 0.0471 273.19)` | Benthic Black | white, 20.8 to 1 |
| 8 | `#02000d` | `oklch(8.01% 0.0459 282.72)` | Benthic Black | white, 20.8 to 1 |
| 9 | `#050110` | `oklch(10.06% 0.0454 297.60)` | Broken Tube | white, 20.6 to 1 |
| 10 | `#0e0213` | `oklch(12.97% 0.0469 316.56)` | Glossy Black | white, 20.2 to 1 |
| 11 | `#1b0516` | `oklch(16.46% 0.0494 337.13)` | Crow | white, 19.4 to 1 |
| 12 | `#280b17` | `oklch(20.25% 0.0518 356.86)` | Inside | white, 18.2 to 1 |
| 13 | `#341318` | `oklch(24.08% 0.0533 13.30)` | Tamarind | white, 16.7 to 1 |
| 14 | `#3e1d1b` | `oklch(27.68% 0.0528 23.97)` | Warm Balaclavas Are Forever | white, 15 to 1 |
| 15 | `#462622` | `oklch(31.07% 0.0494 27.90)` | Polished Mahogany | white, 13.3 to 1 |
| 16 | `#4e312d` | `oklch(34.66% 0.0433 27.39)` | Espresso | white, 11.6 to 1 |
| 17 | `#553c3a` | `oklch(38.35% 0.0358 23.28)` | Monkey Island | white, 10 to 1 |
| 18 | `#5b4748` | `oklch(41.99% 0.0280 16.33)` | Wild Boysenberry | white, 8.5 to 1 |
| 19 | `#625254` | `oklch(45.45% 0.0212 7.29)` | Pinot Noir | white, 7.3 to 1 |
| 20 | `#685c5f` | `oklch(48.59% 0.0165 356.94)` | Mauve Mystery | white, 6.4 to 1 |
| 21 | `#6e6469` | `oklch(51.29% 0.0152 345.90)` | Curtain Call | white, 5.7 to 1 |
| 22 | `#746a72` | `oklch(53.68% 0.0166 331.37)` | Sultry Smoke | white, 5.1 to 1 |
| 23 | `#78717d` | `oklch(55.85% 0.0200 313.26)` | Pearl Blackberry | white, 4.7 to 1 |
| 24 | `#7a7787` | `oklch(57.75% 0.0251 293.53)` | Brewing Storm | black, 4.8 to 1 |
| 25 | `#787d92` | `oklch(59.36% 0.0315 274.12)` | Your Shadow | black, 5.1 to 1 |
| 26 | `#73839a` | `oklch(60.63% 0.0391 256.96)` | Stonewash | black, 5.4 to 1 |
| 27 | `#6d88a0` | `oklch(61.55% 0.0475 244.00)` | Sporty Blue | black, 5.7 to 1 |
| 28 | `#658ca5` | `oklch(62.02% 0.0570 236.80)` | Sea Crystal | black, 5.8 to 1 |
| 29 | `#5b8daa` | `oklch(61.89% 0.0693 234.37)` | Gunjō Blue | black, 5.8 to 1 |
| 30 | `#4e8caf` | `oklch(61.30% 0.0835 235.35)` | Atlantic Gull | black, 5.7 to 1 |
| 31 | `#4289b6` | `oklch(60.46% 0.0983 238.47)` | Walker Lake | black, 5.5 to 1 |
| 32 | `#3886bc` | `oklch(59.55% 0.1122 242.44)` | Pat-A-Pep | black, 5.2 to 1 |
| 33 | `#3182c1` | `oklch(58.75% 0.1240 245.98)` | King Triton | black, 5.1 to 1 |
| 34 | `#2c80c5` | `oklch(58.27% 0.1323 247.82)` | Eye Blue | black, 4.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00012f 0.0%, #00012a 3.0%, #000023 6.1%, #00001c 9.1%, #000014 12.1%, #00000f 15.2%, #01000c 18.2%, #02000d 21.2%, #050110 24.2%, #0e0213 27.3%, #1b0516 30.3%, #280b17 33.3%, #341318 36.4%, #3e1d1b 39.4%, #462622 42.4%, #4e312d 45.5%, #553c3a 48.5%, #5b4748 51.5%, #625254 54.5%, #685c5f 57.6%, #6e6469 60.6%, #746a72 63.6%, #78717d 66.7%, #7a7787 69.7%, #787d92 72.7%, #73839a 75.8%, #6d88a0 78.8%, #658ca5 81.8%, #5b8daa 84.8%, #4e8caf 87.9%, #4289b6 90.9%, #3886bc 93.9%, #3182c1 97.0%, #2c80c5 100.0%);
background: linear-gradient(90deg in oklch, oklch(14.21% 0.0921 264.20) 0.0%, oklch(13.26% 0.0874 264.21) 3.0%, oklch(11.76% 0.0803 264.12) 6.1%, oklch(10.22% 0.0706 264.38) 9.1%, oklch(8.73% 0.0596 265.54) 12.1%, oklch(7.72% 0.0514 268.25) 15.2%, oklch(7.39% 0.0471 273.19) 18.2%, oklch(8.01% 0.0459 282.72) 21.2%, oklch(10.06% 0.0454 297.60) 24.2%, oklch(12.97% 0.0469 316.56) 27.3%, oklch(16.46% 0.0494 337.13) 30.3%, oklch(20.25% 0.0518 356.86) 33.3%, oklch(24.08% 0.0533 13.30) 36.4%, oklch(27.68% 0.0528 23.97) 39.4%, oklch(31.07% 0.0494 27.90) 42.4%, oklch(34.66% 0.0433 27.39) 45.5%, oklch(38.35% 0.0358 23.28) 48.5%, oklch(41.99% 0.0280 16.33) 51.5%, oklch(45.45% 0.0212 7.29) 54.5%, oklch(48.59% 0.0165 356.94) 57.6%, oklch(51.29% 0.0152 345.90) 60.6%, oklch(53.68% 0.0166 331.37) 63.6%, oklch(55.85% 0.0200 313.26) 66.7%, oklch(57.75% 0.0251 293.53) 69.7%, oklch(59.36% 0.0315 274.12) 72.7%, oklch(60.63% 0.0391 256.96) 75.8%, oklch(61.55% 0.0475 244.00) 78.8%, oklch(62.02% 0.0570 236.80) 81.8%, oklch(61.89% 0.0693 234.37) 84.8%, oklch(61.30% 0.0835 235.35) 87.9%, oklch(60.46% 0.0983 238.47) 90.9%, oklch(59.55% 0.1122 242.44) 93.9%, oklch(58.75% 0.1240 245.98) 97.0%, oklch(58.27% 0.1323 247.82) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.142 | 0.092 | 263.7 |
| 2 | 0.075 | 0.047 | 278.5 |
| 3 | 0.283 | 0.052 | 385.2 |
| 4 | 0.508 | 0.015 | 348.2 |
| 5 | 0.618 | 0.051 | 240.4 |
| 6 | 0.583 | 0.132 | 247.8 |

## In these collections

- [Dark gradients](https://grabient.com/dark-gradients)
- [Dark multicolor gradients](https://grabient.com/dark-multicolor-gradients)
- [Text gradients](https://grabient.com/text-gradients)
- [Minimal color palette](https://grabient.com/minimal-color-palette)

## Other forms

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