# Plum and dusty blue color palette

The Plum and dusty blue color palette brings together dark magenta, magenta, and blue. The colors span a moderate lightness range, combining restrained color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark magenta, and its lightest tone is blue.

- Also called: Dark purple and gray linear swatches
- Seed: `kUPDblqJnCLuTvfLljlA`
- Page: https://grabient.com/kUPDblqJnCLuTvfLljlA?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.1 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 | `#2e0f32` | `oklch(23.62% 0.0744 322.73)` | Dark Prom Queen | white, 17 to 1 |
| 2 | `#331234` | `oklch(24.95% 0.0740 326.99)` | Cultist Robe | white, 16.4 to 1 |
| 3 | `#3a1635` | `oklch(26.82% 0.0734 333.30)` | Nightly Voyager | white, 15.5 to 1 |
| 4 | `#421b37` | `oklch(29.16% 0.0723 339.08)` | Blackberry | white, 14.4 to 1 |
| 5 | `#4a233d` | `oklch(31.89% 0.0703 341.76)` | Prestige Mauve | white, 13.1 to 1 |
| 6 | `#522c45` | `oklch(35.21% 0.0665 340.97)` | Potent Purple | white, 11.5 to 1 |
| 7 | `#5b3851` | `oklch(39.10% 0.0613 337.99)` | Ruby Violet | white, 9.8 to 1 |
| 8 | `#63445e` | `oklch(43.12% 0.0565 332.67)` | Grape Fizz | white, 8.3 to 1 |
| 9 | `#6a506b` | `oklch(46.85% 0.0537 324.85)` | Vintner | white, 7 to 1 |
| 10 | `#6f5c7b` | `oklch(50.46% 0.0540 312.28)` | Princely Violet | white, 6 to 1 |
| 11 | `#71698c` | `oklch(54.08% 0.0562 295.79)` | Aromatic | white, 5.1 to 1 |
| 12 | `#71759b` | `oklch(57.24% 0.0588 279.82)` | Kimono Violet | black, 4.6 to 1 |
| 13 | `#707da3` | `oklch(59.45% 0.0606 268.84)` | Inky Violet | black, 5.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2e0f32 0.000% 7.692%, #331234 7.692% 15.385%, #3a1635 15.385% 23.077%, #421b37 23.077% 30.769%, #4a233d 30.769% 38.462%, #522c45 38.462% 46.154%, #5b3851 46.154% 53.846%, #63445e 53.846% 61.538%, #6a506b 61.538% 69.231%, #6f5c7b 69.231% 76.923%, #71698c 76.923% 84.615%, #71759b 84.615% 92.308%, #707da3 92.308% 100.000%);
background: linear-gradient(90deg, oklch(23.62% 0.0744 322.73) 0.000% 7.692%, oklch(24.95% 0.0740 326.99) 7.692% 15.385%, oklch(26.82% 0.0734 333.30) 15.385% 23.077%, oklch(29.16% 0.0723 339.08) 23.077% 30.769%, oklch(31.89% 0.0703 341.76) 30.769% 38.462%, oklch(35.21% 0.0665 340.97) 38.462% 46.154%, oklch(39.10% 0.0613 337.99) 46.154% 53.846%, oklch(43.12% 0.0565 332.67) 53.846% 61.538%, oklch(46.85% 0.0537 324.85) 61.538% 69.231%, oklch(50.46% 0.0540 312.28) 69.231% 76.923%, oklch(54.08% 0.0562 295.79) 76.923% 84.615%, oklch(57.24% 0.0588 279.82) 84.615% 92.308%, oklch(59.45% 0.0606 268.84) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.236 | 0.074 | 322.7 |
| 2 | 0.319 | 0.07 | 341.8 |
| 3 | 0.469 | 0.054 | 324.8 |
| 4 | 0.594 | 0.061 | 268.8 |

## In these collections

- [Weathered garden gradients](https://grabient.com/weathered-garden-gradients)
- [Dusk swatches](https://grabient.com/dusk-swatches)
- [Muted gradients](https://grabient.com/muted-gradients)
- [Dark mode UI gradients](https://grabient.com/dark-mode-ui-gradients)

## Other forms

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