# Hot cocoa and marshmallow gradient Monochrome brown, gray and white linear gradient with 32 colors: #321b13, #361d14, #3a2016, #3f2318, #45271b, #4c2b1e, #523021, #593424, #5f3928, #653e2b, #6b4430, #714a34, #785039, #7e563f, #845d45, #8b654c, #916d54, #98765d, #9f8067, #a78a72, #ae947e, #b59f8a, #bca996, #c3b2a0, #c9bbaa, #d0c4b5, #d7ccbf, #ddd5c9, #e4dcd2, #e9e3db, #eee9e2, #f2ede7. Edit it and copy or download CSS, SVG, PNG or shader code. - Also called: Monochrome brown, gray and white linear gradient - Seed: `kWQB0csJZAkYWQRjC0G-IPBA` - Page: https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA?steps=32&angle=180 - Drawn as: linear gradient, 32 steps, 180 degrees - Kinds: dark to light, muted, warm, monochrome - Hues: analogous - Contrast of its darkest and lightest colors: 13.8 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 | `#321b13` | `oklch(25.20% 0.0400 40.08)` | Scorched | white, 16 to 1 | | 2 | `#361d14` | `oklch(26.21% 0.0418 40.47)` | Scorched | white, 15.6 to 1 | | 3 | `#3a2016` | `oklch(27.53% 0.0443 40.96)` | Wetlands Swamp | white, 15 to 1 | | 4 | `#3f2318` | `oklch(29.10% 0.0474 41.55)` | Brown Pod | white, 14.2 to 1 | | 5 | `#45271b` | `oklch(30.86% 0.0507 42.21)` | Night Brown | white, 13.4 to 1 | | 6 | `#4c2b1e` | `oklch(32.76% 0.0540 42.96)` | Couch | white, 12.5 to 1 | | 7 | `#523021` | `oklch(34.73% 0.0570 43.78)` | Dark Wood Grain | white, 11.6 to 1 | | 8 | `#593424` | `oklch(36.72% 0.0594 44.66)` | Wild Boar | white, 10.7 to 1 | | 9 | `#5f3928` | `oklch(38.67% 0.0610 45.60)` | Tropical Wood Brown | white, 9.9 to 1 | | 10 | `#653e2b` | `oklch(40.63% 0.0621 46.60)` | Grilled | white, 9.1 to 1 | | 11 | `#6b4430` | `oklch(42.64% 0.0630 47.66)` | Aloeswood | white, 8.4 to 1 | | 12 | `#714a34` | `oklch(44.71% 0.0636 48.78)` | Taj | white, 7.7 to 1 | | 13 | `#785039` | `oklch(46.85% 0.0638 49.98)` | Umber Rust | white, 7 to 1 | | 14 | `#7e563f` | `oklch(49.08% 0.0636 51.26)` | Dachshund | white, 6.3 to 1 | | 15 | `#845d45` | `oklch(51.41% 0.0629 52.64)` | Coffee Bar | white, 5.7 to 1 | | 16 | `#8b654c` | `oklch(53.85% 0.0615 54.10)` | Burnished Brandy | white, 5.1 to 1 | | 17 | `#916d54` | `oklch(56.44% 0.0595 55.69)` | Brownie Scout | white, 4.6 to 1 | | 18 | `#98765d` | `oklch(59.26% 0.0565 57.48)` | Dark Toast | black, 5 to 1 | | 19 | `#9f8067` | `oklch(62.26% 0.0528 59.44)` | Matte Brown | black, 5.7 to 1 | | 20 | `#a78a72` | `oklch(65.36% 0.0485 61.49)` | Distant Land | black, 6.5 to 1 | | 21 | `#ae947e` | `oklch(68.49% 0.0439 63.57)` | Sandrift | black, 7.3 to 1 | | 22 | `#b59f8a` | `oklch(71.58% 0.0393 65.60)` | Baked Potato | black, 8.2 to 1 | | 23 | `#bca996` | `oklch(74.54% 0.0350 67.52)` | Fangtooth Fish | black, 9.2 to 1 | | 24 | `#c3b2a0` | `oklch(77.30% 0.0312 69.27)` | Frontier Fort | black, 10.1 to 1 | | 25 | `#c9bbaa` | `oklch(79.90% 0.0278 70.84)` | Dinosaur Egg | black, 11.1 to 1 | | 26 | `#d0c4b5` | `oklch(82.51% 0.0246 72.36)` | Sunray Venus | black, 12.2 to 1 | | 27 | `#d7ccbf` | `oklch(85.08% 0.0214 73.82)` | In the Buff | black, 13.2 to 1 | | 28 | `#ddd5c9` | `oklch(87.55% 0.0184 75.18)` | Moon Drop | black, 14.4 to 1 | | 29 | `#e4dcd2` | `oklch(89.83% 0.0157 76.43)` | Aesthetic White | black, 15.4 to 1 | | 30 | `#e9e3db` | `oklch(91.86% 0.0133 77.53)` | Mountain Grey | black, 16.4 to 1 | | 31 | `#eee9e2` | `oklch(93.57% 0.0112 78.45)` | Solid Opal | black, 17.3 to 1 | | 32 | `#f2ede7` | `oklch(94.88% 0.0096 79.18)` | Valhallan Blizzard | black, 18 to 1 | ## CSS ```css background: linear-gradient(180deg, #321b13 0.0%, #361d14 3.2%, #3a2016 6.5%, #3f2318 9.7%, #45271b 12.9%, #4c2b1e 16.1%, #523021 19.4%, #593424 22.6%, #5f3928 25.8%, #653e2b 29.0%, #6b4430 32.3%, #714a34 35.5%, #785039 38.7%, #7e563f 41.9%, #845d45 45.2%, #8b654c 48.4%, #916d54 51.6%, #98765d 54.8%, #9f8067 58.1%, #a78a72 61.3%, #ae947e 64.5%, #b59f8a 67.7%, #bca996 71.0%, #c3b2a0 74.2%, #c9bbaa 77.4%, #d0c4b5 80.6%, #d7ccbf 83.9%, #ddd5c9 87.1%, #e4dcd2 90.3%, #e9e3db 93.5%, #eee9e2 96.8%, #f2ede7 100.0%); background: linear-gradient(180deg in oklch, oklch(25.20% 0.0400 40.08) 0.0%, oklch(26.21% 0.0418 40.47) 3.2%, oklch(27.53% 0.0443 40.96) 6.5%, oklch(29.10% 0.0474 41.55) 9.7%, oklch(30.86% 0.0507 42.21) 12.9%, oklch(32.76% 0.0540 42.96) 16.1%, oklch(34.73% 0.0570 43.78) 19.4%, oklch(36.72% 0.0594 44.66) 22.6%, oklch(38.67% 0.0610 45.60) 25.8%, oklch(40.63% 0.0621 46.60) 29.0%, oklch(42.64% 0.0630 47.66) 32.3%, oklch(44.71% 0.0636 48.78) 35.5%, oklch(46.85% 0.0638 49.98) 38.7%, oklch(49.08% 0.0636 51.26) 41.9%, oklch(51.41% 0.0629 52.64) 45.2%, oklch(53.85% 0.0615 54.10) 48.4%, oklch(56.44% 0.0595 55.69) 51.6%, oklch(59.26% 0.0565 57.48) 54.8%, oklch(62.26% 0.0528 59.44) 58.1%, oklch(65.36% 0.0485 61.49) 61.3%, oklch(68.49% 0.0439 63.57) 64.5%, oklch(71.58% 0.0393 65.60) 67.7%, oklch(74.54% 0.0350 67.52) 71.0%, oklch(77.30% 0.0312 69.27) 74.2%, oklch(79.90% 0.0278 70.84) 77.4%, oklch(82.51% 0.0246 72.36) 80.6%, oklch(85.08% 0.0214 73.82) 83.9%, oklch(87.55% 0.0184 75.18) 87.1%, oklch(89.83% 0.0157 76.43) 90.3%, oklch(91.86% 0.0133 77.53) 93.5%, oklch(93.57% 0.0112 78.45) 96.8%, oklch(94.88% 0.0096 79.18) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.252 | 0.04 | 40.1 | | 2 | 0.382 | 0.061 | 45.4 | | 3 | 0.551 | 0.061 | 54.9 | | 4 | 0.78 | 0.03 | 69.7 | | 5 | 0.949 | 0.01 | 79.2 | ## In these collections - [Cozy color palette](https://grabient.com/cozy-color-palette) ## Other forms - [JSON](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.json?steps=32&angle=180) - [PNG](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.png?steps=32&angle=180) - [SVG](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.svg?steps=32&angle=180) - [CSS](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.css?steps=32&angle=180) - [ASE](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.ase?steps=32&angle=180) - [GPL](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.gpl?steps=32&angle=180) - [GRD](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.grd?steps=32&angle=180) - [Design tokens](https://grabient.com/kWQB0csJZAkYWQRjC0G-IPBA.tokens.json?steps=32&angle=180) - [Social card](https://grabient.com/api/og?seed=kWQB0csJZAkYWQRjC0G-IPBA&steps=32&angle=180) - [Palettes like this one](https://grabient.com/palettes?q=kWQB0csJZAkYWQRjC0G-IPBA) - [Guide for agents](https://grabient.com/llms.txt)