# Monochrome gray to blue linear gradient

Monochrome gray to blue linear gradient with 32 colors: #bbbbbb, #b8b9ba, #b5b6ba, #b1b3b9, #acb0b9, #a7adb8, #a1aab7, #9aa6b6, #94a2b5, #8d9fb3, #869bb2, #7e98b0, #7794ae, #7190ac, #6b8daa, #6589a7, #6186a5, #5e82a3, #5a7ea0, #587a9e, #56759b, #557198, #546c94, #536891, #53638d, #535f8a, #535b86, #535783, #52547f, #52517c, #524e79, #514c77. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSyQDAzZa8zgZxS`
- Page: https://grabient.com/kSyQDAzZa8zgZxS?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light to dark, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.1 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 | `#bbbbbb` | `oklch(79.13% 0.0000 89.88)` | Gravel Fint | black, 10.9 to 1 |
| 2 | `#b8b9ba` | `oklch(78.47% 0.0024 269.61)` | Rocky Shelter | black, 10.6 to 1 |
| 3 | `#b5b6ba` | `oklch(77.67% 0.0054 268.07)` | Silver Bullet | black, 10.3 to 1 |
| 4 | `#b1b3b9` | `oklch(76.75% 0.0089 266.18)` | A Month of Sundays | black, 10 to 1 |
| 5 | `#acb0b9` | `oklch(75.72% 0.0129 264.01)` | Buffed Plum | black, 9.6 to 1 |
| 6 | `#a7adb8` | `oklch(74.59% 0.0173 261.64)` | Jacaranda Light | black, 9.3 to 1 |
| 7 | `#a1aab7` | `oklch(73.39% 0.0220 259.15)` | Ridge View | black, 8.9 to 1 |
| 8 | `#9aa6b6` | `oklch(72.12% 0.0268 256.61)` | Acier Tint | black, 8.5 to 1 |
| 9 | `#94a2b5` | `oklch(70.80% 0.0317 254.10)` | Canary Wharf | black, 8.1 to 1 |
| 10 | `#8d9fb3` | `oklch(69.46% 0.0366 251.71)` | Foghorn | black, 7.7 to 1 |
| 11 | `#869bb2` | `oklch(68.10% 0.0415 249.50)` | Tsunami | black, 7.3 to 1 |
| 12 | `#7e98b0` | `oklch(66.74% 0.0461 247.57)` | Dyer’s Woad | black, 6.9 to 1 |
| 13 | `#7794ae` | `oklch(65.39% 0.0504 245.98)` | Cranberry Blue | black, 6.6 to 1 |
| 14 | `#7190ac` | `oklch(64.08% 0.0544 244.82)` | Identity | black, 6.3 to 1 |
| 15 | `#6b8daa` | `oklch(62.81% 0.0579 244.16)` | Scanda | black, 6 to 1 |
| 16 | `#6589a7` | `oklch(61.60% 0.0608 244.08)` | Sea Crystal | black, 5.7 to 1 |
| 17 | `#6186a5` | `oklch(60.45% 0.0631 244.67)` | Moody Indigo | black, 5.4 to 1 |
| 18 | `#5e82a3` | `oklch(59.27% 0.0650 245.97)` | Bluestone Path | black, 5.2 to 1 |
| 19 | `#5a7ea0` | `oklch(58.04% 0.0665 247.91)` | Goddess of the Nile | black, 4.9 to 1 |
| 20 | `#587a9e` | `oklch(56.79% 0.0677 250.39)` | Blue Plate | black, 4.6 to 1 |
| 21 | `#56759b` | `oklch(55.52% 0.0686 253.32)` | Yawl | white, 4.7 to 1 |
| 22 | `#557198` | `oklch(54.24% 0.0692 256.61)` | Clean Slate | white, 5 to 1 |
| 23 | `#546c94` | `oklch(52.98% 0.0697 260.16)` | Charter Blue | white, 5.2 to 1 |
| 24 | `#536891` | `oklch(51.73% 0.0700 263.88)` | UCLA Blue | white, 5.5 to 1 |
| 25 | `#53638d` | `oklch(50.52% 0.0701 267.68)` | Karmic Grape | white, 5.9 to 1 |
| 26 | `#535f8a` | `oklch(49.36% 0.0701 271.46)` | Karmic Grape | white, 6.2 to 1 |
| 27 | `#535b86` | `oklch(48.26% 0.0701 275.14)` | Marlin | white, 6.5 to 1 |
| 28 | `#535783` | `oklch(47.23% 0.0701 278.62)` | Mauve Dusk | white, 6.8 to 1 |
| 29 | `#52547f` | `oklch(46.29% 0.0700 281.80)` | Dusk | white, 7.1 to 1 |
| 30 | `#52517c` | `oklch(45.44% 0.0700 284.60)` | Tangent Periwinkle | white, 7.4 to 1 |
| 31 | `#524e79` | `oklch(44.71% 0.0701 286.92)` | Skipper Blue | white, 7.6 to 1 |
| 32 | `#514c77` | `oklch(44.09% 0.0703 288.67)` | Red Cabbage | white, 7.9 to 1 |

## CSS

```css
background: linear-gradient(180deg, #bbbbbb 0.0%, #b8b9ba 3.2%, #b5b6ba 6.5%, #b1b3b9 9.7%, #acb0b9 12.9%, #a7adb8 16.1%, #a1aab7 19.4%, #9aa6b6 22.6%, #94a2b5 25.8%, #8d9fb3 29.0%, #869bb2 32.3%, #7e98b0 35.5%, #7794ae 38.7%, #7190ac 41.9%, #6b8daa 45.2%, #6589a7 48.4%, #6186a5 51.6%, #5e82a3 54.8%, #5a7ea0 58.1%, #587a9e 61.3%, #56759b 64.5%, #557198 67.7%, #546c94 71.0%, #536891 74.2%, #53638d 77.4%, #535f8a 80.6%, #535b86 83.9%, #535783 87.1%, #52547f 90.3%, #52517c 93.5%, #524e79 96.8%, #514c77 100.0%);
background: linear-gradient(180deg in oklch, oklch(79.13% 0.0000 89.88) 0.0%, oklch(78.47% 0.0024 269.61) 3.2%, oklch(77.67% 0.0054 268.07) 6.5%, oklch(76.75% 0.0089 266.18) 9.7%, oklch(75.72% 0.0129 264.01) 12.9%, oklch(74.59% 0.0173 261.64) 16.1%, oklch(73.39% 0.0220 259.15) 19.4%, oklch(72.12% 0.0268 256.61) 22.6%, oklch(70.80% 0.0317 254.10) 25.8%, oklch(69.46% 0.0366 251.71) 29.0%, oklch(68.10% 0.0415 249.50) 32.3%, oklch(66.74% 0.0461 247.57) 35.5%, oklch(65.39% 0.0504 245.98) 38.7%, oklch(64.08% 0.0544 244.82) 41.9%, oklch(62.81% 0.0579 244.16) 45.2%, oklch(61.60% 0.0608 244.08) 48.4%, oklch(60.45% 0.0631 244.67) 51.6%, oklch(59.27% 0.0650 245.97) 54.8%, oklch(58.04% 0.0665 247.91) 58.1%, oklch(56.79% 0.0677 250.39) 61.3%, oklch(55.52% 0.0686 253.32) 64.5%, oklch(54.24% 0.0692 256.61) 67.7%, oklch(52.98% 0.0697 260.16) 71.0%, oklch(51.73% 0.0700 263.88) 74.2%, oklch(50.52% 0.0701 267.68) 77.4%, oklch(49.36% 0.0701 271.46) 80.6%, oklch(48.26% 0.0701 275.14) 83.9%, oklch(47.23% 0.0701 278.62) 87.1%, oklch(46.29% 0.0700 281.80) 90.3%, oklch(45.44% 0.0700 284.60) 93.5%, oklch(44.71% 0.0701 286.92) 96.8%, oklch(44.09% 0.0703 288.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.791 | 0 | 270.7 |
| 2 | 0.61 | 0.062 | 244.3 |
| 3 | 0.441 | 0.07 | 288.7 |

## In these collections

- [Cool swatches](https://grabient.com/cool-swatches)
- [Soft neutral gradients](https://grabient.com/soft-neutral-gradients)
- [Blue and purple swatches](https://grabient.com/blue-and-purple-swatches)
- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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