# Monochrome brown and tan angular gradient

Monochrome brown and tan angular gradient with 32 colors: #342500, #382800, #3d2d00, #443200, #4d3900, #584000, #654a00, #755600, #886300, #9b7100, #ac8020, #b98e3f, #c69e59, #d4ad71, #e0bc86, #e9c798, #f0d0a6, #f5d7b3, #f8dcbe, #f8dec3, #f5dbc2, #edd1b7, #e1bea1, #d0a684, #be8a63, #ae7044, #a05928, #954303, #823300, #712600, #631b00, #581400. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaRoU9sjs_1GqP3tmT88RC-0WoPmnQr4A`
- Page: https://grabient.com/kaRoU9sjs_1GqP3tmT88RC-0WoPmnQr4A?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.4 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 | `#342500` | `oklch(27.56% 0.0564 86.31)` | Black Swan | white, 14.8 to 1 |
| 2 | `#382800` | `oklch(28.91% 0.0592 86.24)` | Secret Passage | white, 14.2 to 1 |
| 3 | `#3d2d00` | `oklch(30.68% 0.0628 86.17)` | Hidden Passage | white, 13.3 to 1 |
| 4 | `#443200` | `oklch(32.90% 0.0673 86.04)` | Night in the Woods | white, 12.3 to 1 |
| 5 | `#4d3900` | `oklch(35.59% 0.0729 85.82)` | Xanthophobia | white, 11.1 to 1 |
| 6 | `#584000` | `oklch(38.79% 0.0795 85.44)` | Sugarloaf Brown | white, 9.7 to 1 |
| 7 | `#654a00` | `oklch(42.67% 0.0875 84.90)` | Notorious Neanderthal | white, 8.2 to 1 |
| 8 | `#755600` | `oklch(47.33% 0.0971 84.21)` | Pickled Grape Leaves | white, 6.7 to 1 |
| 9 | `#886300` | `oklch(52.43% 0.1077 83.40)` | Alligator | white, 5.4 to 1 |
| 10 | `#9b7100` | `oklch(57.65% 0.1187 82.50)` | Sandy Taupe | black, 4.7 to 1 |
| 11 | `#ac8020` | `oklch(62.63% 0.1188 81.54)` | Burnt Honey | black, 5.8 to 1 |
| 12 | `#b98e3f` | `oklch(67.29% 0.1095 80.51)` | Trading Post | black, 7 to 1 |
| 13 | `#c69e59` | `oklch(72.17% 0.0998 79.42)` | Camel | black, 8.4 to 1 |
| 14 | `#d4ad71` | `oklch(76.96% 0.0901 78.26)` | Drops of Honey | black, 10 to 1 |
| 15 | `#e0bc86` | `oklch(81.31% 0.0808 77.00)` | Honey Robber | black, 11.6 to 1 |
| 16 | `#e9c798` | `oklch(84.86% 0.0725 75.61)` | Golden Talisman | black, 13.1 to 1 |
| 17 | `#f0d0a6` | `oklch(87.41% 0.0653 74.08)` | Amber Moon | black, 14.2 to 1 |
| 18 | `#f5d7b3` | `oklch(89.54% 0.0577 72.43)` | Walnut Cream | black, 15.2 to 1 |
| 19 | `#f8dcbe` | `oklch(91.03% 0.0507 70.65)` | Toes in the Sand | black, 15.9 to 1 |
| 20 | `#f8dec3` | `oklch(91.51% 0.0457 68.76)` | Incan Treasure | black, 16.2 to 1 |
| 21 | `#f5dbc2` | `oklch(90.57% 0.0440 66.75)` | Buenos Aires | black, 15.7 to 1 |
| 22 | `#edd1b7` | `oklch(87.79% 0.0471 64.63)` | Clamshell | black, 14.4 to 1 |
| 23 | `#e1bea1` | `oklch(82.51% 0.0557 62.38)` | Eggshell Paper | black, 12.1 to 1 |
| 24 | `#d0a684` | `oklch(75.45% 0.0683 60.02)` | Sunset Beige | black, 9.4 to 1 |
| 25 | `#be8a63` | `oklch(67.63% 0.0831 57.53)` | Fenugreek | black, 7 to 1 |
| 26 | `#ae7044` | `oklch(60.07% 0.0984 54.93)` | Pale Cordovan | black, 5.1 to 1 |
| 27 | `#a05928` | `oklch(53.78% 0.1125 52.20)` | Bright Bronze | white, 5.3 to 1 |
| 28 | `#954303` | `oklch(48.13% 0.1276 48.99)` | Roux | white, 6.8 to 1 |
| 29 | `#823300` | `oklch(42.71% 0.1213 45.36)` | Coffee Addiction | white, 8.6 to 1 |
| 30 | `#712600` | `oklch(37.79% 0.1144 41.84)` | Chestnut | white, 10.6 to 1 |
| 31 | `#631b00` | `oklch(33.69% 0.1084 38.79)` | Cowpeas | white, 12.4 to 1 |
| 32 | `#581400` | `oklch(30.71% 0.1037 36.63)` | Baragon Brown | white, 13.8 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #342500 0.0%, #382800 3.2%, #3d2d00 6.5%, #443200 9.7%, #4d3900 12.9%, #584000 16.1%, #654a00 19.4%, #755600 22.6%, #886300 25.8%, #9b7100 29.0%, #ac8020 32.3%, #b98e3f 35.5%, #c69e59 38.7%, #d4ad71 41.9%, #e0bc86 45.2%, #e9c798 48.4%, #f0d0a6 51.6%, #f5d7b3 54.8%, #f8dcbe 58.1%, #f8dec3 61.3%, #f5dbc2 64.5%, #edd1b7 67.7%, #e1bea1 71.0%, #d0a684 74.2%, #be8a63 77.4%, #ae7044 80.6%, #a05928 83.9%, #954303 87.1%, #823300 90.3%, #712600 93.5%, #631b00 96.8%, #581400 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(27.56% 0.0564 86.31) 0.0%, oklch(28.91% 0.0592 86.24) 3.2%, oklch(30.68% 0.0628 86.17) 6.5%, oklch(32.90% 0.0673 86.04) 9.7%, oklch(35.59% 0.0729 85.82) 12.9%, oklch(38.79% 0.0795 85.44) 16.1%, oklch(42.67% 0.0875 84.90) 19.4%, oklch(47.33% 0.0971 84.21) 22.6%, oklch(52.43% 0.1077 83.40) 25.8%, oklch(57.65% 0.1187 82.50) 29.0%, oklch(62.63% 0.1188 81.54) 32.3%, oklch(67.29% 0.1095 80.51) 35.5%, oklch(72.17% 0.0998 79.42) 38.7%, oklch(76.96% 0.0901 78.26) 41.9%, oklch(81.31% 0.0808 77.00) 45.2%, oklch(84.86% 0.0725 75.61) 48.4%, oklch(87.41% 0.0653 74.08) 51.6%, oklch(89.54% 0.0577 72.43) 54.8%, oklch(91.03% 0.0507 70.65) 58.1%, oklch(91.51% 0.0457 68.76) 61.3%, oklch(90.57% 0.0440 66.75) 64.5%, oklch(87.79% 0.0471 64.63) 67.7%, oklch(82.51% 0.0557 62.38) 71.0%, oklch(75.45% 0.0683 60.02) 74.2%, oklch(67.63% 0.0831 57.53) 77.4%, oklch(60.07% 0.0984 54.93) 80.6%, oklch(53.78% 0.1125 52.20) 83.9%, oklch(48.13% 0.1276 48.99) 87.1%, oklch(42.71% 0.1213 45.36) 90.3%, oklch(37.79% 0.1144 41.84) 93.5%, oklch(33.69% 0.1084 38.79) 96.8%, oklch(30.71% 0.1037 36.63) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.183 | 86.5 |
| 2 | 0.394 | 0.163 | 85.4 |
| 3 | 0.642 | 0.116 | 81.2 |
| 4 | 0.862 | 0.069 | 74.9 |
| 5 | 0.89 | 0.045 | 65.3 |
| 6 | 0.547 | 0.11 | 52.7 |
| 7 | 0.307 | 0.183 | 36.8 |

## In these collections

- [Wood color palette](https://grabient.com/wood-color-palette)
- [Brown gradients](https://grabient.com/brown-gradients)
- [Thanksgiving gradients](https://grabient.com/thanksgiving-gradients)

## Other forms

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