# Seamless black and gray linear swatches

Seamless black and gray linear swatches with 32 colors: #131517, #17191c, #1d2023, #25282c, #2e3236, #383c41, #44484d, #51565a, #5f6468, #6d7375, #7c8184, #8c9193, #9ba0a2, #aaaeb0, #b7bbbd, #c6cacc, #d3d7d9, #d9dee0, #d6dbdc, #c7cbcd, #b1b5b7, #999c9e, #838688, #727576, #616465, #525456, #444648, #373a3b, #2c2e2f, #232425, #1b1c1c, #161617. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcMQSwKgPAMUDPZggj-cYI_82BwCugb_GYDAA`
- Page: https://grabient.com/kcMQSwKgPAMUDPZggj-cYI_82BwCugb_GYDAA?style=linearSwatches&steps=32
- Drawn as: linear swatches, 32 steps, 90 degrees
- Kinds: light center, neutral, seamless
- Hues: achromatic
- Contrast of its darkest and lightest colors: 13.4 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 | `#131517` | `oklch(19.29% 0.0055 247.50)` | Dark Void | white, 18.3 to 1 |
| 2 | `#17191c` | `oklch(21.32% 0.0063 248.27)` | Aswad Black | white, 17.5 to 1 |
| 3 | `#1d2023` | `oklch(24.16% 0.0074 249.55)` | Noble Black | white, 16.3 to 1 |
| 4 | `#25282c` | `oklch(27.59% 0.0086 250.50)` | Anthracite | white, 14.7 to 1 |
| 5 | `#2e3236` | `oklch(31.38% 0.0094 250.28)` | Ebony | white, 12.9 to 1 |
| 6 | `#383c41` | `oklch(35.45% 0.0097 247.99)` | Detective Thriller | white, 11 to 1 |
| 7 | `#44484d` | `oklch(40.05% 0.0096 243.44)` | Cyberspace | white, 9.1 to 1 |
| 8 | `#51565a` | `oklch(45.01% 0.0092 237.89)` | Orion Grey | white, 7.4 to 1 |
| 9 | `#5f6468` | `oklch(50.08% 0.0087 232.69)` | Carriage Wheel | white, 5.9 to 1 |
| 10 | `#6d7375` | `oklch(55.03% 0.0082 229.18)` | Improbable | white, 4.8 to 1 |
| 11 | `#7c8184` | `oklch(60.10% 0.0076 227.44)` | Scattered Showers | black, 5.3 to 1 |
| 12 | `#8c9193` | `oklch(65.28% 0.0069 226.72)` | Gotham Grey | black, 6.5 to 1 |
| 13 | `#9ba0a2` | `oklch(70.29% 0.0062 226.55)` | Tank Head | black, 7.9 to 1 |
| 14 | `#aaaeb0` | `oklch(74.82% 0.0056 226.45)` | Grey Timberwolf | black, 9.3 to 1 |
| 15 | `#b7bbbd` | `oklch(79.07% 0.0054 226.16)` | Marseilles | black, 10.9 to 1 |
| 16 | `#c6cacc` | `oklch(83.68% 0.0054 226.04)` | Grey Screen | black, 12.7 to 1 |
| 17 | `#d3d7d9` | `oklch(87.60% 0.0055 226.07)` | Snow Quartz | black, 14.4 to 1 |
| 18 | `#d9dee0` | `oklch(89.67% 0.0056 226.21)` | Cold Water | black, 15.4 to 1 |
| 19 | `#d6dbdc` | `oklch(88.71% 0.0055 226.45)` | Sea Frost | black, 14.9 to 1 |
| 20 | `#c7cbcd` | `oklch(84.07% 0.0052 226.92)` | Porpoise Fin | black, 12.9 to 1 |
| 21 | `#b1b5b7` | `oklch(77.01% 0.0048 227.53)` | Online | black, 10.1 to 1 |
| 22 | `#999c9e` | `oklch(69.09% 0.0044 228.11)` | Pencil Sketch | black, 7.6 to 1 |
| 23 | `#838688` | `oklch(61.90% 0.0042 228.46)` | Magnetic Grey | black, 5.7 to 1 |
| 24 | `#727576` | `oklch(55.93% 0.0041 228.44)` | Sandpiper Cove | white, 4.6 to 1 |
| 25 | `#616465` | `oklch(50.11% 0.0042 228.15)` | Roycroft Pewter | white, 5.9 to 1 |
| 26 | `#525456` | `oklch(44.53% 0.0043 227.77)` | Orion Grey | white, 7.5 to 1 |
| 27 | `#444648` | `oklch(39.35% 0.0043 227.48)` | Black Heron | white, 9.4 to 1 |
| 28 | `#373a3b` | `oklch(34.63% 0.0040 227.44)` | Green Black | white, 11.4 to 1 |
| 29 | `#2c2e2f` | `oklch(30.11% 0.0034 227.64)` | Carbon Fibre | white, 13.5 to 1 |
| 30 | `#232425` | `oklch(25.98% 0.0026 227.95)` | Verified Black | white, 15.5 to 1 |
| 31 | `#1b1c1c` | `oklch(22.54% 0.0019 228.27)` | Eerie Black | white, 17 to 1 |
| 32 | `#161617` | `oklch(20.08% 0.0014 228.48)` | Pot Black | white, 18 to 1 |

## CSS

```css
background: linear-gradient(90deg, #131517 0.000% 3.125%, #17191c 3.125% 6.250%, #1d2023 6.250% 9.375%, #25282c 9.375% 12.500%, #2e3236 12.500% 15.625%, #383c41 15.625% 18.750%, #44484d 18.750% 21.875%, #51565a 21.875% 25.000%, #5f6468 25.000% 28.125%, #6d7375 28.125% 31.250%, #7c8184 31.250% 34.375%, #8c9193 34.375% 37.500%, #9ba0a2 37.500% 40.625%, #aaaeb0 40.625% 43.750%, #b7bbbd 43.750% 46.875%, #c6cacc 46.875% 50.000%, #d3d7d9 50.000% 53.125%, #d9dee0 53.125% 56.250%, #d6dbdc 56.250% 59.375%, #c7cbcd 59.375% 62.500%, #b1b5b7 62.500% 65.625%, #999c9e 65.625% 68.750%, #838688 68.750% 71.875%, #727576 71.875% 75.000%, #616465 75.000% 78.125%, #525456 78.125% 81.250%, #444648 81.250% 84.375%, #373a3b 84.375% 87.500%, #2c2e2f 87.500% 90.625%, #232425 90.625% 93.750%, #1b1c1c 93.750% 96.875%, #161617 96.875% 100.000%);
background: linear-gradient(90deg, oklch(19.29% 0.0055 247.50) 0.000% 3.125%, oklch(21.32% 0.0063 248.27) 3.125% 6.250%, oklch(24.16% 0.0074 249.55) 6.250% 9.375%, oklch(27.59% 0.0086 250.50) 9.375% 12.500%, oklch(31.38% 0.0094 250.28) 12.500% 15.625%, oklch(35.45% 0.0097 247.99) 15.625% 18.750%, oklch(40.05% 0.0096 243.44) 18.750% 21.875%, oklch(45.01% 0.0092 237.89) 21.875% 25.000%, oklch(50.08% 0.0087 232.69) 25.000% 28.125%, oklch(55.03% 0.0082 229.18) 28.125% 31.250%, oklch(60.10% 0.0076 227.44) 31.250% 34.375%, oklch(65.28% 0.0069 226.72) 34.375% 37.500%, oklch(70.29% 0.0062 226.55) 37.500% 40.625%, oklch(74.82% 0.0056 226.45) 40.625% 43.750%, oklch(79.07% 0.0054 226.16) 43.750% 46.875%, oklch(83.68% 0.0054 226.04) 46.875% 50.000%, oklch(87.60% 0.0055 226.07) 50.000% 53.125%, oklch(89.67% 0.0056 226.21) 53.125% 56.250%, oklch(88.71% 0.0055 226.45) 56.250% 59.375%, oklch(84.07% 0.0052 226.92) 59.375% 62.500%, oklch(77.01% 0.0048 227.53) 62.500% 65.625%, oklch(69.09% 0.0044 228.11) 65.625% 68.750%, oklch(61.90% 0.0042 228.46) 68.750% 71.875%, oklch(55.93% 0.0041 228.44) 71.875% 75.000%, oklch(50.11% 0.0042 228.15) 75.000% 78.125%, oklch(44.53% 0.0043 227.77) 78.125% 81.250%, oklch(39.35% 0.0043 227.48) 81.250% 84.375%, oklch(34.63% 0.0040 227.44) 84.375% 87.500%, oklch(30.11% 0.0034 227.64) 87.500% 90.625%, oklch(25.98% 0.0026 227.95) 90.625% 93.750%, oklch(22.54% 0.0019 228.27) 93.750% 96.875%, oklch(20.08% 0.0014 228.48) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.193 | 0.006 | 247.5 |
| 2 | 0.331 | 0.01 | 249.6 |
| 3 | 0.543 | 0.008 | 229.5 |
| 4 | 0.76 | 0.006 | 226.4 |
| 5 | 0.894 | 0.006 | 226.4 |
| 6 | 0.61 | 0.004 | 228.5 |
| 7 | 0.366 | 0.004 | 227.4 |
| 8 | 0.201 | 0.001 | 228.5 |

## In these collections

- [Gray gradients](https://grabient.com/gray-gradients)
- [Silver color palette](https://grabient.com/silver-color-palette)

## Other forms

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