# Slate rust cream diagonal

Seamless gray, navy and brown linear gradient with 32 colors: #d2dbd4, #c8d0c7, #bcc2b5, #afb0a1, #a39c8c, #96887a, #89756b, #7c6561, #70585b, #634e57, #544652, #463f4c, #3a3844, #31333d, #2b2f37, #272d34, #262c35, #272d39, #2c2e41, #382f47, #47304b, #59334a, #693946, #774243, #834f45, #90604e, #9e755e, #ac8b72, #b9a189, #c6b5a0, #d1c6b5, #dad2c3. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Seamless gray, navy and brown linear gradient
- Seed: `kW4ApsvwuvqUGMc5m077ghHA`
- Page: https://grabient.com/kW4ApsvwuvqUGMc5m077ghHA?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark center, neutral, seamless
- Hues: wide
- Contrast of its darkest and lightest colors: 9.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 | `#d2dbd4` | `oklch(88.19% 0.0138 152.58)` | Light Zen | black, 14.7 to 1 |
| 2 | `#c8d0c7` | `oklch(84.97% 0.0155 141.45)` | Murmur | black, 13.3 to 1 |
| 3 | `#bcc2b5` | `oklch(80.53% 0.0179 126.44)` | Seaside Fog | black, 11.5 to 1 |
| 4 | `#afb0a1` | `oklch(75.23% 0.0209 108.56)` | Light Sage | black, 9.5 to 1 |
| 5 | `#a39c8c` | `oklch(69.44% 0.0241 88.82)` | Sacred Vortex | black, 7.7 to 1 |
| 6 | `#96887a` | `oklch(63.53% 0.0271 68.20)` | Art District | black, 6.1 to 1 |
| 7 | `#89756b` | `oklch(57.85% 0.0295 47.72)` | Pine Bark | black, 4.8 to 1 |
| 8 | `#7c6561` | `oklch(52.79% 0.0312 28.37)` | Deep Taupe | white, 5.4 to 1 |
| 9 | `#70585b` | `oklch(48.65% 0.0317 10.95)` | Deepest Mauve | white, 6.4 to 1 |
| 10 | `#634e57` | `oklch(44.88% 0.0303 352.24)` | Prophetic Purple | white, 7.6 to 1 |
| 11 | `#544652` | `oklch(41.24% 0.0275 331.85)` | Napa Harvest | white, 8.8 to 1 |
| 12 | `#463f4c` | `oklch(37.87% 0.0239 311.28)` | Loom of Fate | white, 10.1 to 1 |
| 13 | `#3a3844` | `oklch(34.88% 0.0203 291.99)` | Black Marlin | white, 11.4 to 1 |
| 14 | `#31333d` | `oklch(32.39% 0.0172 275.45)` | Salute | white, 12.5 to 1 |
| 15 | `#2b2f37` | `oklch(30.52% 0.0154 263.13)` | Suit Blue | white, 13.3 to 1 |
| 16 | `#272d34` | `oklch(29.39% 0.0155 256.51)` | Deep Space Echo | white, 13.9 to 1 |
| 17 | `#262c35` | `oklch(29.09% 0.0184 257.15)` | Night Sky | white, 14 to 1 |
| 18 | `#272d39` | `oklch(29.57% 0.0248 265.84)` | Chimney Sweep | white, 13.8 to 1 |
| 19 | `#2c2e41` | `oklch(30.74% 0.0337 280.82)` | Atlantic Charter | white, 13.3 to 1 |
| 20 | `#382f47` | `oklch(32.53% 0.0439 300.06)` | Obsidian Lava Black | white, 12.6 to 1 |
| 21 | `#47304b` | `oklch(34.86% 0.0542 321.55)` | Purple Pennant | white, 11.6 to 1 |
| 22 | `#59334a` | `oklch(37.65% 0.0635 343.28)` | Italian Plum | white, 10.5 to 1 |
| 23 | `#693946` | `oklch(40.84% 0.0705 3.24)` | Red Mahogany | white, 9.2 to 1 |
| 24 | `#774243` | `oklch(44.36% 0.0742 19.39)` | Velvety Merlot | white, 7.9 to 1 |
| 25 | `#834f45` | `oklch(48.46% 0.0735 31.31)` | Beauty Patch | white, 6.6 to 1 |
| 26 | `#90604e` | `oklch(53.72% 0.0690 41.89)` | Brown Thrush | white, 5.2 to 1 |
| 27 | `#9e755e` | `oklch(59.76% 0.0618 51.33)` | Timber Trail | black, 5.1 to 1 |
| 28 | `#ac8b72` | `oklch(66.15% 0.0530 59.67)` | Roasted Coconut | black, 6.7 to 1 |
| 29 | `#b9a189` | `oklch(72.46% 0.0436 66.95)` | Cup of Cocoa | black, 8.5 to 1 |
| 30 | `#c6b5a0` | `oklch(78.26% 0.0346 73.21)` | Rincon Cove | black, 10.5 to 1 |
| 31 | `#d1c6b5` | `oklch(83.12% 0.0270 78.49)` | Lover’s Hideaway | black, 12.4 to 1 |
| 32 | `#dad2c3` | `oklch(86.61% 0.0220 82.83)` | Natural Tan | black, 13.9 to 1 |

## CSS

```css
background: linear-gradient(225deg, #d2dbd4 0.0%, #c8d0c7 3.2%, #bcc2b5 6.5%, #afb0a1 9.7%, #a39c8c 12.9%, #96887a 16.1%, #89756b 19.4%, #7c6561 22.6%, #70585b 25.8%, #634e57 29.0%, #544652 32.3%, #463f4c 35.5%, #3a3844 38.7%, #31333d 41.9%, #2b2f37 45.2%, #272d34 48.4%, #262c35 51.6%, #272d39 54.8%, #2c2e41 58.1%, #382f47 61.3%, #47304b 64.5%, #59334a 67.7%, #693946 71.0%, #774243 74.2%, #834f45 77.4%, #90604e 80.6%, #9e755e 83.9%, #ac8b72 87.1%, #b9a189 90.3%, #c6b5a0 93.5%, #d1c6b5 96.8%, #dad2c3 100.0%);
background: linear-gradient(225deg in oklch, oklch(88.19% 0.0138 152.58) 0.0%, oklch(84.97% 0.0155 141.45) 3.2%, oklch(80.53% 0.0179 126.44) 6.5%, oklch(75.23% 0.0209 108.56) 9.7%, oklch(69.44% 0.0241 88.82) 12.9%, oklch(63.53% 0.0271 68.20) 16.1%, oklch(57.85% 0.0295 47.72) 19.4%, oklch(52.79% 0.0312 28.37) 22.6%, oklch(48.65% 0.0317 10.95) 25.8%, oklch(44.88% 0.0303 352.24) 29.0%, oklch(41.24% 0.0275 331.85) 32.3%, oklch(37.87% 0.0239 311.28) 35.5%, oklch(34.88% 0.0203 291.99) 38.7%, oklch(32.39% 0.0172 275.45) 41.9%, oklch(30.52% 0.0154 263.13) 45.2%, oklch(29.39% 0.0155 256.51) 48.4%, oklch(29.09% 0.0184 257.15) 51.6%, oklch(29.57% 0.0248 265.84) 54.8%, oklch(30.74% 0.0337 280.82) 58.1%, oklch(32.53% 0.0439 300.06) 61.3%, oklch(34.86% 0.0542 321.55) 64.5%, oklch(37.65% 0.0635 343.28) 67.7%, oklch(40.84% 0.0705 3.24) 71.0%, oklch(44.36% 0.0742 19.39) 74.2%, oklch(48.46% 0.0735 31.31) 77.4%, oklch(53.72% 0.0690 41.89) 80.6%, oklch(59.76% 0.0618 51.33) 83.9%, oklch(66.15% 0.0530 59.67) 87.1%, oklch(72.46% 0.0436 66.95) 90.3%, oklch(78.26% 0.0346 73.21) 93.5%, oklch(83.12% 0.0270 78.49) 96.8%, oklch(86.61% 0.0220 82.83) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.882 | 0.014 | 152.6 |
| 2 | 0.496 | 0.032 | 15.2 |
| 3 | 0.291 | 0.017 | -104.2 |
| 4 | 0.453 | 0.074 | 22.6 |
| 5 | 0.866 | 0.022 | 82.8 |

## In these collections

- [Minimal color palette](https://grabient.com/minimal-color-palette)

## Other forms

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