# Black, gray and white linear swatches

Black, gray and white linear swatches with 32 colors: #050607, #06080a, #090b0e, #0e1013, #131519, #181b20, #1e2227, #25292e, #2b3036, #32373e, #3a4047, #424950, #4b525a, #545b64, #5d656e, #666e78, #6f7881, #78818a, #818a93, #8a939c, #949ca4, #9da5ad, #a6aeb5, #afb6bd, #b7bec4, #c0c6cc, #c8ced3, #d0d6da, #d7dde0, #dee3e6, #e4e8eb, #e8ecef. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWHgS5JgS_UYGv1jBL9d4I_Q`
- Page: https://grabient.com/kWHgS5JgS_UYGv1jBL9d4I_Q?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: 17.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 | `#050607` | `oklch(11.81% 0.0055 260.16)` | Black Metal | white, 20.3 to 1 |
| 2 | `#06080a` | `oklch(13.21% 0.0061 259.73)` | Reversed Grey | white, 20 to 1 |
| 3 | `#090b0e` | `oklch(15.02% 0.0068 259.17)` | Raven | white, 19.6 to 1 |
| 4 | `#0e1013` | `oklch(17.18% 0.0077 258.50)` | Ruined Smores | white, 19 to 1 |
| 5 | `#131519` | `oklch(19.61% 0.0087 257.75)` | Dark Void | white, 18.2 to 1 |
| 6 | `#181b20` | `oklch(22.24% 0.0098 256.96)` | Gluon Grey | white, 17.2 to 1 |
| 7 | `#1e2227` | `oklch(24.99% 0.0108 256.17)` | Noble Black | white, 15.9 to 1 |
| 8 | `#25292e` | `oklch(27.81% 0.0118 255.41)` | Cinder | white, 14.6 to 1 |
| 9 | `#2b3036` | `oklch(30.63% 0.0126 254.70)` | Suit Blue | white, 13.3 to 1 |
| 10 | `#32373e` | `oklch(33.61% 0.0135 254.02)` | School Ink | white, 11.9 to 1 |
| 11 | `#3a4047` | `oklch(36.79% 0.0144 253.34)` | Glaucophobia | white, 10.5 to 1 |
| 12 | `#424950` | `oklch(40.11% 0.0154 252.66)` | Foggy Night | white, 9.1 to 1 |
| 13 | `#4b525a` | `oklch(43.50% 0.0162 251.97)` | Evening Cityscape | white, 7.9 to 1 |
| 14 | `#545b64` | `oklch(46.92% 0.0170 251.29)` | Titanium Grey | white, 6.8 to 1 |
| 15 | `#5d656e` | `oklch(50.28% 0.0176 250.61)` | Slate Grey | white, 5.9 to 1 |
| 16 | `#666e78` | `oklch(53.55% 0.0179 249.93)` | Hong Kong Skyline | white, 5.1 to 1 |
| 17 | `#6f7881` | `oklch(56.67% 0.0179 249.25)` | Bilberry | black, 4.6 to 1 |
| 18 | `#78818a` | `oklch(59.79% 0.0176 248.57)` | Carbon Footprint | black, 5.2 to 1 |
| 19 | `#818a93` | `oklch(62.89% 0.0170 247.88)` | Roman Silver | black, 5.9 to 1 |
| 20 | `#8a939c` | `oklch(65.97% 0.0162 247.20)` | Quarry | black, 6.7 to 1 |
| 21 | `#949ca4` | `oklch(68.97% 0.0154 246.52)` | Dustblu | black, 7.5 to 1 |
| 22 | `#9da5ad` | `oklch(71.88% 0.0144 245.84)` | Rainmaster | black, 8.4 to 1 |
| 23 | `#a6aeb5` | `oklch(74.68% 0.0135 245.16)` | Northern Light Grey | black, 9.3 to 1 |
| 24 | `#afb6bd` | `oklch(77.32% 0.0126 244.48)` | Elliott Bay | black, 10.2 to 1 |
| 25 | `#b7bec4` | `oklch(79.85% 0.0118 243.77)` | Silver Springs | black, 11.2 to 1 |
| 26 | `#c0c6cc` | `oklch(82.37% 0.0108 243.01)` | Flat Aluminium | black, 12.1 to 1 |
| 27 | `#c8ced3` | `oklch(84.83% 0.0098 242.22)` | Dawn’s Early Light | black, 13.2 to 1 |
| 28 | `#d0d6da` | `oklch(87.17% 0.0087 241.43)` | Angel Hair Silver | black, 14.2 to 1 |
| 29 | `#d7dde0` | `oklch(89.33% 0.0077 240.68)` | Wispy Skies | black, 15.2 to 1 |
| 30 | `#dee3e6` | `oklch(91.24% 0.0068 240.01)` | Cold Light | black, 16.2 to 1 |
| 31 | `#e4e8eb` | `oklch(92.85% 0.0061 239.44)` | Snow Cloud | black, 17 to 1 |
| 32 | `#e8ecef` | `oklch(94.09% 0.0055 239.02)` | Icewind Dale | black, 17.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #050607 0.000% 3.125%, #06080a 3.125% 6.250%, #090b0e 6.250% 9.375%, #0e1013 9.375% 12.500%, #131519 12.500% 15.625%, #181b20 15.625% 18.750%, #1e2227 18.750% 21.875%, #25292e 21.875% 25.000%, #2b3036 25.000% 28.125%, #32373e 28.125% 31.250%, #3a4047 31.250% 34.375%, #424950 34.375% 37.500%, #4b525a 37.500% 40.625%, #545b64 40.625% 43.750%, #5d656e 43.750% 46.875%, #666e78 46.875% 50.000%, #6f7881 50.000% 53.125%, #78818a 53.125% 56.250%, #818a93 56.250% 59.375%, #8a939c 59.375% 62.500%, #949ca4 62.500% 65.625%, #9da5ad 65.625% 68.750%, #a6aeb5 68.750% 71.875%, #afb6bd 71.875% 75.000%, #b7bec4 75.000% 78.125%, #c0c6cc 78.125% 81.250%, #c8ced3 81.250% 84.375%, #d0d6da 84.375% 87.500%, #d7dde0 87.500% 90.625%, #dee3e6 90.625% 93.750%, #e4e8eb 93.750% 96.875%, #e8ecef 96.875% 100.000%);
background: linear-gradient(135deg, oklch(11.81% 0.0055 260.16) 0.000% 3.125%, oklch(13.21% 0.0061 259.73) 3.125% 6.250%, oklch(15.02% 0.0068 259.17) 6.250% 9.375%, oklch(17.18% 0.0077 258.50) 9.375% 12.500%, oklch(19.61% 0.0087 257.75) 12.500% 15.625%, oklch(22.24% 0.0098 256.96) 15.625% 18.750%, oklch(24.99% 0.0108 256.17) 18.750% 21.875%, oklch(27.81% 0.0118 255.41) 21.875% 25.000%, oklch(30.63% 0.0126 254.70) 25.000% 28.125%, oklch(33.61% 0.0135 254.02) 28.125% 31.250%, oklch(36.79% 0.0144 253.34) 31.250% 34.375%, oklch(40.11% 0.0154 252.66) 34.375% 37.500%, oklch(43.50% 0.0162 251.97) 37.500% 40.625%, oklch(46.92% 0.0170 251.29) 40.625% 43.750%, oklch(50.28% 0.0176 250.61) 43.750% 46.875%, oklch(53.55% 0.0179 249.93) 46.875% 50.000%, oklch(56.67% 0.0179 249.25) 50.000% 53.125%, oklch(59.79% 0.0176 248.57) 53.125% 56.250%, oklch(62.89% 0.0170 247.88) 56.250% 59.375%, oklch(65.97% 0.0162 247.20) 59.375% 62.500%, oklch(68.97% 0.0154 246.52) 62.500% 65.625%, oklch(71.88% 0.0144 245.84) 65.625% 68.750%, oklch(74.68% 0.0135 245.16) 68.750% 71.875%, oklch(77.32% 0.0126 244.48) 71.875% 75.000%, oklch(79.85% 0.0118 243.77) 75.000% 78.125%, oklch(82.37% 0.0108 243.01) 78.125% 81.250%, oklch(84.83% 0.0098 242.22) 81.250% 84.375%, oklch(87.17% 0.0087 241.43) 84.375% 87.500%, oklch(89.33% 0.0077 240.68) 87.500% 90.625%, oklch(91.24% 0.0068 240.01) 90.625% 93.750%, oklch(92.85% 0.0061 239.44) 93.750% 96.875%, oklch(94.09% 0.0055 239.02) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.118 | 0.006 | 260.2 |
| 2 | 0.299 | 0.012 | 254.9 |
| 3 | 0.551 | 0.018 | 249.6 |
| 4 | 0.78 | 0.012 | 244.3 |
| 5 | 0.941 | 0.006 | 239 |

## In these collections

- [New Year's Eve color palette](https://grabient.com/new-years-eve-color-palette)

## Other forms

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