# Brown, gray, blue and black linear gradient Brown, gray, blue and black linear gradient with 32 colors: #b28568, #af8b6a, #ab9471, #a79e7d, #a3a68b, #a1ab98, #a0aea0, #9dafa4, #98aea7, #91aca9, #89a9ac, #82a4ad, #7b9ead, #7596aa, #6e8ca4, #67819c, #5f7593, #576988, #4f5d7e, #485173, #414567, #39395a, #312d4d, #292241, #221835, #1d0f29, #17071e, #120313, #0c0109, #070003, #040001, #020000. Edit it and copy or download CSS, SVG, PNG or shader code. - Seed: `kYpjIm3YlLFUQyY6FMTGpPD4aKxs` - Page: https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: light center, muted - Hues: two-hue - Contrast of its darkest and lightest colors: 9 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 | `#b28568` | `oklch(65.35% 0.0689 54.14)` | Syrup | black, 6.4 to 1 | | 2 | `#af8b6a` | `oklch(66.38% 0.0636 64.11)` | Spiced Rum | black, 6.7 to 1 | | 3 | `#ab9471` | `oklch(67.94% 0.0557 77.97)` | Quail Valley | black, 7.2 to 1 | | 4 | `#a79e7d` | `oklch(69.73% 0.0465 94.35)` | Hillary | black, 7.7 to 1 | | 5 | `#a3a68b` | `oklch(71.46% 0.0375 111.94)` | Solid Snake | black, 8.3 to 1 | | 6 | `#a1ab98` | `oklch(72.84% 0.0299 129.37)` | Garden | black, 8.8 to 1 | | 7 | `#a0aea0` | `oklch(73.58% 0.0253 145.30)` | Grass Sands | black, 9 to 1 | | 8 | `#9dafa4` | `oklch(73.60% 0.0244 159.60)` | Powdered Gum | black, 9 to 1 | | 9 | `#98aea7` | `oklch(73.21% 0.0264 173.94)` | April Rain | black, 8.9 to 1 | | 10 | `#91aca9` | `oklch(72.43% 0.0303 188.05)` | Oceanus | black, 8.7 to 1 | | 11 | `#89a9ac` | `oklch(71.27% 0.0352 201.57)` | Harbour Mist | black, 8.3 to 1 | | 12 | `#82a4ad` | `oklch(69.72% 0.0402 214.16)` | Blue Nuthatch | black, 7.8 to 1 | | 13 | `#7b9ead` | `oklch(67.80% 0.0443 225.47)` | Cool Dusk | black, 7.3 to 1 | | 14 | `#7596aa` | `oklch(65.46% 0.0470 235.17)` | American Anthem | black, 6.6 to 1 | | 15 | `#6e8ca4` | `oklch(62.56% 0.0493 243.23)` | Stormy Strait Grey | black, 5.9 to 1 | | 16 | `#67819c` | `oklch(59.22% 0.0515 250.06)` | Bay View | black, 5.1 to 1 | | 17 | `#5f7593` | `oklch(55.58% 0.0533 256.06)` | Columbus | white, 4.7 to 1 | | 18 | `#576988` | `oklch(51.77% 0.0549 261.66)` | Aurora Borealis | white, 5.5 to 1 | | 19 | `#4f5d7e` | `oklch(47.93% 0.0560 267.25)` | Coastal Fjord | white, 6.5 to 1 | | 20 | `#485173` | `oklch(44.15% 0.0568 273.12)` | Astronaut | white, 7.7 to 1 | | 21 | `#414567` | `oklch(40.13% 0.0572 278.43)` | Deep Cobalt | white, 9.2 to 1 | | 22 | `#39395a` | `oklch(35.91% 0.0574 283.29)` | Magic Night | white, 11 to 1 | | 23 | `#312d4d` | `oklch(31.65% 0.0573 288.08)` | Wild Iris | white, 13 to 1 | | 24 | `#292241` | `oklch(27.51% 0.0566 293.22)` | Midnight Velvet | white, 15 to 1 | | 25 | `#221835` | `oklch(23.65% 0.0553 299.09)` | Blacklist | white, 16.8 to 1 | | 26 | `#1d0f29` | `oklch(20.21% 0.0533 306.13)` | Midnight Monarch | white, 18.2 to 1 | | 27 | `#17071e` | `oklch(17.01% 0.0500 315.19)` | Crow | white, 19.2 to 1 | | 28 | `#120313` | `oklch(13.97% 0.0456 325.78)` | Glossy Black | white, 20 to 1 | | 29 | `#0c0109` | `oklch(11.18% 0.0407 336.87)` | Glossy Black | white, 20.5 to 1 | | 30 | `#070003` | `oklch(8.71% 0.0359 347.41)` | Raven’s Coat | white, 20.7 to 1 | | 31 | `#040001` | `oklch(6.93% 0.0282 358.77)` | Binary Black | white, 20.8 to 1 | | 32 | `#020000` | `oklch(5.60% 0.0224 9.41)` | Binary Black | white, 20.9 to 1 | ## CSS ```css background: linear-gradient(90deg, #b28568 0.0%, #af8b6a 3.2%, #ab9471 6.5%, #a79e7d 9.7%, #a3a68b 12.9%, #a1ab98 16.1%, #a0aea0 19.4%, #9dafa4 22.6%, #98aea7 25.8%, #91aca9 29.0%, #89a9ac 32.3%, #82a4ad 35.5%, #7b9ead 38.7%, #7596aa 41.9%, #6e8ca4 45.2%, #67819c 48.4%, #5f7593 51.6%, #576988 54.8%, #4f5d7e 58.1%, #485173 61.3%, #414567 64.5%, #39395a 67.7%, #312d4d 71.0%, #292241 74.2%, #221835 77.4%, #1d0f29 80.6%, #17071e 83.9%, #120313 87.1%, #0c0109 90.3%, #070003 93.5%, #040001 96.8%, #020000 100.0%); background: linear-gradient(90deg in oklch, oklch(65.35% 0.0689 54.14) 0.0%, oklch(66.38% 0.0636 64.11) 3.2%, oklch(67.94% 0.0557 77.97) 6.5%, oklch(69.73% 0.0465 94.35) 9.7%, oklch(71.46% 0.0375 111.94) 12.9%, oklch(72.84% 0.0299 129.37) 16.1%, oklch(73.58% 0.0253 145.30) 19.4%, oklch(73.60% 0.0244 159.60) 22.6%, oklch(73.21% 0.0264 173.94) 25.8%, oklch(72.43% 0.0303 188.05) 29.0%, oklch(71.27% 0.0352 201.57) 32.3%, oklch(69.72% 0.0402 214.16) 35.5%, oklch(67.80% 0.0443 225.47) 38.7%, oklch(65.46% 0.0470 235.17) 41.9%, oklch(62.56% 0.0493 243.23) 45.2%, oklch(59.22% 0.0515 250.06) 48.4%, oklch(55.58% 0.0533 256.06) 51.6%, oklch(51.77% 0.0549 261.66) 54.8%, oklch(47.93% 0.0560 267.25) 58.1%, oklch(44.15% 0.0568 273.12) 61.3%, oklch(40.13% 0.0572 278.43) 64.5%, oklch(35.91% 0.0574 283.29) 67.7%, oklch(31.65% 0.0573 288.08) 71.0%, oklch(27.51% 0.0566 293.22) 74.2%, oklch(23.65% 0.0553 299.09) 77.4%, oklch(20.21% 0.0533 306.13) 80.6%, oklch(17.01% 0.0500 315.19) 83.9%, oklch(13.97% 0.0456 325.78) 87.1%, oklch(11.18% 0.0407 336.87) 90.3%, oklch(8.71% 0.0359 347.41) 93.5%, oklch(6.93% 0.0282 358.77) 96.8%, oklch(5.60% 0.0224 9.41) 100.0%); ``` ## Keyframes 6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.654 | 0.069 | 54.1 | | 2 | 0.736 | 0.025 | 148.2 | | 3 | 0.669 | 0.045 | 229.6 | | 4 | 0.457 | 0.056 | 270.8 | | 5 | 0.209 | 0.054 | 304.6 | | 6 | 0.051 | 0.029 | 362.7 | ## In these collections - [Muted rainbow gradients](https://grabient.com/muted-rainbow-gradients) ## Other forms - [JSON](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.json?steps=32) - [PNG](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.png?steps=32) - [SVG](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.svg?steps=32) - [CSS](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.css?steps=32) - [ASE](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.ase?steps=32) - [GPL](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.gpl?steps=32) - [GRD](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.grd?steps=32) - [Design tokens](https://grabient.com/kYpjIm3YlLFUQyY6FMTGpPD4aKxs.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kYpjIm3YlLFUQyY6FMTGpPD4aKxs&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kYpjIm3YlLFUQyY6FMTGpPD4aKxs) - [Guide for agents](https://grabient.com/llms.txt)