# Black and gray linear swatches

Black and gray linear swatches 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.

- Seed: `kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA`
- Page: https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA?style=linearSwatches&steps=32&angle=135
- Drawn as: linear swatches, 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.000% 3.125%, #232a30 3.125% 6.250%, #262f36 6.250% 9.375%, #2b353d 9.375% 12.500%, #303c44 12.500% 15.625%, #36444c 15.625% 18.750%, #3d4c55 18.750% 21.875%, #45545e 21.875% 25.000%, #4e5e68 25.000% 28.125%, #576873 28.125% 31.250%, #61727d 31.250% 34.375%, #6c7d87 34.375% 37.500%, #798992 37.500% 40.625%, #86959d 40.625% 43.750%, #94a1a7 43.750% 46.875%, #a0acb1 46.875% 50.000%, #abb5b9 50.000% 53.125%, #b7c0c3 53.125% 56.250%, #c3c9cb 56.250% 59.375%, #ccd1d2 59.375% 62.500%, #d0d4d5 62.500% 65.625%, #ced2d3 65.625% 68.750%, #c5c9cb 68.750% 71.875%, #b6bcbe 71.875% 75.000%, #a5adaf 75.000% 78.125%, #949da0 78.125% 81.250%, #858f92 81.250% 84.375%, #768084 84.375% 87.500%, #677074 87.500% 90.625%, #596265 90.625% 93.750%, #4d5559 93.750% 96.875%, #444d50 96.875% 100.000%);
background: linear-gradient(135deg, oklch(26.77% 0.0138 241.87) 0.000% 3.125%, oklch(28.17% 0.0151 240.95) 3.125% 6.250%, oklch(30.09% 0.0171 239.59) 6.250% 9.375%, oklch(32.40% 0.0194 238.07) 9.375% 12.500%, oklch(34.99% 0.0215 236.66) 12.500% 15.625%, oklch(37.73% 0.0232 235.65) 15.625% 18.750%, oklch(40.62% 0.0244 235.30) 18.750% 21.875%, oklch(43.80% 0.0255 235.54) 21.875% 25.000%, oklch(47.20% 0.0264 235.97) 25.000% 28.125%, oklch(50.73% 0.0267 236.20) 28.125% 31.250%, oklch(54.32% 0.0264 235.85) 31.250% 34.375%, oklch(58.00% 0.0253 234.60) 34.375% 37.500%, oklch(61.98% 0.0232 232.61) 37.500% 40.625%, oklch(66.06% 0.0205 230.17) 40.625% 43.750%, oklch(70.02% 0.0176 227.56) 43.750% 46.875%, oklch(73.61% 0.0149 225.04) 46.875% 50.000%, oklch(76.77% 0.0127 222.76) 50.000% 53.125%, oklch(80.11% 0.0102 220.16) 53.125% 56.250%, oklch(83.25% 0.0079 217.52) 56.250% 59.375%, oklch(85.67% 0.0058 215.23) 59.375% 62.500%, oklch(86.82% 0.0045 213.72) 62.500% 65.625%, oklch(86.15% 0.0042 213.41) 65.625% 68.750%, oklch(83.42% 0.0052 214.58) 68.750% 71.875%, oklch(79.19% 0.0071 216.75) 71.875% 75.000%, oklch(74.13% 0.0094 219.29) 75.000% 78.125%, oklch(68.93% 0.0113 221.58) 78.125% 81.250%, oklch(64.22% 0.0125 223.02) 81.250% 84.375%, oklch(59.29% 0.0130 223.68) 84.375% 87.500%, oklch(53.99% 0.0130 223.95) 87.500% 90.625%, oklch(48.86% 0.0128 223.97) 90.625% 93.750%, oklch(44.45% 0.0125 223.90) 93.750% 96.875%, oklch(41.34% 0.0124 223.91) 96.875% 100.000%);
```

## 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?style=linearSwatches&steps=32&angle=135)
- [PNG](https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA.png?style=linearSwatches&steps=32&angle=135)
- [SVG](https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA.svg?style=linearSwatches&steps=32&angle=135)
- [CSS](https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA.css?style=linearSwatches&steps=32&angle=135)
- [ASE](https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA.ase?style=linearSwatches&steps=32&angle=135)
- [GPL](https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA.gpl?style=linearSwatches&steps=32&angle=135)
- [GRD](https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA.grd?style=linearSwatches&steps=32&angle=135)
- [Design tokens](https://grabient.com/kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA.tokens.json?style=linearSwatches&steps=32&angle=135)
- [Social card](https://grabient.com/api/og?seed=kaRAqsMIi_MaJv_fhT6bgG-tKEwQ0hMAA&style=linearSwatches&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)