# Seamless black and gray angular swatches

Seamless black and gray angular swatches with 32 colors: #262829, #2a2c2d, #303233, #37393a, #3e4142, #464849, #4c5051, #535759, #5a5f61, #62686a, #6b7173, #767c7e, #85898b, #969899, #a4a5a6, #aeaeae, #afafaf, #a9aaab, #9da0a2, #8f9496, #82888b, #777e81, #6c7377, #61686c, #575e62, #4e5458, #454b4f, #3e4246, #363a3d, #2f3235, #2a2c2e, #26282a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaRgKiM4G_EaDQJgAEATAO_7SDwYjAcBg`
- Page: https://grabient.com/kaRgKiM4G_EaDQJgAEATAO_7SDwYjAcBg?style=angularSwatches&steps=32&angle=45
- Drawn as: angular swatches, 32 steps, 45 degrees
- Kinds: light center, neutral, seamless
- Hues: achromatic
- Contrast of its darkest and lightest colors: 6.7 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 | `#262829` | `oklch(27.56% 0.0028 227.81)` | Dire Wolf | white, 14.7 to 1 |
| 2 | `#2a2c2d` | `oklch(29.23% 0.0029 226.65)` | Blackadder | white, 13.9 to 1 |
| 3 | `#303233` | `oklch(31.55% 0.0031 224.90)` | Tomcat | white, 12.8 to 1 |
| 4 | `#37393a` | `oklch(34.30% 0.0033 223.00)` | Green Black | white, 11.6 to 1 |
| 5 | `#3e4142` | `oklch(37.23% 0.0036 221.37)` | Deep Space | white, 10.3 to 1 |
| 6 | `#464849` | `oklch(40.10% 0.0040 220.47)` | Wrought Iron | white, 9.1 to 1 |
| 7 | `#4c5051` | `oklch(42.80% 0.0048 220.59)` | Black Ice | white, 8.1 to 1 |
| 8 | `#535759` | `oklch(45.51% 0.0059 221.53)` | Bovine | white, 7.2 to 1 |
| 9 | `#5a5f61` | `oklch(48.30% 0.0071 222.89)` | Anchor Grey | white, 6.4 to 1 |
| 10 | `#62686a` | `oklch(51.24% 0.0080 224.32)` | Stone Hearth | white, 5.6 to 1 |
| 11 | `#6b7173` | `oklch(54.40% 0.0083 225.45)` | Rich Pewter | white, 4.9 to 1 |
| 12 | `#767c7e` | `oklch(58.11% 0.0077 226.05)` | Gotham City | black, 4.9 to 1 |
| 13 | `#85898b` | `oklch(62.87% 0.0059 226.39)` | Monument | black, 5.9 to 1 |
| 14 | `#969899` | `oklch(67.87% 0.0036 226.57)` | Spanish Grey | black, 7.2 to 1 |
| 15 | `#a4a5a6` | `oklch(72.23% 0.0015 226.65)` | Rainy Grey | black, 8.5 to 1 |
| 16 | `#aeaeae` | `oklch(75.04% 0.0001 226.71)` | Industrial Age | black, 9.4 to 1 |
| 17 | `#afafaf` | `oklch(75.49% 0.0003 226.74)` | Aluminium Sky | black, 9.6 to 1 |
| 18 | `#a9aaab` | `oklch(73.72% 0.0018 226.42)` | Quartz Sand | black, 9 to 1 |
| 19 | `#9da0a2` | `oklch(70.45% 0.0041 225.99)` | Suzu Grey | black, 8 to 1 |
| 20 | `#8f9496` | `oklch(66.39% 0.0066 225.78)` | Kiwikiwi Grey | black, 6.8 to 1 |
| 21 | `#82888b` | `oklch(62.27% 0.0087 226.09)` | Magnetic Grey | black, 5.8 to 1 |
| 22 | `#777e81` | `oklch(58.72% 0.0099 227.27)` | Cowboy Spur | black, 5 to 1 |
| 23 | `#6c7377` | `oklch(55.15% 0.0105 229.56)` | Improbable | white, 4.8 to 1 |
| 24 | `#61686c` | `oklch(51.41% 0.0106 232.56)` | Thames Dusk | white, 5.6 to 1 |
| 25 | `#575e62` | `oklch(47.67% 0.0104 235.76)` | Pencil Point | white, 6.6 to 1 |
| 26 | `#4e5458` | `oklch(44.09% 0.0101 238.67)` | Trout | white, 7.7 to 1 |
| 27 | `#454b4f` | `oklch(40.82% 0.0095 240.78)` | Dead Forest | white, 8.8 to 1 |
| 28 | `#3e4246` | `oklch(37.64% 0.0087 242.17)` | Chimney Smoke | white, 10.1 to 1 |
| 29 | `#363a3d` | `oklch(34.52% 0.0074 243.15)` | Artist’s Charcoal | white, 11.5 to 1 |
| 30 | `#2f3235` | `oklch(31.67% 0.0061 243.83)` | Stiletto | white, 12.8 to 1 |
| 31 | `#2a2c2e` | `oklch(29.29% 0.0049 244.31)` | Bunker | white, 13.9 to 1 |
| 32 | `#26282a` | `oklch(27.56% 0.0041 244.72)` | Dire Wolf | white, 14.7 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #262829 0.000% 3.125%, #2a2c2d 3.125% 6.250%, #303233 6.250% 9.375%, #37393a 9.375% 12.500%, #3e4142 12.500% 15.625%, #464849 15.625% 18.750%, #4c5051 18.750% 21.875%, #535759 21.875% 25.000%, #5a5f61 25.000% 28.125%, #62686a 28.125% 31.250%, #6b7173 31.250% 34.375%, #767c7e 34.375% 37.500%, #85898b 37.500% 40.625%, #969899 40.625% 43.750%, #a4a5a6 43.750% 46.875%, #aeaeae 46.875% 50.000%, #afafaf 50.000% 53.125%, #a9aaab 53.125% 56.250%, #9da0a2 56.250% 59.375%, #8f9496 59.375% 62.500%, #82888b 62.500% 65.625%, #777e81 65.625% 68.750%, #6c7377 68.750% 71.875%, #61686c 71.875% 75.000%, #575e62 75.000% 78.125%, #4e5458 78.125% 81.250%, #454b4f 81.250% 84.375%, #3e4246 84.375% 87.500%, #363a3d 87.500% 90.625%, #2f3235 90.625% 93.750%, #2a2c2e 93.750% 96.875%, #26282a 96.875% 100.000%);
background: conic-gradient(from 45deg, oklch(27.56% 0.0028 227.81) 0.000% 3.125%, oklch(29.23% 0.0029 226.65) 3.125% 6.250%, oklch(31.55% 0.0031 224.90) 6.250% 9.375%, oklch(34.30% 0.0033 223.00) 9.375% 12.500%, oklch(37.23% 0.0036 221.37) 12.500% 15.625%, oklch(40.10% 0.0040 220.47) 15.625% 18.750%, oklch(42.80% 0.0048 220.59) 18.750% 21.875%, oklch(45.51% 0.0059 221.53) 21.875% 25.000%, oklch(48.30% 0.0071 222.89) 25.000% 28.125%, oklch(51.24% 0.0080 224.32) 28.125% 31.250%, oklch(54.40% 0.0083 225.45) 31.250% 34.375%, oklch(58.11% 0.0077 226.05) 34.375% 37.500%, oklch(62.87% 0.0059 226.39) 37.500% 40.625%, oklch(67.87% 0.0036 226.57) 40.625% 43.750%, oklch(72.23% 0.0015 226.65) 43.750% 46.875%, oklch(75.04% 0.0001 226.71) 46.875% 50.000%, oklch(75.49% 0.0003 226.74) 50.000% 53.125%, oklch(73.72% 0.0018 226.42) 53.125% 56.250%, oklch(70.45% 0.0041 225.99) 56.250% 59.375%, oklch(66.39% 0.0066 225.78) 59.375% 62.500%, oklch(62.27% 0.0087 226.09) 62.500% 65.625%, oklch(58.72% 0.0099 227.27) 65.625% 68.750%, oklch(55.15% 0.0105 229.56) 68.750% 71.875%, oklch(51.41% 0.0106 232.56) 71.875% 75.000%, oklch(47.67% 0.0104 235.76) 75.000% 78.125%, oklch(44.09% 0.0101 238.67) 78.125% 81.250%, oklch(40.82% 0.0095 240.78) 81.250% 84.375%, oklch(37.64% 0.0087 242.17) 84.375% 87.500%, oklch(34.52% 0.0074 243.15) 87.500% 90.625%, oklch(31.67% 0.0061 243.83) 90.625% 93.750%, oklch(29.29% 0.0049 244.31) 93.750% 96.875%, oklch(27.56% 0.0041 244.72) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.003 | 227.8 |
| 2 | 0.406 | 0.004 | 220.4 |
| 3 | 0.555 | 0.008 | 225.7 |
| 4 | 0.756 | 0 | 226.8 |
| 5 | 0.598 | 0.01 | 226.8 |
| 6 | 0.413 | 0.01 | 240.5 |
| 7 | 0.276 | 0.004 | 244.7 |

## In these collections

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

## Other forms

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