# Gray linear swatches

Gray linear swatches with 32 colors: #e5e6e7, #e2e3e4, #dee0e1, #dadcdd, #d5d8d9, #d0d3d4, #cacecf, #c4c9ca, #bec3c5, #b8bdbf, #b2b8ba, #acb2b4, #a5acae, #9fa7a9, #99a1a4, #939c9f, #8e979a, #889194, #818b8f, #7b8589, #747f83, #6e797e, #677378, #616d72, #5b686d, #556268, #4f5d63, #4a585e, #46545a, #415056, #3e4c53, #3b4a51. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kS6wGaVgRATKIQO`
- Page: https://grabient.com/kS6wGaVgRATKIQO?style=linearSwatches&steps=32&angle=180
- Drawn as: linear swatches, 32 steps, 180 degrees
- Kinds: light to dark, neutral
- Hues: achromatic
- Contrast of its darkest and lightest colors: 7.4 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 | `#e5e6e7` | `oklch(92.52% 0.0014 216.56)` | Moon Lily | black, 16.8 to 1 |
| 2 | `#e2e3e4` | `oklch(91.63% 0.0017 216.67)` | Cold Wind | black, 16.3 to 1 |
| 3 | `#dee0e1` | `oklch(90.56% 0.0021 216.78)` | Gentle Grey | black, 15.8 to 1 |
| 4 | `#dadcdd` | `oklch(89.33% 0.0026 216.90)` | Spring Thaw | black, 15.2 to 1 |
| 5 | `#d5d8d9` | `oklch(87.96% 0.0031 217.02)` | December Sky | black, 14.6 to 1 |
| 6 | `#d0d3d4` | `oklch(86.47% 0.0037 217.16)` | Elemental | black, 13.9 to 1 |
| 7 | `#cacecf` | `oklch(84.87% 0.0043 217.32)` | Whisper of Smoke | black, 13.2 to 1 |
| 8 | `#c4c9ca` | `oklch(83.18% 0.0050 217.48)` | Grey Screen | black, 12.5 to 1 |
| 9 | `#bec3c5` | `oklch(81.42% 0.0057 217.67)` | Foil | black, 11.8 to 1 |
| 10 | `#b8bdbf` | `oklch(79.61% 0.0064 217.87)` | Oyster Mushroom | black, 11.1 to 1 |
| 11 | `#b2b8ba` | `oklch(77.76% 0.0071 218.09)` | Autumn Fog | black, 10.4 to 1 |
| 12 | `#acb2b4` | `oklch(75.89% 0.0078 218.33)` | High Rise | black, 9.7 to 1 |
| 13 | `#a5acae` | `oklch(74.02% 0.0086 218.60)` | Gull Grey | black, 9.1 to 1 |
| 14 | `#9fa7a9` | `oklch(72.17% 0.0093 218.89)` | Chance of Rain | black, 8.5 to 1 |
| 15 | `#99a1a4` | `oklch(70.35% 0.0100 219.20)` | Metropolis Mood | black, 7.9 to 1 |
| 16 | `#939c9f` | `oklch(68.58% 0.0107 219.55)` | Dustblu | black, 7.4 to 1 |
| 17 | `#8e979a` | `oklch(66.85% 0.0114 219.93)` | Steely Grey | black, 7 to 1 |
| 18 | `#889194` | `oklch(65.02% 0.0121 220.38)` | Blue Driftwood | black, 6.5 to 1 |
| 19 | `#818b8f` | `oklch(63.08% 0.0128 220.89)` | Necron Compound | black, 6 to 1 |
| 20 | `#7b8589` | `oklch(61.07% 0.0136 221.45)` | Garrison Grey | black, 5.5 to 1 |
| 21 | `#747f83` | `oklch(59.00% 0.0145 222.05)` | Peak Point | black, 5.1 to 1 |
| 22 | `#6e797e` | `oklch(56.90% 0.0153 222.69)` | Iron Frost | black, 4.7 to 1 |
| 23 | `#677378` | `oklch(54.79% 0.0161 223.34)` | Rain Shadow | white, 4.8 to 1 |
| 24 | `#616d72` | `oklch(52.71% 0.0169 223.99)` | Slate Tile | white, 5.3 to 1 |
| 25 | `#5b686d` | `oklch(50.67% 0.0177 224.65)` | Made of Steel | white, 5.7 to 1 |
| 26 | `#556268` | `oklch(48.70% 0.0185 225.29)` | Gunmetal | white, 6.3 to 1 |
| 27 | `#4f5d63` | `oklch(46.82% 0.0193 225.90)` | Marine Magic | white, 6.8 to 1 |
| 28 | `#4a585e` | `oklch(45.07% 0.0200 226.47)` | Submarine Grey | white, 7.3 to 1 |
| 29 | `#46545a` | `oklch(43.46% 0.0206 227.00)` | Vermont Slate | white, 7.8 to 1 |
| 30 | `#415056` | `oklch(42.03% 0.0212 227.47)` | High Salute | white, 8.3 to 1 |
| 31 | `#3e4c53` | `oklch(40.78% 0.0216 227.87)` | Atomic | white, 8.8 to 1 |
| 32 | `#3b4a51` | `oklch(39.76% 0.0220 228.19)` | Atomic | white, 9.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #e5e6e7 0.000% 3.125%, #e2e3e4 3.125% 6.250%, #dee0e1 6.250% 9.375%, #dadcdd 9.375% 12.500%, #d5d8d9 12.500% 15.625%, #d0d3d4 15.625% 18.750%, #cacecf 18.750% 21.875%, #c4c9ca 21.875% 25.000%, #bec3c5 25.000% 28.125%, #b8bdbf 28.125% 31.250%, #b2b8ba 31.250% 34.375%, #acb2b4 34.375% 37.500%, #a5acae 37.500% 40.625%, #9fa7a9 40.625% 43.750%, #99a1a4 43.750% 46.875%, #939c9f 46.875% 50.000%, #8e979a 50.000% 53.125%, #889194 53.125% 56.250%, #818b8f 56.250% 59.375%, #7b8589 59.375% 62.500%, #747f83 62.500% 65.625%, #6e797e 65.625% 68.750%, #677378 68.750% 71.875%, #616d72 71.875% 75.000%, #5b686d 75.000% 78.125%, #556268 78.125% 81.250%, #4f5d63 81.250% 84.375%, #4a585e 84.375% 87.500%, #46545a 87.500% 90.625%, #415056 90.625% 93.750%, #3e4c53 93.750% 96.875%, #3b4a51 96.875% 100.000%);
background: linear-gradient(180deg, oklch(92.52% 0.0014 216.56) 0.000% 3.125%, oklch(91.63% 0.0017 216.67) 3.125% 6.250%, oklch(90.56% 0.0021 216.78) 6.250% 9.375%, oklch(89.33% 0.0026 216.90) 9.375% 12.500%, oklch(87.96% 0.0031 217.02) 12.500% 15.625%, oklch(86.47% 0.0037 217.16) 15.625% 18.750%, oklch(84.87% 0.0043 217.32) 18.750% 21.875%, oklch(83.18% 0.0050 217.48) 21.875% 25.000%, oklch(81.42% 0.0057 217.67) 25.000% 28.125%, oklch(79.61% 0.0064 217.87) 28.125% 31.250%, oklch(77.76% 0.0071 218.09) 31.250% 34.375%, oklch(75.89% 0.0078 218.33) 34.375% 37.500%, oklch(74.02% 0.0086 218.60) 37.500% 40.625%, oklch(72.17% 0.0093 218.89) 40.625% 43.750%, oklch(70.35% 0.0100 219.20) 43.750% 46.875%, oklch(68.58% 0.0107 219.55) 46.875% 50.000%, oklch(66.85% 0.0114 219.93) 50.000% 53.125%, oklch(65.02% 0.0121 220.38) 53.125% 56.250%, oklch(63.08% 0.0128 220.89) 56.250% 59.375%, oklch(61.07% 0.0136 221.45) 59.375% 62.500%, oklch(59.00% 0.0145 222.05) 62.500% 65.625%, oklch(56.90% 0.0153 222.69) 65.625% 68.750%, oklch(54.79% 0.0161 223.34) 68.750% 71.875%, oklch(52.71% 0.0169 223.99) 71.875% 75.000%, oklch(50.67% 0.0177 224.65) 75.000% 78.125%, oklch(48.70% 0.0185 225.29) 78.125% 81.250%, oklch(46.82% 0.0193 225.90) 81.250% 84.375%, oklch(45.07% 0.0200 226.47) 84.375% 87.500%, oklch(43.46% 0.0206 227.00) 87.500% 90.625%, oklch(42.03% 0.0212 227.47) 90.625% 93.750%, oklch(40.78% 0.0216 227.87) 93.750% 96.875%, oklch(39.76% 0.0220 228.19) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.925 | 0.001 | 216.6 |
| 2 | 0.677 | 0.011 | 219.7 |
| 3 | 0.398 | 0.022 | 228.2 |

## In these collections

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

## Other forms

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