# Black and gray linear swatches

Black and gray linear swatches with 32 colors: #212429, #272a2f, #2f3237, #383b40, #43464b, #4f5357, #5c6065, #6b6e73, #7a7d81, #898d90, #989c9f, #a7aaae, #b5b9bc, #c2c6c9, #ced1d4, #d8dbde, #dfe2e6, #e5e9ec, #eaedf1, #eef1f6, #f1f4f9, #f3f6fb, #f4f7fd, #f5f7fe, #f6f7ff, #f6f6ff, #f6f6ff, #f6f5ff, #f6f4fe, #f6f4fe, #f7f3fe, #f8f4ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSQgi58oI-fuFxm`
- Page: https://grabient.com/kSQgi58oI-fuFxm?style=linearSwatches&steps=32&angle=45
- Drawn as: linear swatches, 32 steps, 45 degrees
- Kinds: dark to light, neutral, light
- Hues: achromatic
- Contrast of its darkest and lightest colors: 14.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.0110 260.86)` | Dark Gunmetal | white, 15.5 to 1 |
| 2 | `#272a2f` | `oklch(28.42% 0.0108 260.27)` | Blue Charcoal | white, 14.3 to 1 |
| 3 | `#2f3237` | `oklch(31.54% 0.0105 259.35)` | Granite Black | white, 12.9 to 1 |
| 4 | `#383b40` | `oklch(35.23% 0.0101 258.18)` | Crypt | white, 11.1 to 1 |
| 5 | `#43464b` | `oklch(39.40% 0.0096 256.82)` | Steel Grey | white, 9.4 to 1 |
| 6 | `#4f5357` | `oklch(43.95% 0.0091 255.32)` | Trout | white, 7.7 to 1 |
| 7 | `#5c6065` | `oklch(48.78% 0.0086 253.77)` | Sheet Metal | white, 6.3 to 1 |
| 8 | `#6b6e73` | `oklch(53.80% 0.0081 252.21)` | Bottlenose Dolphin | white, 5 to 1 |
| 9 | `#7a7d81` | `oklch(58.91% 0.0075 250.72)` | Cowboy Spur | black, 5 to 1 |
| 10 | `#898d90` | `oklch(64.01% 0.0070 249.36)` | Ancient Pewter | black, 6.2 to 1 |
| 11 | `#989c9f` | `oklch(69.00% 0.0066 248.20)` | Harrison Grey | black, 7.5 to 1 |
| 12 | `#a7aaae` | `oklch(73.78% 0.0062 247.29)` | Chrome Aluminium | black, 9 to 1 |
| 13 | `#b5b9bc` | `oklch(78.26% 0.0058 246.72)` | Let It Rain | black, 10.5 to 1 |
| 14 | `#c2c6c9` | `oklch(82.35% 0.0056 246.53)` | Weathered Stone | black, 12.1 to 1 |
| 15 | `#ced1d4` | `oklch(85.93% 0.0055 246.79)` | Fragile Blue | black, 13.6 to 1 |
| 16 | `#d8dbde` | `oklch(88.92% 0.0055 247.57)` | Empire State Grey | black, 15 to 1 |
| 17 | `#dfe2e6` | `oklch(91.25% 0.0056 248.96)` | January Dawn | black, 16.2 to 1 |
| 18 | `#e5e9ec` | `oklch(93.13% 0.0059 251.06)` | Snow Cloud | black, 17.1 to 1 |
| 19 | `#eaedf1` | `oklch(94.62% 0.0063 253.80)` | Walls of Santorini | black, 17.9 to 1 |
| 20 | `#eef1f6` | `oklch(95.76% 0.0069 257.09)` | Airport | black, 18.5 to 1 |
| 21 | `#f1f4f9` | `oklch(96.60% 0.0075 260.83)` | Child of Light | black, 19 to 1 |
| 22 | `#f3f6fb` | `oklch(97.18% 0.0082 264.91)` | White Solid | black, 19.3 to 1 |
| 23 | `#f4f7fd` | `oklch(97.53% 0.0090 269.25)` | Mā White | black, 19.5 to 1 |
| 24 | `#f5f7fe` | `oklch(97.69% 0.0098 273.73)` | Mā White | black, 19.6 to 1 |
| 25 | `#f6f7ff` | `oklch(97.72% 0.0106 278.26)` | Ghost White | black, 19.6 to 1 |
| 26 | `#f6f6ff` | `oklch(97.64% 0.0114 282.74)` | Mā White | black, 19.5 to 1 |
| 27 | `#f6f6ff` | `oklch(97.49% 0.0122 287.09)` | Mā White | black, 19.4 to 1 |
| 28 | `#f6f5ff` | `oklch(97.33% 0.0130 291.18)` | Sugar Crystal | black, 19.3 to 1 |
| 29 | `#f6f4fe` | `oklch(97.18% 0.0137 294.93)` | Sugar Crystal | black, 19.3 to 1 |
| 30 | `#f6f4fe` | `oklch(97.09% 0.0143 298.24)` | Sugar Crystal | black, 19.2 to 1 |
| 31 | `#f7f3fe` | `oklch(97.10% 0.0148 301.00)` | Sugar Crystal | black, 19.2 to 1 |
| 32 | `#f8f4ff` | `oklch(97.24% 0.0152 303.13)` | Sugar Crystal | black, 19.3 to 1 |

## CSS

```css
background: linear-gradient(45deg, #212429 0.000% 3.125%, #272a2f 3.125% 6.250%, #2f3237 6.250% 9.375%, #383b40 9.375% 12.500%, #43464b 12.500% 15.625%, #4f5357 15.625% 18.750%, #5c6065 18.750% 21.875%, #6b6e73 21.875% 25.000%, #7a7d81 25.000% 28.125%, #898d90 28.125% 31.250%, #989c9f 31.250% 34.375%, #a7aaae 34.375% 37.500%, #b5b9bc 37.500% 40.625%, #c2c6c9 40.625% 43.750%, #ced1d4 43.750% 46.875%, #d8dbde 46.875% 50.000%, #dfe2e6 50.000% 53.125%, #e5e9ec 53.125% 56.250%, #eaedf1 56.250% 59.375%, #eef1f6 59.375% 62.500%, #f1f4f9 62.500% 65.625%, #f3f6fb 65.625% 68.750%, #f4f7fd 68.750% 71.875%, #f5f7fe 71.875% 75.000%, #f6f7ff 75.000% 78.125%, #f6f6ff 78.125% 81.250%, #f6f6ff 81.250% 84.375%, #f6f5ff 84.375% 87.500%, #f6f4fe 87.500% 90.625%, #f6f4fe 90.625% 93.750%, #f7f3fe 93.750% 96.875%, #f8f4ff 96.875% 100.000%);
background: linear-gradient(45deg, oklch(25.98% 0.0110 260.86) 0.000% 3.125%, oklch(28.42% 0.0108 260.27) 3.125% 6.250%, oklch(31.54% 0.0105 259.35) 6.250% 9.375%, oklch(35.23% 0.0101 258.18) 9.375% 12.500%, oklch(39.40% 0.0096 256.82) 12.500% 15.625%, oklch(43.95% 0.0091 255.32) 15.625% 18.750%, oklch(48.78% 0.0086 253.77) 18.750% 21.875%, oklch(53.80% 0.0081 252.21) 21.875% 25.000%, oklch(58.91% 0.0075 250.72) 25.000% 28.125%, oklch(64.01% 0.0070 249.36) 28.125% 31.250%, oklch(69.00% 0.0066 248.20) 31.250% 34.375%, oklch(73.78% 0.0062 247.29) 34.375% 37.500%, oklch(78.26% 0.0058 246.72) 37.500% 40.625%, oklch(82.35% 0.0056 246.53) 40.625% 43.750%, oklch(85.93% 0.0055 246.79) 43.750% 46.875%, oklch(88.92% 0.0055 247.57) 46.875% 50.000%, oklch(91.25% 0.0056 248.96) 50.000% 53.125%, oklch(93.13% 0.0059 251.06) 53.125% 56.250%, oklch(94.62% 0.0063 253.80) 56.250% 59.375%, oklch(95.76% 0.0069 257.09) 59.375% 62.500%, oklch(96.60% 0.0075 260.83) 62.500% 65.625%, oklch(97.18% 0.0082 264.91) 65.625% 68.750%, oklch(97.53% 0.0090 269.25) 68.750% 71.875%, oklch(97.69% 0.0098 273.73) 71.875% 75.000%, oklch(97.72% 0.0106 278.26) 75.000% 78.125%, oklch(97.64% 0.0114 282.74) 78.125% 81.250%, oklch(97.49% 0.0122 287.09) 81.250% 84.375%, oklch(97.33% 0.0130 291.18) 84.375% 87.500%, oklch(97.18% 0.0137 294.93) 87.500% 90.625%, oklch(97.09% 0.0143 298.24) 90.625% 93.750%, oklch(97.10% 0.0148 301.00) 93.750% 96.875%, oklch(97.24% 0.0152 303.13) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.26 | 0.011 | 260.9 |
| 2 | 0.902 | 0.006 | 248.2 |
| 3 | 0.972 | 0.015 | 303.1 |

## In these collections

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

## Other forms

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