# Stone, Slate and Linen

The Stone, tan and mauve color palette brings together light gray, gray, light orange, off-white, and blue. The colors span a broad lightness range, combining restrained color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is gray, and its lightest tone is off-white.

- Also called: Gray and white angular swatches
- Seed: `kW4weeMQfCtwP1P5glF0YrCw`
- Page: https://grabient.com/kW4weeMQfCtwP1P5glF0YrCw?style=angularSwatches&steps=5&angle=180
- Drawn as: angular swatches, 5 steps, 180 degrees
- Kinds: neutral
- Hues: wide
- Contrast of its darkest and lightest colors: 8.6 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 | `#d5dde0` | `oklch(89.37% 0.0096 222.19)` | Mystic Pool | black, 15.3 to 1 |
| 2 | `#3b454e` | `oklch(38.58% 0.0207 245.44)` | Arsenic | white, 9.7 to 1 |
| 3 | `#baa18b` | `oklch(72.44% 0.0427 62.97)` | Mocha Foam | black, 8.5 to 1 |
| 4 | `#edf2f3` | `oklch(95.67% 0.0055 210.92)` | Maui Mist | black, 18.5 to 1 |
| 5 | `#7c909c` | `oklch(64.17% 0.0289 235.22)` | London Square | black, 6.3 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #d5dde0 0.000% 20.000%, #3b454e 20.000% 40.000%, #baa18b 40.000% 60.000%, #edf2f3 60.000% 80.000%, #7c909c 80.000% 100.000%);
background: conic-gradient(from 180deg, oklch(89.37% 0.0096 222.19) 0.000% 20.000%, oklch(38.58% 0.0207 245.44) 20.000% 40.000%, oklch(72.44% 0.0427 62.97) 40.000% 60.000%, oklch(95.67% 0.0055 210.92) 60.000% 80.000%, oklch(64.17% 0.0289 235.22) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.894 | 0.01 | 222.2 |
| 2 | 0.386 | 0.021 | 245.4 |
| 3 | 0.724 | 0.043 | 423 |
| 4 | 0.957 | 0.006 | 570.9 |
| 5 | 0.642 | 0.029 | 595.2 |

## In these collections

- [Silver color palette](https://grabient.com/silver-color-palette)
- [Calm swatches](https://grabient.com/calm-swatches)
- [Dusty swatches](https://grabient.com/dusty-swatches)
- [Elegant swatches](https://grabient.com/elegant-swatches)

## Other forms

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