# Charcoal slate diagonal

Gray and black linear gradient with 40 colors: #464655, #454554, #434352, #40414f, #3d3e4c, #393b49, #353846, #313542, #2e313e, #2a2e3b, #262b37, #232834, #1f2531, #1d232e, #1b212c, #19202a, #181f29, #171f28, #182029, #19212a, #1b232c, #1f272f, #232b34, #293139, #2f373f, #363e46, #3e464e, #474f57, #505860, #5a6169, #646b72, #6e757c, #787e85, #82888f, #8c9198, #949aa0, #9da2a8, #a4a9af, #aaafb5, #afb4ba. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Gray and black linear gradient
- Seed: `kSZhLLH4e7-GDwA`
- Page: https://grabient.com/kSZhLLH4e7-GDwA?steps=40&angle=225
- Drawn as: linear gradient, 40 steps, 225 degrees
- Kinds: dark center, neutral, dark, cool
- Hues: achromatic
- Contrast of its darkest and lightest colors: 7.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 | `#464655` | `oklch(40.16% 0.0248 285.47)` | Black Sapphire | white, 9.2 to 1 |
| 2 | `#454554` | `oklch(39.64% 0.0247 284.47)` | Black Sapphire | white, 9.4 to 1 |
| 3 | `#434352` | `oklch(38.90% 0.0246 283.23)` | Flintstone Blue | white, 9.6 to 1 |
| 4 | `#40414f` | `oklch(37.97% 0.0245 281.78)` | Madonna | white, 10 to 1 |
| 5 | `#3d3e4c` | `oklch(36.88% 0.0243 280.14)` | India Ink | white, 10.5 to 1 |
| 6 | `#393b49` | `oklch(35.66% 0.0242 278.34)` | Mountain Fig | white, 11 to 1 |
| 7 | `#353846` | `oklch(34.36% 0.0241 276.41)` | Biro Blue | white, 11.6 to 1 |
| 8 | `#313542` | `oklch(33.00% 0.0239 274.38)` | Total Eclipse | white, 12.2 to 1 |
| 9 | `#2e313e` | `oklch(31.61% 0.0237 272.28)` | Salute | white, 12.8 to 1 |
| 10 | `#2a2e3b` | `oklch(30.24% 0.0236 270.12)` | Black Rock | white, 13.5 to 1 |
| 11 | `#262b37` | `oklch(28.91% 0.0234 267.95)` | Mangu Black | white, 14.1 to 1 |
| 12 | `#232834` | `oklch(27.65% 0.0232 265.79)` | Sky Captain | white, 14.7 to 1 |
| 13 | `#1f2531` | `oklch(26.50% 0.0229 263.66)` | Moonless Mystery | white, 15.3 to 1 |
| 14 | `#1d232e` | `oklch(25.50% 0.0227 261.59)` | Dark | white, 15.7 to 1 |
| 15 | `#1b212c` | `oklch(24.68% 0.0225 259.62)` | Dark | white, 16.1 to 1 |
| 16 | `#19202a` | `oklch(24.06% 0.0222 257.77)` | Hēi Sè Black | white, 16.4 to 1 |
| 17 | `#181f29` | `oklch(23.69% 0.0219 256.06)` | Hēi Sè Black | white, 16.5 to 1 |
| 18 | `#171f28` | `oklch(23.60% 0.0216 254.53)` | Coarse Wool | white, 16.6 to 1 |
| 19 | `#182029` | `oklch(23.82% 0.0212 253.20)` | Hēi Sè Black | white, 16.5 to 1 |
| 20 | `#19212a` | `oklch(24.38% 0.0209 252.11)` | Crow Feather | white, 16.2 to 1 |
| 21 | `#1b232c` | `oklch(25.33% 0.0205 251.26)` | Dark | white, 15.8 to 1 |
| 22 | `#1f272f` | `oklch(26.74% 0.0200 250.59)` | Black Pearl | white, 15.1 to 1 |
| 23 | `#232b34` | `oklch(28.56% 0.0195 250.10)` | Sky Captain | white, 14.3 to 1 |
| 24 | `#293139` | `oklch(30.75% 0.0190 249.75)` | Suit Blue | white, 13.2 to 1 |
| 25 | `#2f373f` | `oklch(33.26% 0.0184 249.54)` | School Ink | white, 12 to 1 |
| 26 | `#363e46` | `oklch(36.05% 0.0177 249.45)` | Ferry | white, 10.8 to 1 |
| 27 | `#3e464e` | `oklch(39.06% 0.0171 249.46)` | Alpine Duck Grey | white, 9.5 to 1 |
| 28 | `#474f57` | `oklch(42.25% 0.0164 249.57)` | Evening Storm | white, 8.3 to 1 |
| 29 | `#505860` | `oklch(45.57% 0.0158 249.75)` | Dark and Stormy Night | white, 7.2 to 1 |
| 30 | `#5a6169` | `oklch(48.97% 0.0151 250.00)` | Calligraphy | white, 6.2 to 1 |
| 31 | `#646b72` | `oklch(52.40% 0.0144 250.29)` | Night Out | white, 5.4 to 1 |
| 32 | `#6e757c` | `oklch(55.82% 0.0137 250.62)` | Spitsbergen Blue | white, 4.6 to 1 |
| 33 | `#787e85` | `oklch(59.17% 0.0131 250.97)` | Downing Slate | black, 5.1 to 1 |
| 34 | `#82888f` | `oklch(62.41% 0.0125 251.32)` | Whale Tail | black, 5.8 to 1 |
| 35 | `#8c9198` | `oklch(65.48% 0.0119 251.66)` | Tulle Grey | black, 6.6 to 1 |
| 36 | `#949aa0` | `oklch(68.35% 0.0113 251.98)` | Dustblu | black, 7.3 to 1 |
| 37 | `#9da2a8` | `oklch(70.96% 0.0108 252.26)` | Rough Stone | black, 8.1 to 1 |
| 38 | `#a4a9af` | `oklch(73.27% 0.0104 252.48)` | Mischka | black, 8.8 to 1 |
| 39 | `#aaafb5` | `oklch(75.22% 0.0100 252.64)` | Cistern | black, 9.5 to 1 |
| 40 | `#afb4ba` | `oklch(76.77% 0.0096 252.71)` | Cloud Cover | black, 10 to 1 |

## CSS

```css
background: linear-gradient(225deg, #464655 0.0%, #454554 2.6%, #434352 5.1%, #40414f 7.7%, #3d3e4c 10.3%, #393b49 12.8%, #353846 15.4%, #313542 17.9%, #2e313e 20.5%, #2a2e3b 23.1%, #262b37 25.6%, #232834 28.2%, #1f2531 30.8%, #1d232e 33.3%, #1b212c 35.9%, #19202a 38.5%, #181f29 41.0%, #171f28 43.6%, #182029 46.2%, #19212a 48.7%, #1b232c 51.3%, #1f272f 53.8%, #232b34 56.4%, #293139 59.0%, #2f373f 61.5%, #363e46 64.1%, #3e464e 66.7%, #474f57 69.2%, #505860 71.8%, #5a6169 74.4%, #646b72 76.9%, #6e757c 79.5%, #787e85 82.1%, #82888f 84.6%, #8c9198 87.2%, #949aa0 89.7%, #9da2a8 92.3%, #a4a9af 94.9%, #aaafb5 97.4%, #afb4ba 100.0%);
background: linear-gradient(225deg in oklch, oklch(40.16% 0.0248 285.47) 0.0%, oklch(39.64% 0.0247 284.47) 2.6%, oklch(38.90% 0.0246 283.23) 5.1%, oklch(37.97% 0.0245 281.78) 7.7%, oklch(36.88% 0.0243 280.14) 10.3%, oklch(35.66% 0.0242 278.34) 12.8%, oklch(34.36% 0.0241 276.41) 15.4%, oklch(33.00% 0.0239 274.38) 17.9%, oklch(31.61% 0.0237 272.28) 20.5%, oklch(30.24% 0.0236 270.12) 23.1%, oklch(28.91% 0.0234 267.95) 25.6%, oklch(27.65% 0.0232 265.79) 28.2%, oklch(26.50% 0.0229 263.66) 30.8%, oklch(25.50% 0.0227 261.59) 33.3%, oklch(24.68% 0.0225 259.62) 35.9%, oklch(24.06% 0.0222 257.77) 38.5%, oklch(23.69% 0.0219 256.06) 41.0%, oklch(23.60% 0.0216 254.53) 43.6%, oklch(23.82% 0.0212 253.20) 46.2%, oklch(24.38% 0.0209 252.11) 48.7%, oklch(25.33% 0.0205 251.26) 51.3%, oklch(26.74% 0.0200 250.59) 53.8%, oklch(28.56% 0.0195 250.10) 56.4%, oklch(30.75% 0.0190 249.75) 59.0%, oklch(33.26% 0.0184 249.54) 61.5%, oklch(36.05% 0.0177 249.45) 64.1%, oklch(39.06% 0.0171 249.46) 66.7%, oklch(42.25% 0.0164 249.57) 69.2%, oklch(45.57% 0.0158 249.75) 71.8%, oklch(48.97% 0.0151 250.00) 74.4%, oklch(52.40% 0.0144 250.29) 76.9%, oklch(55.82% 0.0137 250.62) 79.5%, oklch(59.17% 0.0131 250.97) 82.1%, oklch(62.41% 0.0125 251.32) 84.6%, oklch(65.48% 0.0119 251.66) 87.2%, oklch(68.35% 0.0113 251.98) 89.7%, oklch(70.96% 0.0108 252.26) 92.3%, oklch(73.27% 0.0104 252.48) 94.9%, oklch(75.22% 0.0100 252.64) 97.4%, oklch(76.77% 0.0096 252.71) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.025 | 285.5 |
| 2 | 0.248 | 0.021 | 251.7 |
| 3 | 0.768 | 0.01 | 252.7 |

## In these collections

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

## Other forms

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