# Black and gray linear gradient

Black and gray linear gradient with 32 colors: #08090a, #090a0c, #0a0d10, #0d1013, #0f1317, #11161a, #13181d, #161b1f, #181d22, #1b2125, #1e2429, #21282e, #252c32, #293037, #2c343b, #2d363d, #303940, #374148, #485258, #6c7479, #9ca1a4, #cacccd, #e5e5e5, #e1e2e2, #c7cacb, #a3a9ac, #80888c, #676f74, #4f575c, #394045, #282d32, #1c2125. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcIwOyGAQ_x6Ev0nhkCNAY-XWAP5IhMAnwRA4`
- Page: https://grabient.com/kcIwOyGAQ_x6Ev0nhkCNAY-XWAP5IhMAnwRA4?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: neutral, dark
- Hues: achromatic
- Contrast of its darkest and lightest colors: 15.8 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 | `#08090a` | `oklch(13.78% 0.0041 250.31)` | Reversed Grey | white, 19.9 to 1 |
| 2 | `#090a0c` | `oklch(14.59% 0.0053 250.23)` | Existential Angst | white, 19.7 to 1 |
| 3 | `#0a0d10` | `oklch(15.74% 0.0071 250.14)` | Black Wash | white, 19.4 to 1 |
| 4 | `#0d1013` | `oklch(17.07% 0.0090 249.95)` | Ruined Smores | white, 19 to 1 |
| 5 | `#0f1317` | `oklch(18.38% 0.0105 249.53)` | Black Is Back | white, 18.6 to 1 |
| 6 | `#11161a` | `oklch(19.54% 0.0115 248.70)` | Black Is Back | white, 18.2 to 1 |
| 7 | `#13181d` | `oklch(20.63% 0.0118 247.26)` | Neverything | white, 17.8 to 1 |
| 8 | `#161b1f` | `oklch(21.73% 0.0119 245.66)` | Gluon Grey | white, 17.4 to 1 |
| 9 | `#181d22` | `oklch(22.90% 0.0120 244.39)` | Satin Deep Black | white, 16.9 to 1 |
| 10 | `#1b2125` | `oklch(24.21% 0.0125 243.99)` | Noble Black | white, 16.3 to 1 |
| 11 | `#1e2429` | `oklch(25.64% 0.0134 245.05)` | Dark Gunmetal | white, 15.6 to 1 |
| 12 | `#21282e` | `oklch(27.15% 0.0145 247.00)` | Black Grey | white, 14.9 to 1 |
| 13 | `#252c32` | `oklch(28.78% 0.0156 248.80)` | Blue Charcoal | white, 14.1 to 1 |
| 14 | `#293037` | `oklch(30.56% 0.0164 249.43)` | Suit Blue | white, 13.3 to 1 |
| 15 | `#2c343b` | `oklch(32.08% 0.0170 248.00)` | Dracula Orchid | white, 12.6 to 1 |
| 16 | `#2d363d` | `oklch(32.80% 0.0176 244.84)` | Blue Plaza | white, 12.2 to 1 |
| 17 | `#303940` | `oklch(33.97% 0.0179 240.94)` | Tempest in a Teapot | white, 11.7 to 1 |
| 18 | `#374148` | `oklch(36.96% 0.0175 237.34)` | Cool Operator’s Overalls | white, 10.4 to 1 |
| 19 | `#485258` | `oklch(43.26% 0.0159 235.00)` | Seared Grey | white, 7.9 to 1 |
| 20 | `#6c7479` | `oklch(55.47% 0.0121 233.67)` | Silver Hill | white, 4.7 to 1 |
| 21 | `#9ca1a4` | `oklch(70.65% 0.0071 232.90)` | Suzu Grey | black, 8 to 1 |
| 22 | `#cacccd` | `oklch(84.36% 0.0026 232.53)` | Dawn Blue | black, 13 to 1 |
| 23 | `#e5e5e5` | `oklch(92.15% 0.0001 232.35)` | Cold Morning | black, 16.6 to 1 |
| 24 | `#e1e2e2` | `oklch(91.10% 0.0008 232.33)` | Teapot | black, 16.1 to 1 |
| 25 | `#c7cacb` | `oklch(83.67% 0.0039 232.54)` | Grey Screen | black, 12.7 to 1 |
| 26 | `#a3a9ac` | `oklch(72.99% 0.0078 233.03)` | Crown of Ash | black, 8.7 to 1 |
| 27 | `#80888c` | `oklch(62.15% 0.0113 233.84)` | London Road | black, 5.8 to 1 |
| 28 | `#676f74` | `oklch(53.68% 0.0128 235.06)` | Batman | white, 5.1 to 1 |
| 29 | `#4f575c` | `oklch(45.19% 0.0129 237.02)` | Submarine Grey | white, 7.3 to 1 |
| 30 | `#394045` | `oklch(36.79% 0.0123 239.32)` | Glaucophobia | white, 10.4 to 1 |
| 31 | `#282d32` | `oklch(29.52% 0.0115 241.45)` | Bunker | white, 13.8 to 1 |
| 32 | `#1c2125` | `oklch(24.41% 0.0110 242.92)` | Noble Black | white, 16.2 to 1 |

## CSS

```css
background: linear-gradient(45deg, #08090a 0.0%, #090a0c 3.2%, #0a0d10 6.5%, #0d1013 9.7%, #0f1317 12.9%, #11161a 16.1%, #13181d 19.4%, #161b1f 22.6%, #181d22 25.8%, #1b2125 29.0%, #1e2429 32.3%, #21282e 35.5%, #252c32 38.7%, #293037 41.9%, #2c343b 45.2%, #2d363d 48.4%, #303940 51.6%, #374148 54.8%, #485258 58.1%, #6c7479 61.3%, #9ca1a4 64.5%, #cacccd 67.7%, #e5e5e5 71.0%, #e1e2e2 74.2%, #c7cacb 77.4%, #a3a9ac 80.6%, #80888c 83.9%, #676f74 87.1%, #4f575c 90.3%, #394045 93.5%, #282d32 96.8%, #1c2125 100.0%);
background: linear-gradient(45deg in oklch, oklch(13.78% 0.0041 250.31) 0.0%, oklch(14.59% 0.0053 250.23) 3.2%, oklch(15.74% 0.0071 250.14) 6.5%, oklch(17.07% 0.0090 249.95) 9.7%, oklch(18.38% 0.0105 249.53) 12.9%, oklch(19.54% 0.0115 248.70) 16.1%, oklch(20.63% 0.0118 247.26) 19.4%, oklch(21.73% 0.0119 245.66) 22.6%, oklch(22.90% 0.0120 244.39) 25.8%, oklch(24.21% 0.0125 243.99) 29.0%, oklch(25.64% 0.0134 245.05) 32.3%, oklch(27.15% 0.0145 247.00) 35.5%, oklch(28.78% 0.0156 248.80) 38.7%, oklch(30.56% 0.0164 249.43) 41.9%, oklch(32.08% 0.0170 248.00) 45.2%, oklch(32.80% 0.0176 244.84) 48.4%, oklch(33.97% 0.0179 240.94) 51.6%, oklch(36.96% 0.0175 237.34) 54.8%, oklch(43.26% 0.0159 235.00) 58.1%, oklch(55.47% 0.0121 233.67) 61.3%, oklch(70.65% 0.0071 232.90) 64.5%, oklch(84.36% 0.0026 232.53) 67.7%, oklch(92.15% 0.0001 232.35) 71.0%, oklch(91.10% 0.0008 232.33) 74.2%, oklch(83.67% 0.0039 232.54) 77.4%, oklch(72.99% 0.0078 233.03) 80.6%, oklch(62.15% 0.0113 233.84) 83.9%, oklch(53.68% 0.0128 235.06) 87.1%, oklch(45.19% 0.0129 237.02) 90.3%, oklch(36.79% 0.0123 239.32) 93.5%, oklch(29.52% 0.0115 241.45) 96.8%, oklch(24.41% 0.0110 242.92) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.138 | 0.004 | 250.3 |
| 2 | 0.189 | 0.011 | 249.3 |
| 3 | 0.24 | 0.012 | 244 |
| 4 | 0.311 | 0.017 | 249.3 |
| 5 | 0.409 | 0.017 | 235.5 |
| 6 | 0.925 | 0 | 232.3 |
| 7 | 0.571 | 0.012 | 234.5 |
| 8 | 0.244 | 0.011 | 242.9 |

## In these collections

- [Glass gradients](https://grabient.com/glass-gradients)
- [Metallic gradients](https://grabient.com/metallic-gradients)
- [Wallpaper gradients](https://grabient.com/wallpaper-gradients)

## Other forms

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