# Slate charcoal radial bands

Gray, blue and dark purple angular swatches with 15 colors: #9f9991, #96958d, #89908b, #7f8889, #758086, #697983, #5c7280, #516a7c, #4a6277, #445a71, #41536a, #404b65, #43435e, #463c56, #47384f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Gray, blue and dark purple angular swatches
- Seed: `kWrgoyzQTRcEPQk2EMJrpBGI`
- Page: https://grabient.com/kWrgoyzQTRcEPQk2EMJrpBGI?style=angularSwatches&steps=15&angle=210
- Drawn as: angular swatches, 15 steps, 210 degrees
- Kinds: light to dark, muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.8 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 | `#9f9991` | `oklch(68.50% 0.0138 71.02)` | Acier | black, 7.4 to 1 |
| 2 | `#96958d` | `oklch(66.87% 0.0126 106.23)` | Destroyer Grey | black, 6.9 to 1 |
| 3 | `#89908b` | `oklch(64.53% 0.0109 156.74)` | Sandstone Grey Green | black, 6.4 to 1 |
| 4 | `#7f8889` | `oklch(61.91% 0.0110 203.24)` | London Road | black, 5.7 to 1 |
| 5 | `#758086` | `oklch(59.36% 0.0152 228.53)` | Downing Slate | black, 5.2 to 1 |
| 6 | `#697983` | `oklch(56.65% 0.0240 236.46)` | Metal Grey | black, 4.6 to 1 |
| 7 | `#5c7280` | `oklch(53.87% 0.0340 236.95)` | Winter Harbor | white, 5 to 1 |
| 8 | `#516a7c` | `oklch(51.18% 0.0413 239.04)` | Turbulent Sea | white, 5.6 to 1 |
| 9 | `#4a6277` | `oklch(48.57% 0.0445 244.08)` | Plum Blue | white, 6.3 to 1 |
| 10 | `#445a71` | `oklch(46.00% 0.0454 248.84)` | Infinite Deep Sea | white, 7 to 1 |
| 11 | `#41536a` | `oklch(43.61% 0.0454 255.48)` | Into the Stratosphere | white, 7.8 to 1 |
| 12 | `#404b65` | `oklch(41.48% 0.0456 266.52)` | Sargasso Sea | white, 8.6 to 1 |
| 13 | `#43435e` | `oklch(39.49% 0.0452 283.37)` | Darkest Navy | white, 9.5 to 1 |
| 14 | `#463c56` | `oklch(37.79% 0.0445 300.84)` | Purple Velvet | white, 10.2 to 1 |
| 15 | `#47384f` | `oklch(36.61% 0.0441 313.01)` | Gothic Grape | white, 10.7 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #9f9991 0.000% 6.667%, #96958d 6.667% 13.333%, #89908b 13.333% 20.000%, #7f8889 20.000% 26.667%, #758086 26.667% 33.333%, #697983 33.333% 40.000%, #5c7280 40.000% 46.667%, #516a7c 46.667% 53.333%, #4a6277 53.333% 60.000%, #445a71 60.000% 66.667%, #41536a 66.667% 73.333%, #404b65 73.333% 80.000%, #43435e 80.000% 86.667%, #463c56 86.667% 93.333%, #47384f 93.333% 100.000%);
background: conic-gradient(from 210deg, oklch(68.50% 0.0138 71.02) 0.000% 6.667%, oklch(66.87% 0.0126 106.23) 6.667% 13.333%, oklch(64.53% 0.0109 156.74) 13.333% 20.000%, oklch(61.91% 0.0110 203.24) 20.000% 26.667%, oklch(59.36% 0.0152 228.53) 26.667% 33.333%, oklch(56.65% 0.0240 236.46) 33.333% 40.000%, oklch(53.87% 0.0340 236.95) 40.000% 46.667%, oklch(51.18% 0.0413 239.04) 46.667% 53.333%, oklch(48.57% 0.0445 244.08) 53.333% 60.000%, oklch(46.00% 0.0454 248.84) 60.000% 66.667%, oklch(43.61% 0.0454 255.48) 66.667% 73.333%, oklch(41.48% 0.0456 266.52) 73.333% 80.000%, oklch(39.49% 0.0452 283.37) 80.000% 86.667%, oklch(37.79% 0.0445 300.84) 86.667% 93.333%, oklch(36.61% 0.0441 313.01) 93.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.685 | 0.014 | 71 |
| 2 | 0.606 | 0.012 | 219 |
| 3 | 0.512 | 0.041 | 239 |
| 4 | 0.425 | 0.045 | 260.2 |
| 5 | 0.366 | 0.044 | 313 |

## In these collections

- [SoHo chic colors](https://grabient.com/soho-chic-colors)
- [Muted swatches](https://grabient.com/muted-swatches)

## Other forms

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