# Quiet slate gray field

Gray linear gradient with 48 colors: #f8f4ff, #edeaf5, #dfdde7, #cecdd7, #bbbcc5, #a7a9b1, #94979e, #81858b, #70747a, #61656a, #54595d, #4a5054, #444a4e, #41474b, #3f464b, #3f484c, #414b4f, #434f54, #47545a, #4b5a60, #506067, #55666e, #5b6b75, #5f707b, #647480, #697884, #6f7d89, #76818e, #7c8693, #848b98, #8b909d, #9295a1, #9899a5, #9f9ea9, #a4a2ac, #a9a5af, #aea8b1, #b2abb3, #b6adb4, #b9b0b4, #bcb1b4, #beb3b4, #c0b5b4, #c1b7b4, #c2b8b4, #c2bab4, #c3bbb5, #c3bcb5. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Gray linear gradient
- Seed: `kW9wvXNAO4MUJv_dBUg5YTOQ`
- Page: https://grabient.com/kW9wvXNAO4MUJv_dBUg5YTOQ?steps=48&angle=135
- Drawn as: linear gradient, 48 steps, 135 degrees
- Kinds: dark center, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 8.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 | `#f8f4ff` | `oklch(97.24% 0.0152 302.34)` | Sugar Crystal | black, 19.3 to 1 |
| 2 | `#edeaf5` | `oklch(94.23% 0.0148 298.88)` | Silver Phoenix | black, 17.6 to 1 |
| 3 | `#dfdde7` | `oklch(90.12% 0.0143 294.24)` | Elation | black, 15.5 to 1 |
| 4 | `#cecdd7` | `oklch(85.16% 0.0136 288.66)` | Dirty Snow | black, 13.3 to 1 |
| 5 | `#bbbcc5` | `oklch(79.58% 0.0128 282.39)` | Silver Fox | black, 11 to 1 |
| 6 | `#a7a9b1` | `oklch(73.62% 0.0121 275.66)` | Mischka | black, 8.9 to 1 |
| 7 | `#94979e` | `oklch(67.49% 0.0113 268.71)` | Grisaille | black, 7.1 to 1 |
| 8 | `#81858b` | `oklch(61.45% 0.0106 261.80)` | Heavy Grey | black, 5.6 to 1 |
| 9 | `#70747a` | `oklch(55.71% 0.0100 255.16)` | Raven Grey | white, 4.7 to 1 |
| 10 | `#61656a` | `oklch(50.52% 0.0095 249.04)` | Shuttle Grey | white, 5.8 to 1 |
| 11 | `#54595d` | `oklch(46.10% 0.0093 243.67)` | Edge of Black | white, 7 to 1 |
| 12 | `#4a5054` | `oklch(42.70% 0.0094 239.30)` | Typewriter Ink | white, 8.1 to 1 |
| 13 | `#444a4e` | `oklch(40.52% 0.0098 236.14)` | Dead Forest | white, 8.9 to 1 |
| 14 | `#41474b` | `oklch(39.38% 0.0106 233.69)` | Steel Grey | white, 9.4 to 1 |
| 15 | `#3f464b` | `oklch(39.07% 0.0119 231.69)` | Winter Way | white, 9.5 to 1 |
| 16 | `#3f484c` | `oklch(39.45% 0.0134 230.15)` | Mount Etna | white, 9.3 to 1 |
| 17 | `#414b4f` | `oklch(40.42% 0.0152 229.09)` | Dead Forest | white, 9 to 1 |
| 18 | `#434f54` | `oklch(41.86% 0.0171 228.49)` | Obsidian | white, 8.4 to 1 |
| 19 | `#47545a` | `oklch(43.64% 0.0191 228.39)` | Country Sky | white, 7.8 to 1 |
| 20 | `#4b5a60` | `oklch(45.65% 0.0210 228.78)` | Fiord | white, 7.1 to 1 |
| 21 | `#506067` | `oklch(47.77% 0.0227 229.66)` | Lava Rock | white, 6.5 to 1 |
| 22 | `#55666e` | `oklch(49.88% 0.0242 231.06)` | Needlepoint Navy | white, 5.9 to 1 |
| 23 | `#5b6b75` | `oklch(51.86% 0.0253 232.97)` | Big Daddy Blue | white, 5.5 to 1 |
| 24 | `#5f707b` | `oklch(53.59% 0.0260 235.41)` | Stormy Weather | white, 5.1 to 1 |
| 25 | `#647480` | `oklch(55.04% 0.0262 238.39)` | Wharf View | white, 4.8 to 1 |
| 26 | `#697884` | `oklch(56.56% 0.0259 241.97)` | Hypnotic | black, 4.6 to 1 |
| 27 | `#6f7d89` | `oklch(58.21% 0.0253 246.14)` | Slate Expectations | black, 4.9 to 1 |
| 28 | `#76818e` | `oklch(59.94% 0.0243 250.87)` | Battle Blue | black, 5.3 to 1 |
| 29 | `#7c8693` | `oklch(61.72% 0.0230 256.11)` | Cold Trade Winds | black, 5.7 to 1 |
| 30 | `#848b98` | `oklch(63.52% 0.0216 261.84)` | River Tour | black, 6.1 to 1 |
| 31 | `#8b909d` | `oklch(65.31% 0.0202 268.02)` | Manatee | black, 6.5 to 1 |
| 32 | `#9295a1` | `oklch(67.06% 0.0187 274.62)` | Classic Cloud | black, 7 to 1 |
| 33 | `#9899a5` | `oklch(68.73% 0.0172 281.60)` | Angry Gargoyle | black, 7.4 to 1 |
| 34 | `#9f9ea9` | `oklch(70.29% 0.0159 288.94)` | Amethyst Haze | black, 7.9 to 1 |
| 35 | `#a4a2ac` | `oklch(71.71% 0.0148 296.60)` | Spun Pearl | black, 8.3 to 1 |
| 36 | `#a9a5af` | `oklch(72.95% 0.0139 304.54)` | Palace Walls | black, 8.7 to 1 |
| 37 | `#aea8b1` | `oklch(74.01% 0.0134 313.11)` | Elderberry Grey | black, 9 to 1 |
| 38 | `#b2abb3` | `oklch(74.95% 0.0130 323.02)` | Endless Slumber | black, 9.3 to 1 |
| 39 | `#b6adb4` | `oklch(75.77% 0.0127 334.01)` | Madame Mauve | black, 9.6 to 1 |
| 40 | `#b9b0b4` | `oklch(76.50% 0.0125 345.74)` | Antique Mauve | black, 9.8 to 1 |
| 41 | `#bcb1b4` | `oklch(77.14% 0.0124 357.90)` | Fairy Bubbles | black, 10.1 to 1 |
| 42 | `#beb3b4` | `oklch(77.69% 0.0123 10.17)` | Pink Swan | black, 10.3 to 1 |
| 43 | `#c0b5b4` | `oklch(78.18% 0.0123 22.22)` | Queen Anne Lilac | black, 10.5 to 1 |
| 44 | `#c1b7b4` | `oklch(78.60% 0.0123 33.75)` | Queen Anne Lilac | black, 10.6 to 1 |
| 45 | `#c2b8b4` | `oklch(78.98% 0.0124 44.42)` | Mountain Boulder | black, 10.8 to 1 |
| 46 | `#c2bab4` | `oklch(79.32% 0.0124 53.91)` | Mauve Stone | black, 10.9 to 1 |
| 47 | `#c3bbb5` | `oklch(79.63% 0.0124 61.91)` | Mauve Stone | black, 11 to 1 |
| 48 | `#c3bcb5` | `oklch(79.92% 0.0124 68.10)` | Linnet | black, 11.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f8f4ff 0.0%, #edeaf5 2.1%, #dfdde7 4.3%, #cecdd7 6.4%, #bbbcc5 8.5%, #a7a9b1 10.6%, #94979e 12.8%, #81858b 14.9%, #70747a 17.0%, #61656a 19.1%, #54595d 21.3%, #4a5054 23.4%, #444a4e 25.5%, #41474b 27.7%, #3f464b 29.8%, #3f484c 31.9%, #414b4f 34.0%, #434f54 36.2%, #47545a 38.3%, #4b5a60 40.4%, #506067 42.6%, #55666e 44.7%, #5b6b75 46.8%, #5f707b 48.9%, #647480 51.1%, #697884 53.2%, #6f7d89 55.3%, #76818e 57.4%, #7c8693 59.6%, #848b98 61.7%, #8b909d 63.8%, #9295a1 66.0%, #9899a5 68.1%, #9f9ea9 70.2%, #a4a2ac 72.3%, #a9a5af 74.5%, #aea8b1 76.6%, #b2abb3 78.7%, #b6adb4 80.9%, #b9b0b4 83.0%, #bcb1b4 85.1%, #beb3b4 87.2%, #c0b5b4 89.4%, #c1b7b4 91.5%, #c2b8b4 93.6%, #c2bab4 95.7%, #c3bbb5 97.9%, #c3bcb5 100.0%);
background: linear-gradient(135deg in oklch, oklch(97.24% 0.0152 302.34) 0.0%, oklch(94.23% 0.0148 298.88) 2.1%, oklch(90.12% 0.0143 294.24) 4.3%, oklch(85.16% 0.0136 288.66) 6.4%, oklch(79.58% 0.0128 282.39) 8.5%, oklch(73.62% 0.0121 275.66) 10.6%, oklch(67.49% 0.0113 268.71) 12.8%, oklch(61.45% 0.0106 261.80) 14.9%, oklch(55.71% 0.0100 255.16) 17.0%, oklch(50.52% 0.0095 249.04) 19.1%, oklch(46.10% 0.0093 243.67) 21.3%, oklch(42.70% 0.0094 239.30) 23.4%, oklch(40.52% 0.0098 236.14) 25.5%, oklch(39.38% 0.0106 233.69) 27.7%, oklch(39.07% 0.0119 231.69) 29.8%, oklch(39.45% 0.0134 230.15) 31.9%, oklch(40.42% 0.0152 229.09) 34.0%, oklch(41.86% 0.0171 228.49) 36.2%, oklch(43.64% 0.0191 228.39) 38.3%, oklch(45.65% 0.0210 228.78) 40.4%, oklch(47.77% 0.0227 229.66) 42.6%, oklch(49.88% 0.0242 231.06) 44.7%, oklch(51.86% 0.0253 232.97) 46.8%, oklch(53.59% 0.0260 235.41) 48.9%, oklch(55.04% 0.0262 238.39) 51.1%, oklch(56.56% 0.0259 241.97) 53.2%, oklch(58.21% 0.0253 246.14) 55.3%, oklch(59.94% 0.0243 250.87) 57.4%, oklch(61.72% 0.0230 256.11) 59.6%, oklch(63.52% 0.0216 261.84) 61.7%, oklch(65.31% 0.0202 268.02) 63.8%, oklch(67.06% 0.0187 274.62) 66.0%, oklch(68.73% 0.0172 281.60) 68.1%, oklch(70.29% 0.0159 288.94) 70.2%, oklch(71.71% 0.0148 296.60) 72.3%, oklch(72.95% 0.0139 304.54) 74.5%, oklch(74.01% 0.0134 313.11) 76.6%, oklch(74.95% 0.0130 323.02) 78.7%, oklch(75.77% 0.0127 334.01) 80.9%, oklch(76.50% 0.0125 345.74) 83.0%, oklch(77.14% 0.0124 357.90) 85.1%, oklch(77.69% 0.0123 10.17) 87.2%, oklch(78.18% 0.0123 22.22) 89.4%, oklch(78.60% 0.0123 33.75) 91.5%, oklch(78.98% 0.0124 44.42) 93.6%, oklch(79.32% 0.0124 53.91) 95.7%, oklch(79.63% 0.0124 61.91) 97.9%, oklch(79.92% 0.0124 68.10) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.972 | 0.015 | 302.3 |
| 2 | 0.409 | 0.01 | 236.8 |
| 3 | 0.543 | 0.026 | 236.8 |
| 4 | 0.732 | 0.014 | 306.6 |
| 5 | 0.799 | 0.012 | 428.1 |

## In these collections

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

## Other forms

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