# Dark roast

Dark monochrome brown linear gradient with 32 colors: #2b1a12, #2c1b13, #2d1c13, #2f1c14, #301d15, #321f15, #342016, #362117, #382218, #3a2419, #3c251b, #3f271c, #41291d, #442a1e, #462c20, #492e21, #4b3023, #4e3225, #513527, #553729, #583a2b, #5c3d2d, #5f4030, #634332, #674635, #6a4937, #6e4b39, #714e3b, #74503d, #77533f, #795441, #7b5642. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Dark monochrome brown linear gradient
- Seed: `kCSsaElKLyIXtWQg`
- Page: https://grabient.com/kCSsaElKLyIXtWQg?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark, warm, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.5 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 | `#2b1a12` | `oklch(23.76% 0.0310 45.99)` | Tetsu-Guro Black | white, 16.6 to 1 |
| 2 | `#2c1b13` | `oklch(24.10% 0.0316 46.00)` | Brunneophobia | white, 16.5 to 1 |
| 3 | `#2d1c13` | `oklch(24.50% 0.0322 46.01)` | Brunneophobia | white, 16.3 to 1 |
| 4 | `#2f1c14` | `oklch(24.94% 0.0329 46.01)` | Weathervane | white, 16.1 to 1 |
| 5 | `#301d15` | `oklch(25.43% 0.0338 46.01)` | Weathervane | white, 15.9 to 1 |
| 6 | `#321f15` | `oklch(25.97% 0.0347 46.01)` | Scorched | white, 15.6 to 1 |
| 7 | `#342016` | `oklch(26.54% 0.0356 46.02)` | Scorched | white, 15.4 to 1 |
| 8 | `#362117` | `oklch(27.16% 0.0367 46.02)` | Scorched | white, 15.1 to 1 |
| 9 | `#382218` | `oklch(27.80% 0.0377 46.03)` | Wetlands Swamp | white, 14.8 to 1 |
| 10 | `#3a2419` | `oklch(28.48% 0.0388 46.05)` | Brown Pod | white, 14.5 to 1 |
| 11 | `#3c251b` | `oklch(29.19% 0.0399 46.08)` | Brown Pod | white, 14.1 to 1 |
| 12 | `#3f271c` | `oklch(29.92% 0.0410 46.11)` | Woodsy Brown | white, 13.8 to 1 |
| 13 | `#41291d` | `oklch(30.67% 0.0420 46.16)` | Night Brown | white, 13.4 to 1 |
| 14 | `#442a1e` | `oklch(31.44% 0.0431 46.22)` | Night Brown | white, 13.1 to 1 |
| 15 | `#462c20` | `oklch(32.23% 0.0441 46.29)` | Subterranean | white, 12.7 to 1 |
| 16 | `#492e21` | `oklch(33.03% 0.0450 46.38)` | Subterranean | white, 12.3 to 1 |
| 17 | `#4b3023` | `oklch(33.85% 0.0459 46.49)` | Acajou | white, 12 to 1 |
| 18 | `#4e3225` | `oklch(34.76% 0.0468 46.63)` | Barn Swallow | white, 11.5 to 1 |
| 19 | `#513527` | `oklch(35.75% 0.0477 46.79)` | Bramble Bush | white, 11.1 to 1 |
| 20 | `#553729` | `oklch(36.81% 0.0487 46.98)` | Bramble Bush | white, 10.6 to 1 |
| 21 | `#583a2b` | `oklch(37.93% 0.0496 47.18)` | Tuk Tuk | white, 10.2 to 1 |
| 22 | `#5c3d2d` | `oklch(39.08% 0.0506 47.39)` | Potting Soil | white, 9.7 to 1 |
| 23 | `#5f4030` | `oklch(40.24% 0.0515 47.62)` | Pitch Mary Brown | white, 9.2 to 1 |
| 24 | `#634332` | `oklch(41.41% 0.0525 47.84)` | Worn Wooden | white, 8.8 to 1 |
| 25 | `#674635` | `oklch(42.56% 0.0534 48.07)` | Copra | white, 8.4 to 1 |
| 26 | `#6a4937` | `oklch(43.68% 0.0542 48.30)` | Satin Soil | white, 8 to 1 |
| 27 | `#6e4b39` | `oklch(44.75% 0.0550 48.51)` | Tuscan Brown | white, 7.6 to 1 |
| 28 | `#714e3b` | `oklch(45.76% 0.0558 48.72)` | Traditional Leather | white, 7.3 to 1 |
| 29 | `#74503d` | `oklch(46.68% 0.0565 48.90)` | Tamarind Fruit | white, 7 to 1 |
| 30 | `#77533f` | `oklch(47.50% 0.0571 49.07)` | Earth Fired Red | white, 6.8 to 1 |
| 31 | `#795441` | `oklch(48.20% 0.0577 49.21)` | Brownstone | white, 6.6 to 1 |
| 32 | `#7b5642` | `oklch(48.76% 0.0581 49.32)` | Wild Stallion | white, 6.4 to 1 |

## CSS

```css
background: linear-gradient(135deg, #2b1a12 0.0%, #2c1b13 3.2%, #2d1c13 6.5%, #2f1c14 9.7%, #301d15 12.9%, #321f15 16.1%, #342016 19.4%, #362117 22.6%, #382218 25.8%, #3a2419 29.0%, #3c251b 32.3%, #3f271c 35.5%, #41291d 38.7%, #442a1e 41.9%, #462c20 45.2%, #492e21 48.4%, #4b3023 51.6%, #4e3225 54.8%, #513527 58.1%, #553729 61.3%, #583a2b 64.5%, #5c3d2d 67.7%, #5f4030 71.0%, #634332 74.2%, #674635 77.4%, #6a4937 80.6%, #6e4b39 83.9%, #714e3b 87.1%, #74503d 90.3%, #77533f 93.5%, #795441 96.8%, #7b5642 100.0%);
background: linear-gradient(135deg in oklch, oklch(23.76% 0.0310 45.99) 0.0%, oklch(24.10% 0.0316 46.00) 3.2%, oklch(24.50% 0.0322 46.01) 6.5%, oklch(24.94% 0.0329 46.01) 9.7%, oklch(25.43% 0.0338 46.01) 12.9%, oklch(25.97% 0.0347 46.01) 16.1%, oklch(26.54% 0.0356 46.02) 19.4%, oklch(27.16% 0.0367 46.02) 22.6%, oklch(27.80% 0.0377 46.03) 25.8%, oklch(28.48% 0.0388 46.05) 29.0%, oklch(29.19% 0.0399 46.08) 32.3%, oklch(29.92% 0.0410 46.11) 35.5%, oklch(30.67% 0.0420 46.16) 38.7%, oklch(31.44% 0.0431 46.22) 41.9%, oklch(32.23% 0.0441 46.29) 45.2%, oklch(33.03% 0.0450 46.38) 48.4%, oklch(33.85% 0.0459 46.49) 51.6%, oklch(34.76% 0.0468 46.63) 54.8%, oklch(35.75% 0.0477 46.79) 58.1%, oklch(36.81% 0.0487 46.98) 61.3%, oklch(37.93% 0.0496 47.18) 64.5%, oklch(39.08% 0.0506 47.39) 67.7%, oklch(40.24% 0.0515 47.62) 71.0%, oklch(41.41% 0.0525 47.84) 74.2%, oklch(42.56% 0.0534 48.07) 77.4%, oklch(43.68% 0.0542 48.30) 80.6%, oklch(44.75% 0.0550 48.51) 83.9%, oklch(45.76% 0.0558 48.72) 87.1%, oklch(46.68% 0.0565 48.90) 90.3%, oklch(47.50% 0.0571 49.07) 93.5%, oklch(48.20% 0.0577 49.21) 96.8%, oklch(48.76% 0.0581 49.32) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.238 | 0.031 | 46 |
| 2 | 0.334 | 0.045 | 46.4 |
| 3 | 0.488 | 0.058 | 49.3 |

## In these collections

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

## Other forms

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