# Stone and dusty blue gray palette

Gray and navy linear swatches with 6 colors: #e4e0db, #c4bcb9, #968d92, #6c6873, #454855, #2b3340. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Gray and navy linear swatches
- Seed: `kS5wY3yoWx6iJuM`
- Page: https://grabient.com/kS5wY3yoWx6iJuM?style=linearSwatches&steps=6&angle=135
- Drawn as: linear swatches, 6 steps, 135 degrees
- Kinds: light to dark, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 9.7 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 | `#e4e0db` | `oklch(90.94% 0.0083 78.05)` | Durian Smell | black, 16 to 1 |
| 2 | `#c4bcb9` | `oklch(80.09% 0.0103 36.44)` | Hush | black, 11.2 to 1 |
| 3 | `#968d92` | `oklch(65.28% 0.0134 341.54)` | Heather Red Grey | black, 6.5 to 1 |
| 4 | `#6c6873` | `oklch(52.53% 0.0173 302.96)` | Deep Sea Dolphin | white, 5.4 to 1 |
| 5 | `#454855` | `oklch(40.41% 0.0224 276.42)` | Gun Powder | white, 9 to 1 |
| 6 | `#2b3340` | `oklch(31.89% 0.0262 259.46)` | Anchors Aweigh | white, 12.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #e4e0db 0.000% 16.667%, #c4bcb9 16.667% 33.333%, #968d92 33.333% 50.000%, #6c6873 50.000% 66.667%, #454855 66.667% 83.333%, #2b3340 83.333% 100.000%);
background: linear-gradient(135deg, oklch(90.94% 0.0083 78.05) 0.000% 16.667%, oklch(80.09% 0.0103 36.44) 16.667% 33.333%, oklch(65.28% 0.0134 341.54) 33.333% 50.000%, oklch(52.53% 0.0173 302.96) 50.000% 66.667%, oklch(40.41% 0.0224 276.42) 66.667% 83.333%, oklch(31.89% 0.0262 259.46) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.909 | 0.008 | 78 |
| 2 | 0.587 | 0.015 | -40.3 |
| 3 | 0.319 | 0.026 | -100.5 |

## In these collections

- [Gray swatches](https://grabient.com/gray-swatches)

## Other forms

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