# Black and gray linear swatches

Black and gray linear swatches with 32 colors: #212429, #23272b, #272a2f, #2a2e32, #2e3236, #33373b, #383c40, #3d4145, #43474b, #494d51, #505358, #565a5e, #5d6165, #65686c, #6c7074, #73777b, #7b7f83, #83868a, #8a8e92, #92969a, #9a9da1, #a1a5a8, #a9acb0, #b0b3b7, #b7babe, #bdc1c4, #c4c7ca, #c9cdd0, #cfd2d5, #d4d7da, #d8dbde, #dcdfe2. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kQQgeycoI_4`
- Page: https://grabient.com/kQQgeycoI_4?style=linearSwatches&steps=32&angle=135
- Drawn as: linear swatches, 32 steps, 135 degrees
- Kinds: dark to light, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 11.5 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 | `#212429` | `oklch(25.98% 0.0096 250.31)` | Dark Gunmetal | white, 15.5 to 1 |
| 2 | `#23272b` | `oklch(27.12% 0.0096 250.31)` | Black Beauty | white, 15 to 1 |
| 3 | `#272a2f` | `oklch(28.44% 0.0095 250.31)` | Blue Charcoal | white, 14.3 to 1 |
| 4 | `#2a2e32` | `oklch(29.93% 0.0094 250.31)` | Stretch Limo | white, 13.6 to 1 |
| 5 | `#2e3236` | `oklch(31.59% 0.0093 250.31)` | Ebony | white, 12.8 to 1 |
| 6 | `#33373b` | `oklch(33.39% 0.0092 250.31)` | Tribecca Corner | white, 12 to 1 |
| 7 | `#383c40` | `oklch(35.34% 0.0090 250.31)` | Detective Thriller | white, 11.1 to 1 |
| 8 | `#3d4145` | `oklch(37.40% 0.0089 250.31)` | Chimney Smoke | white, 10.2 to 1 |
| 9 | `#43474b` | `oklch(39.57% 0.0088 250.31)` | Steel Grey | white, 9.3 to 1 |
| 10 | `#494d51` | `oklch(41.84% 0.0086 250.31)` | Blackwood | white, 8.5 to 1 |
| 11 | `#505358` | `oklch(44.20% 0.0085 250.31)` | Water Ouzel | white, 7.6 to 1 |
| 12 | `#565a5e` | `oklch(46.62% 0.0083 250.31)` | Summer Concrete | white, 6.9 to 1 |
| 13 | `#5d6165` | `oklch(49.11% 0.0082 250.31)` | Sheet Metal | white, 6.2 to 1 |
| 14 | `#65686c` | `oklch(51.64% 0.0080 250.31)` | Equinox | white, 5.5 to 1 |
| 15 | `#6c7074` | `oklch(54.20% 0.0078 250.31)` | High-Speed Steel | white, 5 to 1 |
| 16 | `#73777b` | `oklch(56.78% 0.0077 250.31)` | Astrogranite | black, 4.6 to 1 |
| 17 | `#7b7f83` | `oklch(59.36% 0.0075 250.31)` | Cowboy Spur | black, 5.1 to 1 |
| 18 | `#83868a` | `oklch(61.95% 0.0073 250.31)` | Heavy Grey | black, 5.7 to 1 |
| 19 | `#8a8e92` | `oklch(64.51% 0.0072 250.31)` | Bali Deep | black, 6.3 to 1 |
| 20 | `#92969a` | `oklch(67.04% 0.0070 250.31)` | Steely Grey | black, 7 to 1 |
| 21 | `#9a9da1` | `oklch(69.52% 0.0068 250.31)` | Smokey Stone | black, 7.7 to 1 |
| 22 | `#a1a5a8` | `oklch(71.94% 0.0067 250.31)` | Baby Seal | black, 8.4 to 1 |
| 23 | `#a9acb0` | `oklch(74.30% 0.0065 250.31)` | Northern Light Grey | black, 9.2 to 1 |
| 24 | `#b0b3b7` | `oklch(76.57% 0.0064 250.31)` | Astroscopus Grey | black, 9.9 to 1 |
| 25 | `#b7babe` | `oklch(78.74% 0.0062 250.31)` | Quiet Grey | black, 10.7 to 1 |
| 26 | `#bdc1c4` | `oklch(80.81% 0.0061 250.31)` | Lazy Grey | black, 11.5 to 1 |
| 27 | `#c4c7ca` | `oklch(82.75% 0.0060 250.31)` | Shining Silver | black, 12.3 to 1 |
| 28 | `#c9cdd0` | `oklch(84.55% 0.0059 250.31)` | Lunar Rays | black, 13 to 1 |
| 29 | `#cfd2d5` | `oklch(86.21% 0.0058 250.31)` | Fragile Blue | black, 13.8 to 1 |
| 30 | `#d4d7da` | `oklch(87.70% 0.0057 250.31)` | December Sky | black, 14.5 to 1 |
| 31 | `#d8dbde` | `oklch(89.02% 0.0056 250.31)` | Empire State Grey | black, 15.1 to 1 |
| 32 | `#dcdfe2` | `oklch(90.16% 0.0055 250.31)` | Wayward Wind | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #212429 0.000% 3.125%, #23272b 3.125% 6.250%, #272a2f 6.250% 9.375%, #2a2e32 9.375% 12.500%, #2e3236 12.500% 15.625%, #33373b 15.625% 18.750%, #383c40 18.750% 21.875%, #3d4145 21.875% 25.000%, #43474b 25.000% 28.125%, #494d51 28.125% 31.250%, #505358 31.250% 34.375%, #565a5e 34.375% 37.500%, #5d6165 37.500% 40.625%, #65686c 40.625% 43.750%, #6c7074 43.750% 46.875%, #73777b 46.875% 50.000%, #7b7f83 50.000% 53.125%, #83868a 53.125% 56.250%, #8a8e92 56.250% 59.375%, #92969a 59.375% 62.500%, #9a9da1 62.500% 65.625%, #a1a5a8 65.625% 68.750%, #a9acb0 68.750% 71.875%, #b0b3b7 71.875% 75.000%, #b7babe 75.000% 78.125%, #bdc1c4 78.125% 81.250%, #c4c7ca 81.250% 84.375%, #c9cdd0 84.375% 87.500%, #cfd2d5 87.500% 90.625%, #d4d7da 90.625% 93.750%, #d8dbde 93.750% 96.875%, #dcdfe2 96.875% 100.000%);
background: linear-gradient(135deg, oklch(25.98% 0.0096 250.31) 0.000% 3.125%, oklch(27.12% 0.0096 250.31) 3.125% 6.250%, oklch(28.44% 0.0095 250.31) 6.250% 9.375%, oklch(29.93% 0.0094 250.31) 9.375% 12.500%, oklch(31.59% 0.0093 250.31) 12.500% 15.625%, oklch(33.39% 0.0092 250.31) 15.625% 18.750%, oklch(35.34% 0.0090 250.31) 18.750% 21.875%, oklch(37.40% 0.0089 250.31) 21.875% 25.000%, oklch(39.57% 0.0088 250.31) 25.000% 28.125%, oklch(41.84% 0.0086 250.31) 28.125% 31.250%, oklch(44.20% 0.0085 250.31) 31.250% 34.375%, oklch(46.62% 0.0083 250.31) 34.375% 37.500%, oklch(49.11% 0.0082 250.31) 37.500% 40.625%, oklch(51.64% 0.0080 250.31) 40.625% 43.750%, oklch(54.20% 0.0078 250.31) 43.750% 46.875%, oklch(56.78% 0.0077 250.31) 46.875% 50.000%, oklch(59.36% 0.0075 250.31) 50.000% 53.125%, oklch(61.95% 0.0073 250.31) 53.125% 56.250%, oklch(64.51% 0.0072 250.31) 56.250% 59.375%, oklch(67.04% 0.0070 250.31) 59.375% 62.500%, oklch(69.52% 0.0068 250.31) 62.500% 65.625%, oklch(71.94% 0.0067 250.31) 65.625% 68.750%, oklch(74.30% 0.0065 250.31) 68.750% 71.875%, oklch(76.57% 0.0064 250.31) 71.875% 75.000%, oklch(78.74% 0.0062 250.31) 75.000% 78.125%, oklch(80.81% 0.0061 250.31) 78.125% 81.250%, oklch(82.75% 0.0060 250.31) 81.250% 84.375%, oklch(84.55% 0.0059 250.31) 84.375% 87.500%, oklch(86.21% 0.0058 250.31) 87.500% 90.625%, oklch(87.70% 0.0057 250.31) 90.625% 93.750%, oklch(89.02% 0.0056 250.31) 93.750% 96.875%, oklch(90.16% 0.0055 250.31) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.26 | 0.01 | 250.3 |
| 2 | 0.902 | 0.006 | 250.3 |

## In these collections

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

## Other forms

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