# Mauve into Azure

The Mauve blue and mauve palette brings together magenta and blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is magenta, and its lightest tone is blue.

- Also called: Analogous purple and blue angular swatches
- Seed: `kWWCrqR5e6VWtvNMv0ANb5BQ`
- Page: https://grabient.com/kWWCrqR5e6VWtvNMv0ANb5BQ?style=angularSwatches&steps=13&angle=135
- Drawn as: angular swatches, 13 steps, 135 degrees
- Kinds: light center, cool
- Hues: analogous
- 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 | `#4a2e48` | `oklch(34.65% 0.0579 329.06)` | Purple Pennant | white, 11.7 to 1 |
| 2 | `#56405f` | `oklch(40.65% 0.0577 315.95)` | Navy Cosmos | white, 9.2 to 1 |
| 3 | `#645a7e` | `oklch(49.07% 0.0582 297.56)` | Purple Valley | white, 6.3 to 1 |
| 4 | `#6f719b` | `oklch(56.30% 0.0648 281.51)` | Hyacinth Mauve | white, 4.6 to 1 |
| 5 | `#7182b6` | `oklch(61.43% 0.0815 270.12)` | Venture Violet | black, 5.5 to 1 |
| 6 | `#6c90d0` | `oklch(65.38% 0.1041 261.08)` | Organza Violet | black, 6.5 to 1 |
| 7 | `#5f98e2` | `oklch(67.32% 0.1254 255.09)` | Little Boy Blue | black, 7 to 1 |
| 8 | `#4d97ea` | `oklch(66.71% 0.1443 253.02)` | United Nations Blue | black, 6.9 to 1 |
| 9 | `#3b8eeb` | `oklch(64.09% 0.1618 253.99)` | Bleu de France | black, 6.2 to 1 |
| 10 | `#2d7fe6` | `oklch(60.24% 0.1736 256.15)` | Skies of Cyberspace | black, 5.3 to 1 |
| 11 | `#286ad4` | `oklch(54.35% 0.1764 259.67)` | Flickr Blue | white, 5.1 to 1 |
| 12 | `#2851bb` | `oklch(47.23% 0.1735 264.37)` | Cerulean Blue | white, 7 to 1 |
| 13 | `#2640a9` | `oklch(42.13% 0.1709 267.77)` | Yuè Guāng Lán Blue | white, 8.8 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #4a2e48 0.000% 7.692%, #56405f 7.692% 15.385%, #645a7e 15.385% 23.077%, #6f719b 23.077% 30.769%, #7182b6 30.769% 38.462%, #6c90d0 38.462% 46.154%, #5f98e2 46.154% 53.846%, #4d97ea 53.846% 61.538%, #3b8eeb 61.538% 69.231%, #2d7fe6 69.231% 76.923%, #286ad4 76.923% 84.615%, #2851bb 84.615% 92.308%, #2640a9 92.308% 100.000%);
background: conic-gradient(from 135deg, oklch(34.65% 0.0579 329.06) 0.000% 7.692%, oklch(40.65% 0.0577 315.95) 7.692% 15.385%, oklch(49.07% 0.0582 297.56) 15.385% 23.077%, oklch(56.30% 0.0648 281.51) 23.077% 30.769%, oklch(61.43% 0.0815 270.12) 30.769% 38.462%, oklch(65.38% 0.1041 261.08) 38.462% 46.154%, oklch(67.32% 0.1254 255.09) 46.154% 53.846%, oklch(66.71% 0.1443 253.02) 53.846% 61.538%, oklch(64.09% 0.1618 253.99) 61.538% 69.231%, oklch(60.24% 0.1736 256.15) 69.231% 76.923%, oklch(54.35% 0.1764 259.67) 76.923% 84.615%, oklch(47.23% 0.1735 264.37) 84.615% 92.308%, oklch(42.13% 0.1709 267.77) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.346 | 0.058 | 329.1 |
| 2 | 0.563 | 0.065 | 281.5 |
| 3 | 0.673 | 0.125 | 255.1 |
| 4 | 0.602 | 0.174 | 256.1 |
| 5 | 0.421 | 0.171 | 267.8 |

## In these collections

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

## Other forms

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