# Shadow weighted grayscale bands

Black, gray and white linear swatches with 6 colors: #020202, #0e0e0e, #242424, #555555, #a8a8a8, #f4f4f4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Black, gray and white linear swatches
- Seed: `kYFgBAFQA_6EAP-5AD_3QA__sAP-`
- Page: https://grabient.com/kYFgBAFQA_6EAP-5AD_3QA__sAP-?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: dark to light, neutral, dark
- Hues: achromatic
- Contrast of its darkest and lightest colors: 18.9 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 | `#020202` | `oklch(8.66% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |
| 2 | `#0e0e0e` | `oklch(16.54% 0.0000 89.88)` | Black Sheep | white, 19.2 to 1 |
| 3 | `#242424` | `oklch(25.98% 0.0000 89.88)` | Nero | white, 15.5 to 1 |
| 4 | `#555555` | `oklch(44.88% 0.0000 89.88)` | Stone Cold | white, 7.4 to 1 |
| 5 | `#a8a8a8` | `oklch(73.23% 0.0000 89.88)` | Uniform Grey | black, 8.8 to 1 |
| 6 | `#f4f4f4` | `oklch(96.85% 0.0000 89.88)` | Lighthouse | black, 19.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #020202 0.000% 16.667%, #0e0e0e 16.667% 33.333%, #242424 33.333% 50.000%, #555555 50.000% 66.667%, #a8a8a8 66.667% 83.333%, #f4f4f4 83.333% 100.000%);
background: linear-gradient(90deg, oklch(8.66% 0.0000 89.88) 0.000% 16.667%, oklch(16.54% 0.0000 89.88) 16.667% 33.333%, oklch(25.98% 0.0000 89.88) 33.333% 50.000%, oklch(44.88% 0.0000 89.88) 50.000% 66.667%, oklch(73.23% 0.0000 89.88) 66.667% 83.333%, oklch(96.85% 0.0000 89.88) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.087 | 0 | 90 |
| 2 | 0.165 | 0 | 90 |
| 3 | 0.26 | 0 | 90 |
| 4 | 0.449 | 0 | 90 |
| 5 | 0.732 | 0 | 90 |
| 6 | 0.969 | 0 | 90 |

## In these collections

- [Black and white swatches](https://grabient.com/black-and-white-swatches)

## Other forms

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