# Mauve, dusty blue and crimson color palette

The Mauve, dusty blue and crimson color palette brings together teal, dark blue, dark gray, dark magenta, and red. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark gray, and its lightest tone is teal.

- Also called: Complementary teal, black and maroon linear gradient
- Seed: `kajCOSNpBAaWMQWdB0RJgxKrOfwtCK0EA`
- Page: https://grabient.com/kajCOSNpBAaWMQWdB0RJgxKrOfwtCK0EA?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark center, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.5 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 | `#4f7a7f` | `oklch(55.12% 0.0482 205.31)` | Submerged | white, 4.7 to 1 |
| 2 | `#4b767b` | `oklch(53.54% 0.0478 205.74)` | Cool Waters | white, 5 to 1 |
| 3 | `#456f74` | `oklch(51.34% 0.0472 206.25)` | Thunderhawk Blue | white, 5.5 to 1 |
| 4 | `#3f676d` | `oklch(48.74% 0.0465 206.95)` | Smock Blue | white, 6.2 to 1 |
| 5 | `#385f65` | `oklch(45.99% 0.0456 207.93)` | Deep Sea Dive | white, 6.9 to 1 |
| 6 | `#32585e` | `oklch(43.33% 0.0443 209.27)` | Petro Blue | white, 7.8 to 1 |
| 7 | `#2c5057` | `oklch(40.75% 0.0427 210.84)` | Atlantic Deep | white, 8.7 to 1 |
| 8 | `#27484f` | `oklch(37.98% 0.0408 212.43)` | Ponderosa Pine | white, 9.8 to 1 |
| 9 | `#214047` | `oklch(35.18% 0.0386 214.37)` | Bay Isle Pointe | white, 11 to 1 |
| 10 | `#1d3940` | `oklch(32.54% 0.0363 217.01)` | Royal Neptune | white, 12.2 to 1 |
| 11 | `#1a323a` | `oklch(30.20% 0.0339 220.70)` | Ore Bluish Black | white, 13.4 to 1 |
| 12 | `#182d35` | `oklch(28.24% 0.0312 225.41)` | Oceanic Noir | white, 14.3 to 1 |
| 13 | `#162830` | `oklch(26.39% 0.0279 230.45)` | Black Box | white, 15.2 to 1 |
| 14 | `#16232b` | `oklch(24.78% 0.0243 236.37)` | Crow Feather | white, 16 to 1 |
| 15 | `#161f28` | `oklch(23.57% 0.0214 243.80)` | Coarse Wool | white, 16.6 to 1 |
| 16 | `#161d26` | `oklch(22.91% 0.0195 253.40)` | Coarse Wool | white, 16.9 to 1 |
| 17 | `#191d26` | `oklch(22.96% 0.0194 266.16)` | Coarse Wool | white, 16.9 to 1 |
| 18 | `#1d1e28` | `oklch(23.78% 0.0201 283.64)` | Inkwell Inception | white, 16.5 to 1 |
| 19 | `#24202b` | `oklch(25.16% 0.0218 303.73)` | To Hell and Black | white, 16 to 1 |
| 20 | `#2c222d` | `oklch(26.89% 0.0247 323.80)` | Delighted Chimp | white, 15.2 to 1 |
| 21 | `#35252f` | `oklch(28.73% 0.0291 341.23)` | Melanzane | white, 14.4 to 1 |
| 22 | `#3d2830` | `oklch(30.51% 0.0355 353.56)` | Late Night Out | white, 13.6 to 1 |
| 23 | `#472a32` | `oklch(32.39% 0.0446 1.45)` | Wine Tasting | white, 12.7 to 1 |
| 24 | `#512c34` | `oklch(34.44% 0.0559 6.41)` | Japanese Wineberry | white, 11.8 to 1 |
| 25 | `#5d2e37` | `oklch(36.58% 0.0677 9.56)` | Dubonnet | white, 10.9 to 1 |
| 26 | `#683139` | `oklch(38.75% 0.0790 12.04)` | Lovestruck | white, 10.1 to 1 |
| 27 | `#72343b` | `oklch(40.91% 0.0882 14.93)` | Aged Merlot | white, 9.2 to 1 |
| 28 | `#7d383c` | `oklch(43.30% 0.0961 17.73)` | Fire Agate | white, 8.4 to 1 |
| 29 | `#883d3f` | `oklch(45.87% 0.1033 19.91)` | Apple Polish | white, 7.5 to 1 |
| 30 | `#924242` | `oklch(48.34% 0.1096 21.59)` | Awning Red | white, 6.8 to 1 |
| 31 | `#9b4645` | `oklch(50.47% 0.1147 22.88)` | Lumberjack | white, 6.2 to 1 |
| 32 | `#a24946` | `oklch(51.97% 0.1185 23.90)` | Roof Terracotta | white, 5.8 to 1 |

## CSS

```css
background: linear-gradient(225deg, #4f7a7f 0.0%, #4b767b 3.2%, #456f74 6.5%, #3f676d 9.7%, #385f65 12.9%, #32585e 16.1%, #2c5057 19.4%, #27484f 22.6%, #214047 25.8%, #1d3940 29.0%, #1a323a 32.3%, #182d35 35.5%, #162830 38.7%, #16232b 41.9%, #161f28 45.2%, #161d26 48.4%, #191d26 51.6%, #1d1e28 54.8%, #24202b 58.1%, #2c222d 61.3%, #35252f 64.5%, #3d2830 67.7%, #472a32 71.0%, #512c34 74.2%, #5d2e37 77.4%, #683139 80.6%, #72343b 83.9%, #7d383c 87.1%, #883d3f 90.3%, #924242 93.5%, #9b4645 96.8%, #a24946 100.0%);
background: linear-gradient(225deg in oklch, oklch(55.12% 0.0482 205.31) 0.0%, oklch(53.54% 0.0478 205.74) 3.2%, oklch(51.34% 0.0472 206.25) 6.5%, oklch(48.74% 0.0465 206.95) 9.7%, oklch(45.99% 0.0456 207.93) 12.9%, oklch(43.33% 0.0443 209.27) 16.1%, oklch(40.75% 0.0427 210.84) 19.4%, oklch(37.98% 0.0408 212.43) 22.6%, oklch(35.18% 0.0386 214.37) 25.8%, oklch(32.54% 0.0363 217.01) 29.0%, oklch(30.20% 0.0339 220.70) 32.3%, oklch(28.24% 0.0312 225.41) 35.5%, oklch(26.39% 0.0279 230.45) 38.7%, oklch(24.78% 0.0243 236.37) 41.9%, oklch(23.57% 0.0214 243.80) 45.2%, oklch(22.91% 0.0195 253.40) 48.4%, oklch(22.96% 0.0194 266.16) 51.6%, oklch(23.78% 0.0201 283.64) 54.8%, oklch(25.16% 0.0218 303.73) 58.1%, oklch(26.89% 0.0247 323.80) 61.3%, oklch(28.73% 0.0291 341.23) 64.5%, oklch(30.51% 0.0355 353.56) 67.7%, oklch(32.39% 0.0446 1.45) 71.0%, oklch(34.44% 0.0559 6.41) 74.2%, oklch(36.58% 0.0677 9.56) 77.4%, oklch(38.75% 0.0790 12.04) 80.6%, oklch(40.91% 0.0882 14.93) 83.9%, oklch(43.30% 0.0961 17.73) 87.1%, oklch(45.87% 0.1033 19.91) 90.3%, oklch(48.34% 0.1096 21.59) 93.5%, oklch(50.47% 0.1147 22.88) 96.8%, oklch(51.97% 0.1185 23.90) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.551 | 0.048 | 205.3 |
| 2 | 0.429 | 0.044 | 209.5 |
| 3 | 0.295 | 0.033 | 222.2 |
| 4 | 0.228 | 0.019 | 259.2 |
| 5 | 0.299 | 0.033 | 350.1 |
| 6 | 0.406 | 0.087 | 374.4 |
| 7 | 0.52 | 0.119 | 383.9 |

## In these collections

- [Dark gradients](https://grabient.com/dark-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)
- [Moody gradients](https://grabient.com/moody-gradients)
- [Dark mode UI gradients](https://grabient.com/dark-mode-ui-gradients)

## Other forms

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