# Black and gray linear swatches

Black and gray linear swatches with 32 colors: #020202, #030303, #030304, #050505, #060606, #070808, #09090a, #0a0b0c, #0b0d0d, #0c0e0f, #0e1011, #0f1213, #111315, #131517, #141719, #16191b, #181b1d, #1b1e20, #1d2022, #202325, #232628, #26292c, #282c2f, #2b2f32, #2e3336, #33373a, #393e41, #43474a, #4f5356, #5c6063, #686c6e, #707476. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaFgCmEQDAJYBv-bgj_IwK_60DP_Ggj_g`
- Page: https://grabient.com/kaFgCmEQDAJYBv-bgj_IwK_60DP_Ggj_g?style=linearSwatches&steps=32&angle=45
- Drawn as: linear swatches, 32 steps, 45 degrees
- Kinds: dark to light, neutral, dark
- Hues: achromatic
- Contrast of its darkest and lightest colors: 4.3 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 | `#020202` | `oklch(8.66% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |
| 2 | `#030303` | `oklch(9.29% 0.0002 233.74)` | Armour Wash | white, 20.6 to 1 |
| 3 | `#030304` | `oklch(10.18% 0.0004 234.20)` | Armour Wash | white, 20.5 to 1 |
| 4 | `#050505` | `oklch(11.22% 0.0006 234.71)` | Black Metal | white, 20.4 to 1 |
| 5 | `#060606` | `oklch(12.28% 0.0009 235.17)` | Black Metal | white, 20.2 to 1 |
| 6 | `#070808` | `oklch(13.24% 0.0013 235.51)` | Reversed Grey | white, 20 to 1 |
| 7 | `#09090a` | `oklch(14.06% 0.0018 235.68)` | Badab Black Wash | white, 19.8 to 1 |
| 8 | `#0a0b0c` | `oklch(14.82% 0.0023 235.75)` | Raven | white, 19.7 to 1 |
| 9 | `#0b0d0d` | `oklch(15.56% 0.0029 235.74)` | Black Wash | white, 19.5 to 1 |
| 10 | `#0c0e0f` | `oklch(16.30% 0.0035 235.68)` | Black Sheep | white, 19.3 to 1 |
| 11 | `#0e1011` | `oklch(17.06% 0.0040 235.58)` | Ruined Smores | white, 19 to 1 |
| 12 | `#0f1213` | `oklch(17.85% 0.0044 235.46)` | Dreamless Sleep | white, 18.8 to 1 |
| 13 | `#111315` | `oklch(18.64% 0.0047 235.25)` | Cursed Black | white, 18.5 to 1 |
| 14 | `#131517` | `oklch(19.43% 0.0049 235.00)` | Dark Void | white, 18.3 to 1 |
| 15 | `#141719` | `oklch(20.27% 0.0052 234.76)` | Dark Moon | white, 17.9 to 1 |
| 16 | `#16191b` | `oklch(21.17% 0.0054 234.56)` | Aswad Black | white, 17.6 to 1 |
| 17 | `#181b1d` | `oklch(22.15% 0.0056 234.45)` | Gluon Grey | white, 17.2 to 1 |
| 18 | `#1b1e20` | `oklch(23.19% 0.0059 234.42)` | Satin Deep Black | white, 16.7 to 1 |
| 19 | `#1d2022` | `oklch(24.29% 0.0062 234.43)` | Inkwell Inception | white, 16.3 to 1 |
| 20 | `#202325` | `oklch(25.45% 0.0064 234.46)` | Verified Black | white, 15.7 to 1 |
| 21 | `#232628` | `oklch(26.69% 0.0067 234.49)` | Black Beauty | white, 15.1 to 1 |
| 22 | `#26292c` | `oklch(27.99% 0.0070 234.49)` | Graphite Black | white, 14.5 to 1 |
| 23 | `#282c2f` | `oklch(29.15% 0.0073 234.49)` | Bunker | white, 14 to 1 |
| 24 | `#2b2f32` | `oklch(30.30% 0.0077 234.49)` | Cod Grey | white, 13.4 to 1 |
| 25 | `#2e3336` | `oklch(31.66% 0.0081 234.49)` | Ebony | white, 12.8 to 1 |
| 26 | `#33373a` | `oklch(33.45% 0.0083 234.49)` | Tribecca Corner | white, 11.9 to 1 |
| 27 | `#393e41` | `oklch(35.91% 0.0082 234.49)` | Mine Shaft | white, 10.8 to 1 |
| 28 | `#43474a` | `oklch(39.54% 0.0079 234.49)` | Little Black Dress | white, 9.3 to 1 |
| 29 | `#4f5356` | `oklch(44.02% 0.0073 234.49)` | Trout | white, 7.7 to 1 |
| 30 | `#5c6063` | `oklch(48.64% 0.0066 234.49)` | Sheet Metal | white, 6.3 to 1 |
| 31 | `#686c6e` | `oklch(52.70% 0.0059 234.49)` | Liberty Bell Grey | white, 5.3 to 1 |
| 32 | `#707476` | `oklch(55.51% 0.0055 234.49)` | Battleship Grey | white, 4.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #020202 0.000% 3.125%, #030303 3.125% 6.250%, #030304 6.250% 9.375%, #050505 9.375% 12.500%, #060606 12.500% 15.625%, #070808 15.625% 18.750%, #09090a 18.750% 21.875%, #0a0b0c 21.875% 25.000%, #0b0d0d 25.000% 28.125%, #0c0e0f 28.125% 31.250%, #0e1011 31.250% 34.375%, #0f1213 34.375% 37.500%, #111315 37.500% 40.625%, #131517 40.625% 43.750%, #141719 43.750% 46.875%, #16191b 46.875% 50.000%, #181b1d 50.000% 53.125%, #1b1e20 53.125% 56.250%, #1d2022 56.250% 59.375%, #202325 59.375% 62.500%, #232628 62.500% 65.625%, #26292c 65.625% 68.750%, #282c2f 68.750% 71.875%, #2b2f32 71.875% 75.000%, #2e3336 75.000% 78.125%, #33373a 78.125% 81.250%, #393e41 81.250% 84.375%, #43474a 84.375% 87.500%, #4f5356 87.500% 90.625%, #5c6063 90.625% 93.750%, #686c6e 93.750% 96.875%, #707476 96.875% 100.000%);
background: linear-gradient(45deg, oklch(8.66% 0.0000 89.88) 0.000% 3.125%, oklch(9.29% 0.0002 233.74) 3.125% 6.250%, oklch(10.18% 0.0004 234.20) 6.250% 9.375%, oklch(11.22% 0.0006 234.71) 9.375% 12.500%, oklch(12.28% 0.0009 235.17) 12.500% 15.625%, oklch(13.24% 0.0013 235.51) 15.625% 18.750%, oklch(14.06% 0.0018 235.68) 18.750% 21.875%, oklch(14.82% 0.0023 235.75) 21.875% 25.000%, oklch(15.56% 0.0029 235.74) 25.000% 28.125%, oklch(16.30% 0.0035 235.68) 28.125% 31.250%, oklch(17.06% 0.0040 235.58) 31.250% 34.375%, oklch(17.85% 0.0044 235.46) 34.375% 37.500%, oklch(18.64% 0.0047 235.25) 37.500% 40.625%, oklch(19.43% 0.0049 235.00) 40.625% 43.750%, oklch(20.27% 0.0052 234.76) 43.750% 46.875%, oklch(21.17% 0.0054 234.56) 46.875% 50.000%, oklch(22.15% 0.0056 234.45) 50.000% 53.125%, oklch(23.19% 0.0059 234.42) 53.125% 56.250%, oklch(24.29% 0.0062 234.43) 56.250% 59.375%, oklch(25.45% 0.0064 234.46) 59.375% 62.500%, oklch(26.69% 0.0067 234.49) 62.500% 65.625%, oklch(27.99% 0.0070 234.49) 65.625% 68.750%, oklch(29.15% 0.0073 234.49) 68.750% 71.875%, oklch(30.30% 0.0077 234.49) 71.875% 75.000%, oklch(31.66% 0.0081 234.49) 75.000% 78.125%, oklch(33.45% 0.0083 234.49) 78.125% 81.250%, oklch(35.91% 0.0082 234.49) 81.250% 84.375%, oklch(39.54% 0.0079 234.49) 84.375% 87.500%, oklch(44.02% 0.0073 234.49) 87.500% 90.625%, oklch(48.64% 0.0066 234.49) 90.625% 93.750%, oklch(52.70% 0.0059 234.49) 93.750% 96.875%, oklch(55.51% 0.0055 234.49) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.087 | 0 | 233.4 |
| 2 | 0.134 | 0.001 | 235.6 |
| 3 | 0.173 | 0.004 | 235.6 |
| 4 | 0.217 | 0.006 | 234.5 |
| 5 | 0.276 | 0.007 | 234.5 |
| 6 | 0.354 | 0.008 | 234.5 |
| 7 | 0.555 | 0.006 | 234.5 |

## In these collections

- [Black gradients](https://grabient.com/black-gradients)

## Other forms

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