# Mocha, cinnamon and foam

Monochrome brown to off-white linear gradient with 32 colors: #4b3832, #4e3932, #533932, #583933, #5d3a33, #633a34, #693a36, #703b38, #763d3b, #7d3f3e, #834341, #894744, #8f4d47, #95544a, #9b5d4d, #a16551, #a66f57, #ab795d, #b08264, #b58c6c, #ba9575, #c09e7e, #c6a788, #cdb193, #d4bb9f, #dbc5ab, #e2ceb7, #e9d8c2, #f0e0cd, #f6e8d7, #fbefe0, #fff4e6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome brown to off-white linear gradient
- Seed: `kEUs4MmFREIb6bex__TmA`
- Page: https://grabient.com/kEUs4MmFREIb6bex__TmA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, muted, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.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 | `#4b3832` | `oklch(35.99% 0.0292 38.25)` | Brown Beauty | white, 10.9 to 1 |
| 2 | `#4e3932` | `oklch(36.55% 0.0330 37.13)` | Button Eyes | white, 10.7 to 1 |
| 3 | `#533932` | `oklch(37.18% 0.0384 35.39)` | Ragtop | white, 10.5 to 1 |
| 4 | `#583933` | `oklch(37.90% 0.0449 33.23)` | Intergalactic Ray | white, 10.2 to 1 |
| 5 | `#5d3a33` | `oklch(38.72% 0.0522 30.84)` | Western Brown | white, 9.9 to 1 |
| 6 | `#633a34` | `oklch(39.64% 0.0598 28.41)` | Umber Brown | white, 9.6 to 1 |
| 7 | `#693a36` | `oklch(40.68% 0.0674 26.14)` | Plum Sauce | white, 9.2 to 1 |
| 8 | `#703b38` | `oklch(41.84% 0.0745 24.22)` | Steampunk Leather | white, 8.8 to 1 |
| 9 | `#763d3b` | `oklch(43.13% 0.0807 22.86)` | Sequoia Redwood | white, 8.3 to 1 |
| 10 | `#7d3f3e` | `oklch(44.56% 0.0856 22.24)` | Raw Cinnabar | white, 7.9 to 1 |
| 11 | `#834341` | `oklch(46.14% 0.0888 22.57)` | Spiced Berry | white, 7.4 to 1 |
| 12 | `#894744` | `oklch(47.90% 0.0901 24.04)` | Forbidden Red | white, 6.8 to 1 |
| 13 | `#8f4d47` | `oklch(49.88% 0.0900 26.69)` | El Salva | white, 6.3 to 1 |
| 14 | `#95544a` | `oklch(52.04% 0.0886 30.29)` | Marsala | white, 5.7 to 1 |
| 15 | `#9b5d4d` | `oklch(54.37% 0.0863 34.60)` | Red Potato | white, 5.1 to 1 |
| 16 | `#a16551` | `oklch(56.82% 0.0831 39.40)` | Warm Up | white, 4.6 to 1 |
| 17 | `#a66f57` | `oklch(59.35% 0.0794 44.42)` | Orange Flambe | black, 5 to 1 |
| 18 | `#ab795d` | `oklch(61.94% 0.0753 49.45)` | Tobey Rattan | black, 5.6 to 1 |
| 19 | `#b08264` | `oklch(64.55% 0.0711 54.24)` | Cider Spice | black, 6.2 to 1 |
| 20 | `#b58c6c` | `oklch(67.14% 0.0670 58.56)` | Jama Masjid Taupe | black, 6.9 to 1 |
| 21 | `#ba9575` | `oklch(69.69% 0.0631 62.16)` | Painted Pony | black, 7.6 to 1 |
| 22 | `#c09e7e` | `oklch(72.17% 0.0597 64.84)` | Wickerwork | black, 8.4 to 1 |
| 23 | `#c6a788` | `oklch(74.80% 0.0560 66.94)` | Beige Intenso | black, 9.2 to 1 |
| 24 | `#cdb193` | `oklch(77.60% 0.0520 68.62)` | Beige Ganesh | black, 10.2 to 1 |
| 25 | `#d4bb9f` | `oklch(80.50% 0.0477 69.94)` | Mish Mosh | black, 11.3 to 1 |
| 26 | `#dbc5ab` | `oklch(83.42% 0.0433 70.97)` | Cliff’s View | black, 12.5 to 1 |
| 27 | `#e2ceb7` | `oklch(86.28% 0.0389 71.76)` | Comfort | black, 13.7 to 1 |
| 28 | `#e9d8c2` | `oklch(89.01% 0.0347 72.37)` | Floating Feather | black, 15 to 1 |
| 29 | `#f0e0cd` | `oklch(91.54% 0.0307 72.85)` | Buttercream | black, 16.2 to 1 |
| 30 | `#f6e8d7` | `oklch(93.80% 0.0272 73.26)` | Tender | black, 17.4 to 1 |
| 31 | `#fbefe0` | `oklch(95.71% 0.0242 73.66)` | Silk Lining | black, 18.5 to 1 |
| 32 | `#fff4e6` | `oklch(97.20% 0.0220 74.10)` | Soft Pillow | black, 19.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #4b3832 0.0%, #4e3932 3.2%, #533932 6.5%, #583933 9.7%, #5d3a33 12.9%, #633a34 16.1%, #693a36 19.4%, #703b38 22.6%, #763d3b 25.8%, #7d3f3e 29.0%, #834341 32.3%, #894744 35.5%, #8f4d47 38.7%, #95544a 41.9%, #9b5d4d 45.2%, #a16551 48.4%, #a66f57 51.6%, #ab795d 54.8%, #b08264 58.1%, #b58c6c 61.3%, #ba9575 64.5%, #c09e7e 67.7%, #c6a788 71.0%, #cdb193 74.2%, #d4bb9f 77.4%, #dbc5ab 80.6%, #e2ceb7 83.9%, #e9d8c2 87.1%, #f0e0cd 90.3%, #f6e8d7 93.5%, #fbefe0 96.8%, #fff4e6 100.0%);
background: linear-gradient(135deg in oklch, oklch(35.99% 0.0292 38.25) 0.0%, oklch(36.55% 0.0330 37.13) 3.2%, oklch(37.18% 0.0384 35.39) 6.5%, oklch(37.90% 0.0449 33.23) 9.7%, oklch(38.72% 0.0522 30.84) 12.9%, oklch(39.64% 0.0598 28.41) 16.1%, oklch(40.68% 0.0674 26.14) 19.4%, oklch(41.84% 0.0745 24.22) 22.6%, oklch(43.13% 0.0807 22.86) 25.8%, oklch(44.56% 0.0856 22.24) 29.0%, oklch(46.14% 0.0888 22.57) 32.3%, oklch(47.90% 0.0901 24.04) 35.5%, oklch(49.88% 0.0900 26.69) 38.7%, oklch(52.04% 0.0886 30.29) 41.9%, oklch(54.37% 0.0863 34.60) 45.2%, oklch(56.82% 0.0831 39.40) 48.4%, oklch(59.35% 0.0794 44.42) 51.6%, oklch(61.94% 0.0753 49.45) 54.8%, oklch(64.55% 0.0711 54.24) 58.1%, oklch(67.14% 0.0670 58.56) 61.3%, oklch(69.69% 0.0631 62.16) 64.5%, oklch(72.17% 0.0597 64.84) 67.7%, oklch(74.80% 0.0560 66.94) 71.0%, oklch(77.60% 0.0520 68.62) 74.2%, oklch(80.50% 0.0477 69.94) 77.4%, oklch(83.42% 0.0433 70.97) 80.6%, oklch(86.28% 0.0389 71.76) 83.9%, oklch(89.01% 0.0347 72.37) 87.1%, oklch(91.54% 0.0307 72.85) 90.3%, oklch(93.80% 0.0272 73.26) 93.5%, oklch(95.71% 0.0242 73.66) 96.8%, oklch(97.20% 0.0220 74.10) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.36 | 0.029 | 38.2 |
| 2 | 0.467 | 0.089 | 22.9 |
| 3 | 0.713 | 0.061 | 64 |
| 4 | 0.972 | 0.022 | 74.1 |

## In these collections

- [Coffee color palettes](https://grabient.com/coffee-color-palettes)

## Other forms

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