# Gray, navy, black and brown linear gradient

Gray, navy, black and brown linear gradient with 32 colors: #645858, #5d4f52, #51424c, #403547, #2e2a42, #1f213c, #111737, #060d32, #02042c, #010027, #000021, #000312, #000310, #000115, #01000e, #010003, #000000, #000000, #000000, #010000, #0a0000, #1a0000, #2a0000, #380400, #470b00, #561400, #651e00, #722800, #803400, #8d4000, #984b00, #a05200. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kceAsOpBC0hAfPeLlL-gwBNpecwQuqMEwq9Bo`
- Page: https://grabient.com/kceAsOpBC0hAfPeLlL-gwBNpecwQuqMEwq9Bo?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark center, vivid, dark
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 3.7 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 | `#645858` | `oklch(47.24% 0.0152 20.39)` | Louisiana Mud | white, 6.8 to 1 |
| 2 | `#5d4f52` | `oklch(44.19% 0.0198 3.62)` | Spell | white, 7.7 to 1 |
| 3 | `#51424c` | `oklch(39.82% 0.0263 339.06)` | My Place or Yours | white, 9.4 to 1 |
| 4 | `#403547` | `oklch(34.88% 0.0339 312.77)` | Royal Decree | white, 11.5 to 1 |
| 5 | `#2e2a42` | `oklch(30.13% 0.0420 290.81)` | Viola Black | white, 13.7 to 1 |
| 6 | `#1f213c` | `oklch(26.07% 0.0507 278.06)` | Cool Balaclavas Are Forever | white, 15.6 to 1 |
| 7 | `#111737` | `oklch(22.03% 0.0617 271.77)` | Lost in Sadness | white, 17.4 to 1 |
| 8 | `#060d32` | `oklch(18.18% 0.0731 269.32)` | Infinite Night | white, 18.9 to 1 |
| 9 | `#02042c` | `oklch(14.83% 0.0819 268.46)` | Midnight | white, 19.8 to 1 |
| 10 | `#010027` | `oklch(12.44% 0.0838 266.99)` | Hadopelagic Water | white, 20.3 to 1 |
| 11 | `#000021` | `oklch(11.13% 0.0771 264.05)` | Hadopelagic Water | white, 20.5 to 1 |
| 12 | `#000312` | `oklch(10.37% 0.0434 260.46)` | Ninja | white, 20.5 to 1 |
| 13 | `#000310` | `oklch(10.04% 0.0395 259.31)` | Ninja | white, 20.6 to 1 |
| 14 | `#000115` | `oklch(9.44% 0.0585 264.19)` | Benthic Black | white, 20.7 to 1 |
| 15 | `#01000e` | `oklch(7.91% 0.0475 278.40)` | Benthic Black | white, 20.8 to 1 |
| 16 | `#010003` | `oklch(5.72% 0.0296 305.97)` | Binary Black | white, 20.9 to 1 |
| 17 | `#000000` | `oklch(3.44% 0.0133 338.78)` | Black | white, 20.9 to 1 |
| 18 | `#000000` | `oklch(2.18% 0.0018 7.46)` | Black | white, 20.9 to 1 |
| 19 | `#000000` | `oklch(2.76% 0.0013 25.07)` | Black | white, 20.9 to 1 |
| 20 | `#010000` | `oklch(5.32% 0.0143 31.98)` | Binary Black | white, 20.9 to 1 |
| 21 | `#0a0000` | `oklch(9.19% 0.0352 31.65)` | Dark Matter | white, 20.7 to 1 |
| 22 | `#1a0000` | `oklch(13.65% 0.0560 29.25)` | Dwarf Fortress | white, 20.1 to 1 |
| 23 | `#2a0000` | `oklch(17.95% 0.0722 29.89)` | Sepia Black | white, 19 to 1 |
| 24 | `#380400` | `oklch(21.93% 0.0822 32.41)` | 3AM Breakup | white, 17.7 to 1 |
| 25 | `#470b00` | `oklch(26.08% 0.0919 34.81)` | Lonely Chocolate | white, 15.9 to 1 |
| 26 | `#561400` | `oklch(30.29% 0.1008 37.23)` | Baragon Brown | white, 14 to 1 |
| 27 | `#651e00` | `oklch(34.38% 0.1083 39.81)` | Raw Chocolate | white, 12.1 to 1 |
| 28 | `#722800` | `oklch(38.30% 0.1139 42.76)` | Chestnut | white, 10.3 to 1 |
| 29 | `#803400` | `oklch(42.43% 0.1184 46.43)` | Red Beech | white, 8.7 to 1 |
| 30 | `#8d4000` | `oklch(46.45% 0.1222 50.35)` | Otterly Brown | white, 7.3 to 1 |
| 31 | `#984b00` | `oklch(49.92% 0.1254 53.85)` | Brownie | white, 6.2 to 1 |
| 32 | `#a05200` | `oklch(52.36% 0.1277 56.28)` | Fresh Cinnamon | white, 5.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #645858 0.0%, #5d4f52 3.2%, #51424c 6.5%, #403547 9.7%, #2e2a42 12.9%, #1f213c 16.1%, #111737 19.4%, #060d32 22.6%, #02042c 25.8%, #010027 29.0%, #000021 32.3%, #000312 35.5%, #000310 38.7%, #000115 41.9%, #01000e 45.2%, #010003 48.4%, #000000 51.6%, #000000 54.8%, #000000 58.1%, #010000 61.3%, #0a0000 64.5%, #1a0000 67.7%, #2a0000 71.0%, #380400 74.2%, #470b00 77.4%, #561400 80.6%, #651e00 83.9%, #722800 87.1%, #803400 90.3%, #8d4000 93.5%, #984b00 96.8%, #a05200 100.0%);
background: linear-gradient(90deg in oklch, oklch(47.24% 0.0152 20.39) 0.0%, oklch(44.19% 0.0198 3.62) 3.2%, oklch(39.82% 0.0263 339.06) 6.5%, oklch(34.88% 0.0339 312.77) 9.7%, oklch(30.13% 0.0420 290.81) 12.9%, oklch(26.07% 0.0507 278.06) 16.1%, oklch(22.03% 0.0617 271.77) 19.4%, oklch(18.18% 0.0731 269.32) 22.6%, oklch(14.83% 0.0819 268.46) 25.8%, oklch(12.44% 0.0838 266.99) 29.0%, oklch(11.13% 0.0771 264.05) 32.3%, oklch(10.37% 0.0434 260.46) 35.5%, oklch(10.04% 0.0395 259.31) 38.7%, oklch(9.44% 0.0585 264.19) 41.9%, oklch(7.91% 0.0475 278.40) 45.2%, oklch(5.72% 0.0296 305.97) 48.4%, oklch(3.44% 0.0133 338.78) 51.6%, oklch(2.18% 0.0018 7.46) 54.8%, oklch(2.76% 0.0013 25.07) 58.1%, oklch(5.32% 0.0143 31.98) 61.3%, oklch(9.19% 0.0352 31.65) 64.5%, oklch(13.65% 0.0560 29.25) 67.7%, oklch(17.95% 0.0722 29.89) 71.0%, oklch(21.93% 0.0822 32.41) 74.2%, oklch(26.08% 0.0919 34.81) 77.4%, oklch(30.29% 0.1008 37.23) 80.6%, oklch(34.38% 0.1083 39.81) 83.9%, oklch(38.30% 0.1139 42.76) 87.1%, oklch(42.43% 0.1184 46.43) 90.3%, oklch(46.45% 0.1222 50.35) 93.5%, oklch(49.92% 0.1254 53.85) 96.8%, oklch(52.36% 0.1277 56.28) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.472 | 0.015 | 20.4 |
| 2 | 0.283 | 0.045 | -75.8 |
| 3 | 0.126 | 0.085 | -92.7 |
| 4 | 0.091 | 0.056 | -94.8 |
| 5 | 0.024 | 0 | 21.4 |
| 6 | 0.185 | 0.079 | 31 |
| 7 | 0.366 | 0.112 | 41.5 |
| 8 | 0.524 | 0.13 | 56.3 |

## In these collections

- [Halloween gradients](https://grabient.com/halloween-gradients)

## Other forms

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