# Slate periwinkle sage fade

Monochrome gray and blue linear gradient with 21 colors: #3e535e, #3d515e, #3c4e5d, #3b4c5f, #3c4c64, #3f4d6c, #435075, #495480, #515a8c, #596198, #6169a4, #6a71ae, #727bb7, #7b84bf, #838dc2, #8f94c0, #969dbd, #96a5bb, #96acb5, #9eb0ab, #a6b0a8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome gray and blue linear gradient
- Seed: `kabRekNA7CzkZwfEocCUR-_1qOvtfBjIA`
- Page: https://grabient.com/kabRekNA7CzkZwfEocCUR-_1qOvtfBjIA?steps=21&angle=135
- Drawn as: linear gradient, 21 steps, 135 degrees
- Kinds: dark to light, muted, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.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 | `#3e535e` | `oklch(42.91% 0.0317 230.62)` | Slate Wall | white, 8 to 1 |
| 2 | `#3d515e` | `oklch(42.28% 0.0329 236.36)` | Midnight Haze | white, 8.2 to 1 |
| 3 | `#3c4e5d` | `oklch(41.40% 0.0347 244.57)` | Cello | white, 8.6 to 1 |
| 4 | `#3b4c5f` | `oklch(40.91% 0.0382 252.69)` | Man Friday | white, 8.8 to 1 |
| 5 | `#3c4c64` | `oklch(41.27% 0.0447 258.97)` | Master | white, 8.7 to 1 |
| 6 | `#3f4d6c` | `oklch(42.22% 0.0543 264.57)` | Blackberry Cobbler | white, 8.4 to 1 |
| 7 | `#435075` | `oklch(43.67% 0.0644 269.32)` | Astronaut | white, 7.9 to 1 |
| 8 | `#495480` | `oklch(45.58% 0.0729 272.87)` | Mozart | white, 7.3 to 1 |
| 9 | `#515a8c` | `oklch(48.10% 0.0810 275.09)` | Wild Elderberry | white, 6.6 to 1 |
| 10 | `#596198` | `oklch(51.00% 0.0880 276.37)` | Wizard’s Potion | white, 5.8 to 1 |
| 11 | `#6169a4` | `oklch(53.94% 0.0923 277.12)` | Twinkle Night | white, 5.1 to 1 |
| 12 | `#6a71ae` | `oklch(56.91% 0.0940 277.54)` | Chalcedony Violet | black, 4.5 to 1 |
| 13 | `#727bb7` | `oklch(59.97% 0.0933 277.40)` | Persian Jewel | black, 5.2 to 1 |
| 14 | `#7b84bf` | `oklch(62.89% 0.0892 276.54)` | Deep Periwinkle | black, 5.8 to 1 |
| 15 | `#838dc2` | `oklch(65.49% 0.0797 276.43)` | Pleated Mauve | black, 6.5 to 1 |
| 16 | `#8f94c0` | `oklch(67.91% 0.0645 278.58)` | Velvet Crest | black, 7.1 to 1 |
| 17 | `#969dbd` | `oklch(70.05% 0.0485 275.49)` | Midnight Blush | black, 7.8 to 1 |
| 18 | `#96a5bb` | `oklch(71.79% 0.0366 258.66)` | Zen Blue | black, 8.4 to 1 |
| 19 | `#96acb5` | `oklch(73.13% 0.0278 221.77)` | Pacific Bliss | black, 8.8 to 1 |
| 20 | `#9eb0ab` | `oklch(74.12% 0.0211 179.22)` | Grey Morning | black, 9.2 to 1 |
| 21 | `#a6b0a8` | `oklch(74.80% 0.0165 149.26)` | Dreamcatcher | black, 9.4 to 1 |

## CSS

```css
background: linear-gradient(135deg, #3e535e 0.0%, #3d515e 5.0%, #3c4e5d 10.0%, #3b4c5f 15.0%, #3c4c64 20.0%, #3f4d6c 25.0%, #435075 30.0%, #495480 35.0%, #515a8c 40.0%, #596198 45.0%, #6169a4 50.0%, #6a71ae 55.0%, #727bb7 60.0%, #7b84bf 65.0%, #838dc2 70.0%, #8f94c0 75.0%, #969dbd 80.0%, #96a5bb 85.0%, #96acb5 90.0%, #9eb0ab 95.0%, #a6b0a8 100.0%);
background: linear-gradient(135deg in oklch, oklch(42.91% 0.0317 230.62) 0.0%, oklch(42.28% 0.0329 236.36) 5.0%, oklch(41.40% 0.0347 244.57) 10.0%, oklch(40.91% 0.0382 252.69) 15.0%, oklch(41.27% 0.0447 258.97) 20.0%, oklch(42.22% 0.0543 264.57) 25.0%, oklch(43.67% 0.0644 269.32) 30.0%, oklch(45.58% 0.0729 272.87) 35.0%, oklch(48.10% 0.0810 275.09) 40.0%, oklch(51.00% 0.0880 276.37) 45.0%, oklch(53.94% 0.0923 277.12) 50.0%, oklch(56.91% 0.0940 277.54) 55.0%, oklch(59.97% 0.0933 277.40) 60.0%, oklch(62.89% 0.0892 276.54) 65.0%, oklch(65.49% 0.0797 276.43) 70.0%, oklch(67.91% 0.0645 278.58) 75.0%, oklch(70.05% 0.0485 275.49) 80.0%, oklch(71.79% 0.0366 258.66) 85.0%, oklch(73.13% 0.0278 221.77) 90.0%, oklch(74.12% 0.0211 179.22) 95.0%, oklch(74.80% 0.0165 149.26) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.429 | 0.032 | 230.6 |
| 2 | 0.409 | 0.04 | 254.9 |
| 3 | 0.449 | 0.07 | 271.8 |
| 4 | 0.539 | 0.092 | 277.1 |
| 5 | 0.638 | 0.087 | 276.1 |
| 6 | 0.713 | 0.04 | 266.6 |
| 7 | 0.748 | 0.017 | 149.3 |

## In these collections

- [Cool gradients](https://grabient.com/cool-gradients)

## Other forms

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