# Black coffee and oat milk

Monochrome black, brown and gray linear gradient with 32 colors: #1a120b, #1b130c, #1d140c, #1e140d, #1f150e, #21160f, #241710, #271a13, #2c1d16, #32211a, #39281f, #433026, #4f3b2f, #5f4939, #705a46, #826c53, #947f62, #a59371, #b5a680, #c3b78f, #cfc69c, #d8d1a6, #dedaaf, #e3dfb7, #e7e3bd, #e9e6c3, #ebe7c7, #ebe7cb, #ebe7ce, #ebe7d1, #ebe7d4, #ece8d6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome black, brown and gray linear gradient
- Seed: `kERoSC08KiEdXOox7OjWA`
- Page: https://grabient.com/kERoSC08KiEdXOox7OjWA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, muted, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 15 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 | `#1a120b` | `oklch(19.02% 0.0189 62.50)` | Crowshead | white, 18.4 to 1 |
| 2 | `#1b130c` | `oklch(19.49% 0.0195 61.37)` | Crowshead | white, 18.3 to 1 |
| 3 | `#1d140c` | `oklch(19.85% 0.0203 59.55)` | Soulless | white, 18.2 to 1 |
| 4 | `#1e140d` | `oklch(20.20% 0.0211 57.27)` | Soulless | white, 18 to 1 |
| 5 | `#1f150e` | `oklch(20.61% 0.0221 54.76)` | Soulless | white, 17.9 to 1 |
| 6 | `#21160f` | `oklch(21.18% 0.0232 52.23)` | Used Oil | white, 17.7 to 1 |
| 7 | `#241710` | `oklch(21.99% 0.0244 49.91)` | Used Oil | white, 17.3 to 1 |
| 8 | `#271a13` | `oklch(23.12% 0.0258 48.02)` | Tetsu-Guro Black | white, 16.9 to 1 |
| 9 | `#2c1d16` | `oklch(24.67% 0.0273 46.78)` | Weathervane | white, 16.2 to 1 |
| 10 | `#32211a` | `oklch(26.71% 0.0289 46.41)` | Scorched | white, 15.3 to 1 |
| 11 | `#39281f` | `oklch(29.34% 0.0306 47.14)` | Tree House | white, 14 to 1 |
| 12 | `#433026` | `oklch(32.74% 0.0327 49.25)` | Morocco Brown | white, 12.4 to 1 |
| 13 | `#4f3b2f` | `oklch(37.18% 0.0354 52.88)` | Rootstock | white, 10.4 to 1 |
| 14 | `#5f4939` | `oklch(42.45% 0.0385 57.73)` | Beauty Spot | white, 8.3 to 1 |
| 15 | `#705a46` | `oklch(48.31% 0.0420 63.47)` | Log Cabin | white, 6.5 to 1 |
| 16 | `#826c53` | `oklch(54.52% 0.0455 69.76)` | Ermine | white, 4.9 to 1 |
| 17 | `#947f62` | `oklch(60.84% 0.0490 76.27)` | Dapper Tan | black, 5.4 to 1 |
| 18 | `#a59371` | `oklch(67.02% 0.0521 82.67)` | San Antonio Sage | black, 7 to 1 |
| 19 | `#b5a680` | `oklch(72.82% 0.0547 88.62)` | Tarnished Treasure | black, 8.7 to 1 |
| 20 | `#c3b78f` | `oklch(78.01% 0.0566 93.80)` | Modish Moss | black, 10.5 to 1 |
| 21 | `#cfc69c` | `oklch(82.34% 0.0575 97.86)` | Floating Lily Pad | black, 12.2 to 1 |
| 22 | `#d8d1a6` | `oklch(85.59% 0.0574 100.53)` | Cream Cheese Avocado | black, 13.6 to 1 |
| 23 | `#dedaaf` | `oklch(88.01% 0.0560 102.07)` | Beige Green | black, 14.7 to 1 |
| 24 | `#e3dfb7` | `oklch(89.77% 0.0535 102.75)` | Tropical Tale | black, 15.5 to 1 |
| 25 | `#e7e3bd` | `oklch(91.00% 0.0501 102.74)` | Spring Fever | black, 16.1 to 1 |
| 26 | `#e9e6c3` | `oklch(91.78% 0.0461 102.20)` | Child of Heaven | black, 16.5 to 1 |
| 27 | `#ebe7c7` | `oklch(92.22% 0.0419 101.27)` | Garden Seat | black, 16.7 to 1 |
| 28 | `#ebe7cb` | `oklch(92.43% 0.0375 100.13)` | Banana Milkshake | black, 16.8 to 1 |
| 29 | `#ebe7ce` | `oklch(92.50% 0.0333 98.93)` | Fresh Wood Ashes | black, 16.8 to 1 |
| 30 | `#ebe7d1` | `oklch(92.54% 0.0295 97.84)` | Abbey White | black, 16.8 to 1 |
| 31 | `#ebe7d4` | `oklch(92.65% 0.0265 97.00)` | Mascarpone | black, 16.9 to 1 |
| 32 | `#ece8d6` | `oklch(92.93% 0.0243 96.58)` | Light Frost | black, 17 to 1 |

## CSS

```css
background: linear-gradient(135deg, #1a120b 0.0%, #1b130c 3.2%, #1d140c 6.5%, #1e140d 9.7%, #1f150e 12.9%, #21160f 16.1%, #241710 19.4%, #271a13 22.6%, #2c1d16 25.8%, #32211a 29.0%, #39281f 32.3%, #433026 35.5%, #4f3b2f 38.7%, #5f4939 41.9%, #705a46 45.2%, #826c53 48.4%, #947f62 51.6%, #a59371 54.8%, #b5a680 58.1%, #c3b78f 61.3%, #cfc69c 64.5%, #d8d1a6 67.7%, #dedaaf 71.0%, #e3dfb7 74.2%, #e7e3bd 77.4%, #e9e6c3 80.6%, #ebe7c7 83.9%, #ebe7cb 87.1%, #ebe7ce 90.3%, #ebe7d1 93.5%, #ebe7d4 96.8%, #ece8d6 100.0%);
background: linear-gradient(135deg in oklch, oklch(19.02% 0.0189 62.50) 0.0%, oklch(19.49% 0.0195 61.37) 3.2%, oklch(19.85% 0.0203 59.55) 6.5%, oklch(20.20% 0.0211 57.27) 9.7%, oklch(20.61% 0.0221 54.76) 12.9%, oklch(21.18% 0.0232 52.23) 16.1%, oklch(21.99% 0.0244 49.91) 19.4%, oklch(23.12% 0.0258 48.02) 22.6%, oklch(24.67% 0.0273 46.78) 25.8%, oklch(26.71% 0.0289 46.41) 29.0%, oklch(29.34% 0.0306 47.14) 32.3%, oklch(32.74% 0.0327 49.25) 35.5%, oklch(37.18% 0.0354 52.88) 38.7%, oklch(42.45% 0.0385 57.73) 41.9%, oklch(48.31% 0.0420 63.47) 45.2%, oklch(54.52% 0.0455 69.76) 48.4%, oklch(60.84% 0.0490 76.27) 51.6%, oklch(67.02% 0.0521 82.67) 54.8%, oklch(72.82% 0.0547 88.62) 58.1%, oklch(78.01% 0.0566 93.80) 61.3%, oklch(82.34% 0.0575 97.86) 64.5%, oklch(85.59% 0.0574 100.53) 67.7%, oklch(88.01% 0.0560 102.07) 71.0%, oklch(89.77% 0.0535 102.75) 74.2%, oklch(91.00% 0.0501 102.74) 77.4%, oklch(91.78% 0.0461 102.20) 80.6%, oklch(92.22% 0.0419 101.27) 83.9%, oklch(92.43% 0.0375 100.13) 87.1%, oklch(92.50% 0.0333 98.93) 90.3%, oklch(92.54% 0.0295 97.84) 93.5%, oklch(92.65% 0.0265 97.00) 96.8%, oklch(92.93% 0.0243 96.58) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.19 | 0.019 | 62.5 |
| 2 | 0.304 | 0.031 | 47.7 |
| 3 | 0.846 | 0.058 | 99.8 |
| 4 | 0.929 | 0.024 | 96.6 |

## In these collections

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

## Other forms

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