# Dusty blue, stone and mauve color palette

The Dusty blue, stone and mauve color palette brings together dark gray, off-white, light green, orange, and purple. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits presentation backgrounds and section dividers. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: Triadic black, light blue, tan and purple linear swatches
- Seed: `kWPgzB8wSuWaQRbXpDIN5g0Y`
- Page: https://grabient.com/kWPgzB8wSuWaQRbXpDIN5g0Y?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: light center, pastel
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12.3 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 | `#1d2028` | `oklch(24.41% 0.0165 272.11)` | Noble Black | white, 16.2 to 1 |
| 2 | `#dee1d8` | `oklch(90.55% 0.0124 123.11)` | Jasmine Rice | black, 15.8 to 1 |
| 3 | `#a4cabc` | `oklch(80.71% 0.0441 171.72)` | Tareyton | black, 11.7 to 1 |
| 4 | `#cb8a5e` | `oklch(68.90% 0.0992 54.42)` | Orange Pekoe | black, 7.3 to 1 |
| 5 | `#61466a` | `oklch(43.70% 0.0661 317.20)` | Royal Rajah | white, 8.1 to 1 |

## CSS

```css
background: linear-gradient(180deg, #1d2028 0.000% 20.000%, #dee1d8 20.000% 40.000%, #a4cabc 40.000% 60.000%, #cb8a5e 60.000% 80.000%, #61466a 80.000% 100.000%);
background: linear-gradient(180deg, oklch(24.41% 0.0165 272.11) 0.000% 20.000%, oklch(90.55% 0.0124 123.11) 20.000% 40.000%, oklch(80.71% 0.0441 171.72) 40.000% 60.000%, oklch(68.90% 0.0992 54.42) 60.000% 80.000%, oklch(43.70% 0.0661 317.20) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.244 | 0.017 | 272.1 |
| 2 | 0.906 | 0.012 | 123.1 |
| 3 | 0.807 | 0.044 | 171.7 |
| 4 | 0.689 | 0.099 | 54.4 |
| 5 | 0.437 | 0.066 | -42.8 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)
- [Presentation swatches](https://grabient.com/presentation-swatches)

## Other forms

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