# Seamless gray angular swatches

Seamless gray angular swatches with 32 colors: #c8c4ce, #c5c1ca, #c0bcc6, #bab6c0, #b4b0ba, #ada9b3, #a5a1ac, #9e9aa5, #96929d, #8f8b97, #888590, #827f8a, #7d7a85, #797681, #76737e, #74717d, #74717d, #75737e, #787681, #7c7a84, #817f89, #87858f, #8e8b95, #95929c, #9c9aa2, #a3a1a9, #aaa9b0, #b1b0b7, #b8b6bd, #bdbcc2, #c2c0c7, #c5c4ca. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kS0grZxoa--iDP8`
- Page: https://grabient.com/kS0grZxoa--iDP8?style=angularSwatches&steps=32&angle=225
- Drawn as: angular swatches, 32 steps, 225 degrees
- Kinds: neutral, seamless
- Hues: achromatic
- Contrast of its darkest and lightest colors: 2.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 | `#c8c4ce` | `oklch(82.68% 0.0138 305.86)` | Posture & Pose | black, 12.2 to 1 |
| 2 | `#c5c1ca` | `oklch(81.59% 0.0140 305.54)` | Grape Mist | black, 11.8 to 1 |
| 3 | `#c0bcc6` | `oklch(80.11% 0.0142 305.13)` | Great White | black, 11.2 to 1 |
| 4 | `#bab6c0` | `oklch(78.31% 0.0145 304.64)` | Best in Show | black, 10.5 to 1 |
| 5 | `#b4b0ba` | `oklch(76.26% 0.0149 304.10)` | Veiled Delight | black, 9.8 to 1 |
| 6 | `#ada9b3` | `oklch(74.02% 0.0153 303.50)` | Velvet Grey | black, 9 to 1 |
| 7 | `#a5a1ac` | `oklch(71.66% 0.0157 302.86)` | Spun Pearl | black, 8.3 to 1 |
| 8 | `#9e9aa5` | `oklch(69.24% 0.0161 302.20)` | Colorado Peak | black, 7.6 to 1 |
| 9 | `#96929d` | `oklch(66.82% 0.0166 301.53)` | Duchess Lilac | black, 6.9 to 1 |
| 10 | `#8f8b97` | `oklch(64.48% 0.0169 300.86)` | Alaitoc Blue | black, 6.3 to 1 |
| 11 | `#888590` | `oklch(62.27% 0.0173 300.20)` | Old Amethyst | black, 5.7 to 1 |
| 12 | `#827f8a` | `oklch(60.27% 0.0176 299.57)` | Soft Savvy | black, 5.3 to 1 |
| 13 | `#7d7a85` | `oklch(58.53% 0.0178 298.98)` | Silver Surfer | black, 4.9 to 1 |
| 14 | `#797681` | `oklch(57.13% 0.0180 298.44)` | Dried Lavender Flowers | black, 4.7 to 1 |
| 15 | `#76737e` | `oklch(56.13% 0.0180 297.97)` | Dried Lavender Flowers | white, 4.6 to 1 |
| 16 | `#74717d` | `oklch(55.59% 0.0180 297.57)` | Pearl Blackberry | white, 4.7 to 1 |
| 17 | `#74717d` | `oklch(55.57% 0.0178 297.26)` | Pearl Blackberry | white, 4.7 to 1 |
| 18 | `#75737e` | `oklch(56.09% 0.0175 297.01)` | Pearl Blackberry | white, 4.6 to 1 |
| 19 | `#787681` | `oklch(57.06% 0.0170 296.80)` | Dried Lavender Flowers | black, 4.6 to 1 |
| 20 | `#7c7a84` | `oklch(58.44% 0.0165 296.65)` | Infamous | black, 4.9 to 1 |
| 21 | `#817f89` | `oklch(60.14% 0.0158 296.53)` | Soft Savvy | black, 5.3 to 1 |
| 22 | `#87858f` | `oklch(62.12% 0.0151 296.44)` | Old Amethyst | black, 5.7 to 1 |
| 23 | `#8e8b95` | `oklch(64.29% 0.0144 296.39)` | Alaitoc Blue | black, 6.2 to 1 |
| 24 | `#95929c` | `oklch(66.61% 0.0136 296.35)` | Lilac Fields | black, 6.8 to 1 |
| 25 | `#9c9aa2` | `oklch(68.99% 0.0127 296.34)` | Colorado Peak | black, 7.5 to 1 |
| 26 | `#a3a1a9` | `oklch(71.39% 0.0119 296.34)` | Masterpiece | black, 8.2 to 1 |
| 27 | `#aaa9b0` | `oklch(73.73% 0.0112 296.35)` | Modern Lavender | black, 8.9 to 1 |
| 28 | `#b1b0b7` | `oklch(75.94% 0.0104 296.36)` | Buffed Plum | black, 9.7 to 1 |
| 29 | `#b8b6bd` | `oklch(77.97% 0.0097 296.37)` | Best in Show | black, 10.4 to 1 |
| 30 | `#bdbcc2` | `oklch(79.75% 0.0091 296.38)` | Silver Fox | black, 11.1 to 1 |
| 31 | `#c2c0c7` | `oklch(81.21% 0.0086 296.37)` | Ghost | black, 11.6 to 1 |
| 32 | `#c5c4ca` | `oklch(82.28% 0.0083 296.35)` | Runefang Steel | black, 12.1 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #c8c4ce 0.000% 3.125%, #c5c1ca 3.125% 6.250%, #c0bcc6 6.250% 9.375%, #bab6c0 9.375% 12.500%, #b4b0ba 12.500% 15.625%, #ada9b3 15.625% 18.750%, #a5a1ac 18.750% 21.875%, #9e9aa5 21.875% 25.000%, #96929d 25.000% 28.125%, #8f8b97 28.125% 31.250%, #888590 31.250% 34.375%, #827f8a 34.375% 37.500%, #7d7a85 37.500% 40.625%, #797681 40.625% 43.750%, #76737e 43.750% 46.875%, #74717d 46.875% 50.000%, #74717d 50.000% 53.125%, #75737e 53.125% 56.250%, #787681 56.250% 59.375%, #7c7a84 59.375% 62.500%, #817f89 62.500% 65.625%, #87858f 65.625% 68.750%, #8e8b95 68.750% 71.875%, #95929c 71.875% 75.000%, #9c9aa2 75.000% 78.125%, #a3a1a9 78.125% 81.250%, #aaa9b0 81.250% 84.375%, #b1b0b7 84.375% 87.500%, #b8b6bd 87.500% 90.625%, #bdbcc2 90.625% 93.750%, #c2c0c7 93.750% 96.875%, #c5c4ca 96.875% 100.000%);
background: conic-gradient(from 225deg, oklch(82.68% 0.0138 305.86) 0.000% 3.125%, oklch(81.59% 0.0140 305.54) 3.125% 6.250%, oklch(80.11% 0.0142 305.13) 6.250% 9.375%, oklch(78.31% 0.0145 304.64) 9.375% 12.500%, oklch(76.26% 0.0149 304.10) 12.500% 15.625%, oklch(74.02% 0.0153 303.50) 15.625% 18.750%, oklch(71.66% 0.0157 302.86) 18.750% 21.875%, oklch(69.24% 0.0161 302.20) 21.875% 25.000%, oklch(66.82% 0.0166 301.53) 25.000% 28.125%, oklch(64.48% 0.0169 300.86) 28.125% 31.250%, oklch(62.27% 0.0173 300.20) 31.250% 34.375%, oklch(60.27% 0.0176 299.57) 34.375% 37.500%, oklch(58.53% 0.0178 298.98) 37.500% 40.625%, oklch(57.13% 0.0180 298.44) 40.625% 43.750%, oklch(56.13% 0.0180 297.97) 43.750% 46.875%, oklch(55.59% 0.0180 297.57) 46.875% 50.000%, oklch(55.57% 0.0178 297.26) 50.000% 53.125%, oklch(56.09% 0.0175 297.01) 53.125% 56.250%, oklch(57.06% 0.0170 296.80) 56.250% 59.375%, oklch(58.44% 0.0165 296.65) 59.375% 62.500%, oklch(60.14% 0.0158 296.53) 62.500% 65.625%, oklch(62.12% 0.0151 296.44) 65.625% 68.750%, oklch(64.29% 0.0144 296.39) 68.750% 71.875%, oklch(66.61% 0.0136 296.35) 71.875% 75.000%, oklch(68.99% 0.0127 296.34) 75.000% 78.125%, oklch(71.39% 0.0119 296.34) 78.125% 81.250%, oklch(73.73% 0.0112 296.35) 81.250% 84.375%, oklch(75.94% 0.0104 296.36) 84.375% 87.500%, oklch(77.97% 0.0097 296.37) 87.500% 90.625%, oklch(79.75% 0.0091 296.38) 90.625% 93.750%, oklch(81.21% 0.0086 296.37) 93.750% 96.875%, oklch(82.28% 0.0083 296.35) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.827 | 0.014 | 305.9 |
| 2 | 0.555 | 0.018 | 297.4 |
| 3 | 0.823 | 0.008 | 296.3 |

## In these collections

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

## Other forms

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