# Blue and Mauve: Stone and gray

The "Blue and Mauve: Stone and gray" palette brings together off-white, light red, gray, and blue. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Gray to navy radial gradient
- Seed: `kW5QsP4Yu-sYKuetkzkKRq94`
- Page: https://grabient.com/kW5QsP4Yu-sYKuetkzkKRq94?style=radialGradient&steps=12&angle=45
- Drawn as: radial gradient, 12 steps, 45 degrees
- Kinds: light to dark, muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.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 | `#e9dbda` | `oklch(90.16% 0.0152 21.80)` | Homoeopathic Rose | black, 15.5 to 1 |
| 2 | `#e0cecd` | `oklch(86.62% 0.0208 20.42)` | Light Hint of Lavender | black, 13.8 to 1 |
| 3 | `#d4bbbb` | `oklch(81.38% 0.0281 17.29)` | Bombay Pink | black, 11.6 to 1 |
| 4 | `#c1a6aa` | `oklch(75.10% 0.0321 8.15)` | Lychee Berry | black, 9.3 to 1 |
| 5 | `#a68f98` | `oklch(67.36% 0.0303 351.31)` | Nirvana | black, 7 to 1 |
| 6 | `#887885` | `oklch(59.02% 0.0281 330.72)` | High Note | black, 5 to 1 |
| 7 | `#6c6275` | `oklch(51.25% 0.0316 309.83)` | Iris Petal | white, 5.7 to 1 |
| 8 | `#4f4e66` | `oklch(43.40% 0.0404 286.43)` | Legendary Purple | white, 8 to 1 |
| 9 | `#333f5b` | `oklch(36.98% 0.0502 266.15)` | Gulf Blue | white, 10.4 to 1 |
| 10 | `#213855` | `oklch(33.63% 0.0588 254.34)` | Gibraltar Sea | white, 11.9 to 1 |
| 11 | `#153755` | `oklch(32.65% 0.0672 248.65)` | Gibraltar Sea | white, 12.3 to 1 |
| 12 | `#0a3656` | `oklch(32.28% 0.0730 245.48)` | Incremental Blue | white, 12.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #e9dbda 0.0%, #e0cecd 9.1%, #d4bbbb 18.2%, #c1a6aa 27.3%, #a68f98 36.4%, #887885 45.5%, #6c6275 54.5%, #4f4e66 63.6%, #333f5b 72.7%, #213855 81.8%, #153755 90.9%, #0a3656 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(90.16% 0.0152 21.80) 0.0%, oklch(86.62% 0.0208 20.42) 9.1%, oklch(81.38% 0.0281 17.29) 18.2%, oklch(75.10% 0.0321 8.15) 27.3%, oklch(67.36% 0.0303 351.31) 36.4%, oklch(59.02% 0.0281 330.72) 45.5%, oklch(51.25% 0.0316 309.83) 54.5%, oklch(43.40% 0.0404 286.43) 63.6%, oklch(36.98% 0.0502 266.15) 72.7%, oklch(33.63% 0.0588 254.34) 81.8%, oklch(32.65% 0.0672 248.65) 90.9%, oklch(32.28% 0.0730 245.48) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.015 | 21.8 |
| 2 | 0.768 | 0.032 | 11.2 |
| 3 | 0.551 | 0.029 | -39.5 |
| 4 | 0.358 | 0.052 | -97.6 |
| 5 | 0.323 | 0.073 | -114.5 |

## In these collections

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

## Other forms

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