# Steel Light through Charcoal

Black to gray linear gradient with 32 colors: #20272c, #232a30, #262f36, #2b353d, #303c44, #36444c, #3d4c55, #45545e, #4e5e68, #576873, #61727d, #6c7d87, #798992, #86959d, #94a1a7, #a0acb1, #abb5b9, #b7c0c3, #c3c9cb, #ccd1d2, #d0d4d5, #ced2d3, #c5c9cb, #b6bcbe, #a5adaf, #949da0, #858f92, #768084, #677074, #596265, #4d5559, #444d50. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Black to gray linear gradient
- Seed: `kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA`
- Page: https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 10.1 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 | `#20272c` | `oklch(26.77% 0.0138 241.87)` | Black Pearl | white, 15.1 to 1 |
| 2 | `#232a30` | `oklch(28.17% 0.0151 240.95)` | Cinder | white, 14.4 to 1 |
| 3 | `#262f36` | `oklch(30.09% 0.0171 239.59)` | Chimney Sweep | white, 13.5 to 1 |
| 4 | `#2b353d` | `oklch(32.40% 0.0194 238.07)` | Dracula Orchid | white, 12.4 to 1 |
| 5 | `#303c44` | `oklch(34.99% 0.0215 236.66)` | Tempest in a Teapot | white, 11.2 to 1 |
| 6 | `#36444c` | `oklch(37.73% 0.0232 235.65)` | Gale Force | white, 10 to 1 |
| 7 | `#3d4c55` | `oklch(40.62% 0.0244 235.30)` | Atomic | white, 8.9 to 1 |
| 8 | `#45545e` | `oklch(43.80% 0.0255 235.54)` | Night View | white, 7.7 to 1 |
| 9 | `#4e5e68` | `oklch(47.20% 0.0264 235.97)` | Wizard Grey | white, 6.7 to 1 |
| 10 | `#576873` | `oklch(50.73% 0.0267 236.20)` | Cadet | white, 5.7 to 1 |
| 11 | `#61727d` | `oklch(54.32% 0.0264 235.85)` | Hidden Harbour | white, 4.9 to 1 |
| 12 | `#6c7d87` | `oklch(58.00% 0.0253 234.60)` | Risk-Reward | black, 4.9 to 1 |
| 13 | `#798992` | `oklch(61.98% 0.0232 232.61)` | Deep Channel | black, 5.7 to 1 |
| 14 | `#86959d` | `oklch(66.06% 0.0205 230.17)` | Supreme Grey | black, 6.8 to 1 |
| 15 | `#94a1a7` | `oklch(70.02% 0.0176 227.56)` | Cape Cod Blue | black, 7.9 to 1 |
| 16 | `#a0acb1` | `oklch(73.61% 0.0149 225.04)` | Pelican Bay | black, 9 to 1 |
| 17 | `#abb5b9` | `oklch(76.77% 0.0127 222.76)` | Casper | black, 10 to 1 |
| 18 | `#b7c0c3` | `oklch(80.11% 0.0102 220.16)` | Krypton | black, 11.3 to 1 |
| 19 | `#c3c9cb` | `oklch(83.25% 0.0079 217.52)` | Grey Screen | black, 12.5 to 1 |
| 20 | `#ccd1d2` | `oklch(85.67% 0.0058 215.23)` | Harp Strings | black, 13.6 to 1 |
| 21 | `#d0d4d5` | `oklch(86.82% 0.0045 213.72)` | Elemental | black, 14.1 to 1 |
| 22 | `#ced2d3` | `oklch(86.15% 0.0042 213.41)` | Misty | black, 13.8 to 1 |
| 23 | `#c5c9cb` | `oklch(83.42% 0.0052 214.58)` | Grey Screen | black, 12.6 to 1 |
| 24 | `#b6bcbe` | `oklch(79.19% 0.0071 216.75)` | Oyster Mushroom | black, 10.9 to 1 |
| 25 | `#a5adaf` | `oklch(74.13% 0.0094 219.29)` | Gull Grey | black, 9.1 to 1 |
| 26 | `#949da0` | `oklch(68.93% 0.0113 221.58)` | Soft Pumice | black, 7.5 to 1 |
| 27 | `#858f92` | `oklch(64.22% 0.0125 223.02)` | Common Feldspar | black, 6.3 to 1 |
| 28 | `#768084` | `oklch(59.29% 0.0130 223.68)` | Peak Point | black, 5.1 to 1 |
| 29 | `#677074` | `oklch(53.99% 0.0130 223.95)` | Myth | white, 5 to 1 |
| 30 | `#596265` | `oklch(48.86% 0.0128 223.97)` | Greys Harbor | white, 6.2 to 1 |
| 31 | `#4d5559` | `oklch(44.45% 0.0125 223.90)` | Urbanite | white, 7.5 to 1 |
| 32 | `#444d50` | `oklch(41.34% 0.0124 223.91)` | Witchcraft | white, 8.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #20272c 0.0%, #232a30 3.2%, #262f36 6.5%, #2b353d 9.7%, #303c44 12.9%, #36444c 16.1%, #3d4c55 19.4%, #45545e 22.6%, #4e5e68 25.8%, #576873 29.0%, #61727d 32.3%, #6c7d87 35.5%, #798992 38.7%, #86959d 41.9%, #94a1a7 45.2%, #a0acb1 48.4%, #abb5b9 51.6%, #b7c0c3 54.8%, #c3c9cb 58.1%, #ccd1d2 61.3%, #d0d4d5 64.5%, #ced2d3 67.7%, #c5c9cb 71.0%, #b6bcbe 74.2%, #a5adaf 77.4%, #949da0 80.6%, #858f92 83.9%, #768084 87.1%, #677074 90.3%, #596265 93.5%, #4d5559 96.8%, #444d50 100.0%);
background: linear-gradient(135deg in oklch, oklch(26.77% 0.0138 241.87) 0.0%, oklch(28.17% 0.0151 240.95) 3.2%, oklch(30.09% 0.0171 239.59) 6.5%, oklch(32.40% 0.0194 238.07) 9.7%, oklch(34.99% 0.0215 236.66) 12.9%, oklch(37.73% 0.0232 235.65) 16.1%, oklch(40.62% 0.0244 235.30) 19.4%, oklch(43.80% 0.0255 235.54) 22.6%, oklch(47.20% 0.0264 235.97) 25.8%, oklch(50.73% 0.0267 236.20) 29.0%, oklch(54.32% 0.0264 235.85) 32.3%, oklch(58.00% 0.0253 234.60) 35.5%, oklch(61.98% 0.0232 232.61) 38.7%, oklch(66.06% 0.0205 230.17) 41.9%, oklch(70.02% 0.0176 227.56) 45.2%, oklch(73.61% 0.0149 225.04) 48.4%, oklch(76.77% 0.0127 222.76) 51.6%, oklch(80.11% 0.0102 220.16) 54.8%, oklch(83.25% 0.0079 217.52) 58.1%, oklch(85.67% 0.0058 215.23) 61.3%, oklch(86.82% 0.0045 213.72) 64.5%, oklch(86.15% 0.0042 213.41) 67.7%, oklch(83.42% 0.0052 214.58) 71.0%, oklch(79.19% 0.0071 216.75) 74.2%, oklch(74.13% 0.0094 219.29) 77.4%, oklch(68.93% 0.0113 221.58) 80.6%, oklch(64.22% 0.0125 223.02) 83.9%, oklch(59.29% 0.0130 223.68) 87.1%, oklch(53.99% 0.0130 223.95) 90.3%, oklch(48.86% 0.0128 223.97) 93.5%, oklch(44.45% 0.0125 223.90) 96.8%, oklch(41.34% 0.0124 223.91) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.268 | 0.014 | 241.9 |
| 2 | 0.382 | 0.023 | 235.5 |
| 3 | 0.555 | 0.026 | 235.5 |
| 4 | 0.752 | 0.014 | 223.9 |
| 5 | 0.866 | 0.004 | 213.3 |
| 6 | 0.65 | 0.012 | 222.9 |
| 7 | 0.413 | 0.012 | 223.9 |

## In these collections

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

## Other forms

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