# Gray, navy and black linear gradient

Gray, navy and black linear gradient with 32 colors: #3a4752, #394550, #37444e, #36424d, #34404a, #323d48, #303b45, #2e3843, #2b3640, #29333d, #27303a, #242e38, #222b35, #202932, #1e2630, #1c242d, #1a222b, #182028, #161d26, #141b23, #121920, #10161e, #0e141b, #0d1219, #0b1016, #090e14, #080c12, #060a10, #05080e, #05070c, #04060b, #04060a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSYxKuIAfAw8EwK`
- Page: https://grabient.com/kSYxKuIAfAw8EwK?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: neutral, dark, cool
- Hues: achromatic
- Contrast of its darkest and lightest colors: 2.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 | `#3a4752` | `oklch(38.98% 0.0248 244.69)` | Limed Spruce | white, 9.5 to 1 |
| 2 | `#394550` | `oklch(38.48% 0.0247 244.96)` | Azul Petróleo | white, 9.7 to 1 |
| 3 | `#37444e` | `oklch(37.87% 0.0245 245.29)` | Azul Petróleo | white, 10 to 1 |
| 4 | `#36424d` | `oklch(37.17% 0.0243 245.67)` | Midnight Navy | white, 10.3 to 1 |
| 5 | `#34404a` | `oklch(36.39% 0.0241 246.10)` | Big Stone | white, 10.6 to 1 |
| 6 | `#323d48` | `oklch(35.54% 0.0239 246.56)` | Pitch Cobalt | white, 11 to 1 |
| 7 | `#303b45` | `oklch(34.63% 0.0237 247.06)` | Biro Blue | white, 11.4 to 1 |
| 8 | `#2e3843` | `oklch(33.67% 0.0234 247.58)` | Royal Battle | white, 11.8 to 1 |
| 9 | `#2b3640` | `oklch(32.67% 0.0232 248.13)` | Anchorman | white, 12.3 to 1 |
| 10 | `#29333d` | `oklch(31.65% 0.0229 248.68)` | Anchors Aweigh | white, 12.8 to 1 |
| 11 | `#27303a` | `oklch(30.62% 0.0226 249.24)` | Chimney Sweep | white, 13.3 to 1 |
| 12 | `#242e38` | `oklch(29.58% 0.0223 249.79)` | Freinacht Black | white, 13.8 to 1 |
| 13 | `#222b35` | `oklch(28.55% 0.0220 250.34)` | Sky Captain | white, 14.3 to 1 |
| 14 | `#202932` | `oklch(27.55% 0.0216 250.87)` | Infinity | white, 14.7 to 1 |
| 15 | `#1e2630` | `oklch(26.57% 0.0213 251.38)` | Abyssal Anchorfish Blue | white, 15.2 to 1 |
| 16 | `#1c242d` | `oklch(25.64% 0.0209 251.86)` | Dark | white, 15.6 to 1 |
| 17 | `#1a222b` | `oklch(24.75% 0.0205 252.31)` | Dark | white, 16 to 1 |
| 18 | `#182028` | `oklch(23.83% 0.0200 252.77)` | Satin Deep Black | white, 16.5 to 1 |
| 19 | `#161d26` | `oklch(22.87% 0.0195 253.24)` | Coarse Wool | white, 16.9 to 1 |
| 20 | `#141b23` | `oklch(21.88% 0.0189 253.71)` | Coarse Wool | white, 17.3 to 1 |
| 21 | `#121920` | `oklch(20.88% 0.0183 254.19)` | River Styx | white, 17.7 to 1 |
| 22 | `#10161e` | `oklch(19.87% 0.0177 254.67)` | Kuroi Black | white, 18.1 to 1 |
| 23 | `#0e141b` | `oklch(18.87% 0.0171 255.14)` | Black Is Back | white, 18.5 to 1 |
| 24 | `#0d1219` | `oklch(17.89% 0.0164 255.60)` | Midnight Edition | white, 18.8 to 1 |
| 25 | `#0b1016` | `oklch(16.93% 0.0158 256.05)` | Nyctophobia | white, 19.1 to 1 |
| 26 | `#090e14` | `oklch(16.00% 0.0152 256.48)` | Midnight Oil | white, 19.4 to 1 |
| 27 | `#080c12` | `oklch(15.12% 0.0146 256.89)` | Midnight Oil | white, 19.6 to 1 |
| 28 | `#060a10` | `oklch(14.30% 0.0141 257.27)` | Dark Rift | white, 19.8 to 1 |
| 29 | `#05080e` | `oklch(13.55% 0.0135 257.61)` | Narwhal Grey | white, 20 to 1 |
| 30 | `#05070c` | `oklch(12.88% 0.0131 257.93)` | Eight Ball | white, 20.1 to 1 |
| 31 | `#04060b` | `oklch(12.30% 0.0127 258.20)` | Eight Ball | white, 20.2 to 1 |
| 32 | `#04060a` | `oklch(11.81% 0.0124 258.43)` | Eight Ball | white, 20.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #3a4752 0.0%, #394550 3.2%, #37444e 6.5%, #36424d 9.7%, #34404a 12.9%, #323d48 16.1%, #303b45 19.4%, #2e3843 22.6%, #2b3640 25.8%, #29333d 29.0%, #27303a 32.3%, #242e38 35.5%, #222b35 38.7%, #202932 41.9%, #1e2630 45.2%, #1c242d 48.4%, #1a222b 51.6%, #182028 54.8%, #161d26 58.1%, #141b23 61.3%, #121920 64.5%, #10161e 67.7%, #0e141b 71.0%, #0d1219 74.2%, #0b1016 77.4%, #090e14 80.6%, #080c12 83.9%, #060a10 87.1%, #05080e 90.3%, #05070c 93.5%, #04060b 96.8%, #04060a 100.0%);
background: linear-gradient(135deg in oklch, oklch(38.98% 0.0248 244.69) 0.0%, oklch(38.48% 0.0247 244.96) 3.2%, oklch(37.87% 0.0245 245.29) 6.5%, oklch(37.17% 0.0243 245.67) 9.7%, oklch(36.39% 0.0241 246.10) 12.9%, oklch(35.54% 0.0239 246.56) 16.1%, oklch(34.63% 0.0237 247.06) 19.4%, oklch(33.67% 0.0234 247.58) 22.6%, oklch(32.67% 0.0232 248.13) 25.8%, oklch(31.65% 0.0229 248.68) 29.0%, oklch(30.62% 0.0226 249.24) 32.3%, oklch(29.58% 0.0223 249.79) 35.5%, oklch(28.55% 0.0220 250.34) 38.7%, oklch(27.55% 0.0216 250.87) 41.9%, oklch(26.57% 0.0213 251.38) 45.2%, oklch(25.64% 0.0209 251.86) 48.4%, oklch(24.75% 0.0205 252.31) 51.6%, oklch(23.83% 0.0200 252.77) 54.8%, oklch(22.87% 0.0195 253.24) 58.1%, oklch(21.88% 0.0189 253.71) 61.3%, oklch(20.88% 0.0183 254.19) 64.5%, oklch(19.87% 0.0177 254.67) 67.7%, oklch(18.87% 0.0171 255.14) 71.0%, oklch(17.89% 0.0164 255.60) 74.2%, oklch(16.93% 0.0158 256.05) 77.4%, oklch(16.00% 0.0152 256.48) 80.6%, oklch(15.12% 0.0146 256.89) 83.9%, oklch(14.30% 0.0141 257.27) 87.1%, oklch(13.55% 0.0135 257.61) 90.3%, oklch(12.88% 0.0131 257.93) 93.5%, oklch(12.30% 0.0127 258.20) 96.8%, oklch(11.81% 0.0124 258.43) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.39 | 0.025 | 244.7 |
| 2 | 0.252 | 0.021 | 252.1 |
| 3 | 0.118 | 0.012 | 258.4 |

## In these collections

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

## Other forms

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