# Black, gray and dark gray linear gradient

Black, gray and dark gray linear gradient with 32 colors: #222a30, #353d43, #545c62, #7a8288, #a1a9af, #c3cbd0, #d6dee4, #d4dde4, #bfcad3, #a0adb8, #7f8e9a, #647482, #566675, #5a6a78, #6e7d8a, #8e9ba5, #b3bdc4, #d6dde2, #eff4f7, #f5f9fc, #ebf1f4, #d7dfe4, #bdc7cf, #a2aeb8, #8997a2, #768491, #667480, #57636e, #49535d, #3c454e, #323941, #2b3138. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYRwuscoS_b-LQP8gj6zolA6eFwK`
- Page: https://grabient.com/kYRwuscoS_b-LQP8gj6zolA6eFwK?steps=32&angle=120
- Drawn as: linear gradient, 32 steps, 120 degrees
- Kinds: light center, neutral, cool
- Hues: achromatic
- Contrast of its darkest and lightest colors: 13.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 | `#222a30` | `oklch(27.95% 0.0152 241.87)` | Cinder | white, 14.5 to 1 |
| 2 | `#353d43` | `oklch(35.57% 0.0146 241.29)` | Ferry | white, 11 to 1 |
| 3 | `#545c62` | `oklch(47.02% 0.0137 240.38)` | Turbulence | white, 6.7 to 1 |
| 4 | `#7a8288` | `oklch(60.23% 0.0128 239.34)` | Wolf | black, 5.3 to 1 |
| 5 | `#a1a9af` | `oklch(73.12% 0.0120 238.38)` | Heavy Blue Grey | black, 8.8 to 1 |
| 6 | `#c3cbd0` | `oklch(83.62% 0.0117 237.73)` | Stone Golem | black, 12.7 to 1 |
| 7 | `#d6dee4` | `oklch(89.67% 0.0122 237.59)` | Billowing Clouds | black, 15.4 to 1 |
| 8 | `#d4dde4` | `oklch(89.35% 0.0140 238.26)` | A Dime a Dozen | black, 15.3 to 1 |
| 9 | `#bfcad3` | `oklch(83.34% 0.0174 239.74)` | Upward | black, 12.6 to 1 |
| 10 | `#a0adb8` | `oklch(74.04% 0.0215 241.67)` | Shower | black, 9.1 to 1 |
| 11 | `#7f8e9a` | `oklch(63.83% 0.0255 243.63)` | London Square | black, 6.2 to 1 |
| 12 | `#647482` | `oklch(55.12% 0.0288 245.23)` | Wharf View | white, 4.8 to 1 |
| 13 | `#566675` | `oklch(50.30% 0.0303 246.07)` | Durango Blue | white, 5.8 to 1 |
| 14 | `#5a6a78` | `oklch(51.52% 0.0294 245.75)` | Blue Insignia | white, 5.5 to 1 |
| 15 | `#6e7d8a` | `oklch(58.21% 0.0259 244.26)` | Slate Expectations | black, 4.9 to 1 |
| 16 | `#8e9ba5` | `oklch(68.21% 0.0207 242.04)` | Canadian Lake | black, 7.3 to 1 |
| 17 | `#b3bdc4` | `oklch(79.34% 0.0150 239.59)` | Soothing Breeze | black, 11 to 1 |
| 18 | `#d6dde2` | `oklch(89.44% 0.0098 237.38)` | Mystic Pool | black, 15.3 to 1 |
| 19 | `#eff4f7` | `oklch(96.34% 0.0064 235.89)` | Child of Light | black, 18.9 to 1 |
| 20 | `#f5f9fc` | `oklch(98.06% 0.0056 235.55)` | Zhēn Zhū Bái Pearl | black, 19.8 to 1 |
| 21 | `#ebf1f4` | `oklch(95.45% 0.0075 236.20)` | Powder White | black, 18.4 to 1 |
| 22 | `#d7dfe4` | `oklch(89.88% 0.0111 237.52)` | Billowing Clouds | black, 15.5 to 1 |
| 23 | `#bdc7cf` | `oklch(82.51% 0.0156 239.25)` | Cemetery Ash | black, 12.2 to 1 |
| 24 | `#a2aeb8` | `oklch(74.44% 0.0200 241.12)` | How Handsome | black, 9.2 to 1 |
| 25 | `#8997a2` | `oklch(66.83% 0.0234 242.86)` | Wet Seal | black, 6.9 to 1 |
| 26 | `#768491` | `oklch(60.72% 0.0249 244.23)` | Forever Denim | black, 5.4 to 1 |
| 27 | `#667480` | `oklch(55.06% 0.0246 245.44)` | Wharf View | white, 4.8 to 1 |
| 28 | `#57636e` | `oklch(49.26% 0.0231 246.65)` | Intermediate Blue | white, 6.1 to 1 |
| 29 | `#49535d` | `oklch(43.65% 0.0210 247.80)` | Evening Cityscape | white, 7.8 to 1 |
| 30 | `#3c454e` | `oklch(38.54% 0.0186 248.83)` | Blackbird | white, 9.7 to 1 |
| 31 | `#323941` | `oklch(34.25% 0.0165 249.69)` | Tempest in a Teapot | white, 11.6 to 1 |
| 32 | `#2b3138` | `oklch(31.10% 0.0152 250.33)` | Suit Blue | white, 13 to 1 |

## CSS

```css
background: linear-gradient(120deg, #222a30 0.0%, #353d43 3.2%, #545c62 6.5%, #7a8288 9.7%, #a1a9af 12.9%, #c3cbd0 16.1%, #d6dee4 19.4%, #d4dde4 22.6%, #bfcad3 25.8%, #a0adb8 29.0%, #7f8e9a 32.3%, #647482 35.5%, #566675 38.7%, #5a6a78 41.9%, #6e7d8a 45.2%, #8e9ba5 48.4%, #b3bdc4 51.6%, #d6dde2 54.8%, #eff4f7 58.1%, #f5f9fc 61.3%, #ebf1f4 64.5%, #d7dfe4 67.7%, #bdc7cf 71.0%, #a2aeb8 74.2%, #8997a2 77.4%, #768491 80.6%, #667480 83.9%, #57636e 87.1%, #49535d 90.3%, #3c454e 93.5%, #323941 96.8%, #2b3138 100.0%);
background: linear-gradient(120deg in oklch, oklch(27.95% 0.0152 241.87) 0.0%, oklch(35.57% 0.0146 241.29) 3.2%, oklch(47.02% 0.0137 240.38) 6.5%, oklch(60.23% 0.0128 239.34) 9.7%, oklch(73.12% 0.0120 238.38) 12.9%, oklch(83.62% 0.0117 237.73) 16.1%, oklch(89.67% 0.0122 237.59) 19.4%, oklch(89.35% 0.0140 238.26) 22.6%, oklch(83.34% 0.0174 239.74) 25.8%, oklch(74.04% 0.0215 241.67) 29.0%, oklch(63.83% 0.0255 243.63) 32.3%, oklch(55.12% 0.0288 245.23) 35.5%, oklch(50.30% 0.0303 246.07) 38.7%, oklch(51.52% 0.0294 245.75) 41.9%, oklch(58.21% 0.0259 244.26) 45.2%, oklch(68.21% 0.0207 242.04) 48.4%, oklch(79.34% 0.0150 239.59) 51.6%, oklch(89.44% 0.0098 237.38) 54.8%, oklch(96.34% 0.0064 235.89) 58.1%, oklch(98.06% 0.0056 235.55) 61.3%, oklch(95.45% 0.0075 236.20) 64.5%, oklch(89.88% 0.0111 237.52) 67.7%, oklch(82.51% 0.0156 239.25) 71.0%, oklch(74.44% 0.0200 241.12) 74.2%, oklch(66.83% 0.0234 242.86) 77.4%, oklch(60.72% 0.0249 244.23) 80.6%, oklch(55.06% 0.0246 245.44) 83.9%, oklch(49.26% 0.0231 246.65) 87.1%, oklch(43.65% 0.0210 247.80) 90.3%, oklch(38.54% 0.0186 248.83) 93.5%, oklch(34.25% 0.0165 249.69) 96.8%, oklch(31.10% 0.0152 250.33) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.015 | 241.9 |
| 2 | 0.902 | 0.012 | 237.6 |
| 3 | 0.5 | 0.03 | 246.1 |
| 4 | 0.98 | 0.006 | 235.5 |
| 5 | 0.618 | 0.025 | 244 |
| 6 | 0.311 | 0.015 | 250.3 |

## In these collections

- [Metallic gradients](https://grabient.com/metallic-gradients)

## Other forms

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