# Espresso to cream Monochrome black to beige linear gradient with 32 colors: #1b0f0a, #1d100b, #20120c, #24130d, #28150e, #2d1710, #321a12, #371d14, #3c2117, #42251a, #482a1d, #4e2f21, #543525, #5b3b29, #63422e, #6b4a34, #74523a, #7e5c42, #8a664a, #977253, #a47d5c, #b08966, #bc9570, #c69f7a, #ceaa84, #d6b48f, #dcbe9c, #e2c8a8, #e7d1b4, #ecd9c0, #f0e0c9, #f3e5d0. Edit it and copy or download CSS, SVG, PNG or shader code. - Also called: Monochrome black to beige linear gradient - Seed: `kGRsPCk7IBYW9ONxyKJ8Hz5dA` - Page: https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA?steps=32&angle=135 - Drawn as: linear gradient, 32 steps, 135 degrees - Kinds: dark to light, warm, monochrome - Hues: analogous - Contrast of its darkest and lightest colors: 15.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 | `#1b0f0a` | `oklch(18.35% 0.0229 43.45)` | Scandinavian Liquorice | white, 18.7 to 1 | | 2 | `#1d100b` | `oklch(19.03% 0.0248 43.12)` | Scandinavian Liquorice | white, 18.5 to 1 | | 3 | `#20120c` | `oklch(19.88% 0.0274 42.56)` | Bighorn Sheep | white, 18.2 to 1 | | 4 | `#24130d` | `oklch(20.90% 0.0306 41.88)` | Bighorn Sheep | white, 17.8 to 1 | | 5 | `#28150e` | `oklch(22.06% 0.0340 41.21)` | Used Oil | white, 17.4 to 1 | | 6 | `#2d1710` | `oklch(23.37% 0.0375 40.68)` | Darkroom | white, 16.8 to 1 | | 7 | `#321a12` | `oklch(24.82% 0.0409 40.41)` | Darkroom | white, 16.2 to 1 | | 8 | `#371d14` | `oklch(26.41% 0.0439 40.54)` | Scorched | white, 15.5 to 1 | | 9 | `#3c2117` | `oklch(28.12% 0.0462 41.18)` | Brown Pod | white, 14.7 to 1 | | 10 | `#42251a` | `oklch(29.95% 0.0481 42.40)` | Night Brown | white, 13.8 to 1 | | 11 | `#482a1d` | `oklch(31.89% 0.0498 44.08)` | Subterranean | white, 12.9 to 1 | | 12 | `#4e2f21` | `oklch(33.97% 0.0511 46.10)` | Dark Wood Grain | white, 11.9 to 1 | | 13 | `#543525` | `oklch(36.20% 0.0524 48.31)` | Wild Boar | white, 10.9 to 1 | | 14 | `#5b3b29` | `oklch(38.60% 0.0536 50.59)` | Weathered Bamboo | white, 9.9 to 1 | | 15 | `#63422e` | `oklch(41.17% 0.0548 52.78)` | Irish Coffee | white, 8.9 to 1 | | 16 | `#6b4a34` | `oklch(43.93% 0.0561 54.77)` | Guitar | white, 7.9 to 1 | | 17 | `#74523a` | `oklch(46.94% 0.0576 56.44)` | Toffee | white, 6.9 to 1 | | 18 | `#7e5c42` | `oklch(50.35% 0.0597 57.96)` | Muddy Mississippi | white, 6 to 1 | | 19 | `#8a664a` | `oklch(54.08% 0.0622 59.37)` | Baked Cookie | white, 5.1 to 1 | | 20 | `#977253` | `oklch(58.00% 0.0647 60.72)` | Sagebrush | black, 4.8 to 1 | | 21 | `#a47d5c` | `oklch(61.98% 0.0669 62.04)` | Café au Lait | black, 5.6 to 1 | | 22 | `#b08966` | `oklch(65.88% 0.0686 63.35)` | Syrup | black, 6.6 to 1 | | 23 | `#bc9570` | `oklch(69.59% 0.0693 64.68)` | Painted Pony | black, 7.6 to 1 | | 24 | `#c69f7a` | `oklch(72.97% 0.0688 66.07)` | Friendly Tan | black, 8.6 to 1 | | 25 | `#ceaa84` | `oklch(76.04% 0.0666 67.58)` | DaVanzo Beige | black, 9.6 to 1 | | 26 | `#d6b48f` | `oklch(79.05% 0.0627 69.25)` | Crème de Caramel | black, 10.7 to 1 | | 27 | `#dcbe9c` | `oklch(81.95% 0.0575 71.00)` | Hazelnut Parfait | black, 11.9 to 1 | | 28 | `#e2c8a8` | `oklch(84.69% 0.0516 72.75)` | Persian Flatbread | black, 13 to 1 | | 29 | `#e7d1b4` | `oklch(87.21% 0.0455 74.43)` | White Bean Hummus | black, 14.2 to 1 | | 30 | `#ecd9c0` | `oklch(89.43% 0.0398 75.94)` | Ludlow Beige | black, 15.2 to 1 | | 31 | `#f0e0c9` | `oklch(91.30% 0.0351 77.21)` | Silk Teddy | black, 16.1 to 1 | | 32 | `#f3e5d0` | `oklch(92.75% 0.0318 78.16)` | White Hyacinth | black, 16.9 to 1 | ## CSS ```css background: linear-gradient(135deg, #1b0f0a 0.0%, #1d100b 3.2%, #20120c 6.5%, #24130d 9.7%, #28150e 12.9%, #2d1710 16.1%, #321a12 19.4%, #371d14 22.6%, #3c2117 25.8%, #42251a 29.0%, #482a1d 32.3%, #4e2f21 35.5%, #543525 38.7%, #5b3b29 41.9%, #63422e 45.2%, #6b4a34 48.4%, #74523a 51.6%, #7e5c42 54.8%, #8a664a 58.1%, #977253 61.3%, #a47d5c 64.5%, #b08966 67.7%, #bc9570 71.0%, #c69f7a 74.2%, #ceaa84 77.4%, #d6b48f 80.6%, #dcbe9c 83.9%, #e2c8a8 87.1%, #e7d1b4 90.3%, #ecd9c0 93.5%, #f0e0c9 96.8%, #f3e5d0 100.0%); background: linear-gradient(135deg in oklch, oklch(18.35% 0.0229 43.45) 0.0%, oklch(19.03% 0.0248 43.12) 3.2%, oklch(19.88% 0.0274 42.56) 6.5%, oklch(20.90% 0.0306 41.88) 9.7%, oklch(22.06% 0.0340 41.21) 12.9%, oklch(23.37% 0.0375 40.68) 16.1%, oklch(24.82% 0.0409 40.41) 19.4%, oklch(26.41% 0.0439 40.54) 22.6%, oklch(28.12% 0.0462 41.18) 25.8%, oklch(29.95% 0.0481 42.40) 29.0%, oklch(31.89% 0.0498 44.08) 32.3%, oklch(33.97% 0.0511 46.10) 35.5%, oklch(36.20% 0.0524 48.31) 38.7%, oklch(38.60% 0.0536 50.59) 41.9%, oklch(41.17% 0.0548 52.78) 45.2%, oklch(43.93% 0.0561 54.77) 48.4%, oklch(46.94% 0.0576 56.44) 51.6%, oklch(50.35% 0.0597 57.96) 54.8%, oklch(54.08% 0.0622 59.37) 58.1%, oklch(58.00% 0.0647 60.72) 61.3%, oklch(61.98% 0.0669 62.04) 64.5%, oklch(65.88% 0.0686 63.35) 67.7%, oklch(69.59% 0.0693 64.68) 71.0%, oklch(72.97% 0.0688 66.07) 74.2%, oklch(76.04% 0.0666 67.58) 77.4%, oklch(79.05% 0.0627 69.25) 80.6%, oklch(81.95% 0.0575 71.00) 83.9%, oklch(84.69% 0.0516 72.75) 87.1%, oklch(87.21% 0.0455 74.43) 90.3%, oklch(89.43% 0.0398 75.94) 93.5%, oklch(91.30% 0.0351 77.21) 96.8%, oklch(92.75% 0.0318 78.16) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.183 | 0.023 | 43.4 | | 2 | 0.277 | 0.046 | 41 | | 3 | 0.454 | 0.057 | 55.6 | | 4 | 0.737 | 0.068 | 66.4 | | 5 | 0.928 | 0.032 | 78.2 | ## In these collections - [Coffee color palettes](https://grabient.com/coffee-color-palettes) ## Other forms - [JSON](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.json?steps=32&angle=135) - [PNG](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.png?steps=32&angle=135) - [SVG](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.svg?steps=32&angle=135) - [CSS](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.css?steps=32&angle=135) - [ASE](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.ase?steps=32&angle=135) - [GPL](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.gpl?steps=32&angle=135) - [GRD](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.grd?steps=32&angle=135) - [Design tokens](https://grabient.com/kGRsPCk7IBYW9ONxyKJ8Hz5dA.tokens.json?steps=32&angle=135) - [Social card](https://grabient.com/api/og?seed=kGRsPCk7IBYW9ONxyKJ8Hz5dA&steps=32&angle=135) - [Palettes like this one](https://grabient.com/palettes?q=kGRsPCk7IBYW9ONxyKJ8Hz5dA) - [Guide for agents](https://grabient.com/llms.txt)