# Monochrome brown linear swatches

Monochrome brown linear swatches with 32 colors: #998258, #988056, #977d53, #957a4f, #94774c, #927348, #906f43, #8f6b3f, #8c673b, #8a6236, #885e32, #86592e, #83552b, #805028, #7d4c25, #7a4923, #774521, #74421f, #703e1e, #6c3b1d, #67371c, #63341b, #5e311a, #5a2e19, #552b18, #512817, #4d2516, #492315, #452114, #421f13, #3f1e13, #3d1c12. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSnS86uR88qKUPe`
- Page: https://grabient.com/kSnS86uR88qKUPe?style=linearSwatches&steps=32
- Drawn as: linear swatches, 32 steps, 90 degrees
- Kinds: light to dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#998258` | `oklch(61.81% 0.0648 82.27)` | Grassy Cliff | black, 5.6 to 1 |
| 2 | `#988056` | `oklch(61.20% 0.0656 81.25)` | Branching-Out Olive | black, 5.5 to 1 |
| 3 | `#977d53` | `oklch(60.46% 0.0668 79.99)` | Alluring Umber | black, 5.3 to 1 |
| 4 | `#957a4f` | `oklch(59.61% 0.0682 78.52)` | Alluring Umber | black, 5.2 to 1 |
| 5 | `#94774c` | `oklch(58.66% 0.0699 76.87)` | Beaumont Brown | black, 4.9 to 1 |
| 6 | `#927348` | `oklch(57.63% 0.0717 75.06)` | Fallen Leaves | black, 4.7 to 1 |
| 7 | `#906f43` | `oklch(56.52% 0.0736 73.14)` | Gold Spike | white, 4.6 to 1 |
| 8 | `#8f6b3f` | `oklch(55.36% 0.0755 71.13)` | Olde World Gold | white, 4.8 to 1 |
| 9 | `#8c673b` | `oklch(54.15% 0.0775 69.06)` | Beagle Brown | white, 5.1 to 1 |
| 10 | `#8a6236` | `oklch(52.90% 0.0793 66.97)` | McKenzie | white, 5.3 to 1 |
| 11 | `#885e32` | `oklch(51.63% 0.0810 64.88)` | Treacle | white, 5.7 to 1 |
| 12 | `#86592e` | `oklch(50.36% 0.0825 62.82)` | Treacle | white, 6 to 1 |
| 13 | `#83552b` | `oklch(49.09% 0.0838 60.82)` | Lion’s Lair | white, 6.3 to 1 |
| 14 | `#805028` | `oklch(47.84% 0.0848 58.92)` | Valise | white, 6.7 to 1 |
| 15 | `#7d4c25` | `oklch(46.62% 0.0854 57.15)` | Kinsusutake Brown | white, 7.1 to 1 |
| 16 | `#7a4923` | `oklch(45.45% 0.0855 55.53)` | Urban Auburn | white, 7.5 to 1 |
| 17 | `#774521` | `oklch(44.31% 0.0852 54.08)` | Bull Shot | white, 7.8 to 1 |
| 18 | `#74421f` | `oklch(43.12% 0.0844 52.67)` | Walnut | white, 8.3 to 1 |
| 19 | `#703e1e` | `oklch(41.88% 0.0831 51.28)` | Peruvian Soil | white, 8.7 to 1 |
| 20 | `#6c3b1d` | `oklch(40.58% 0.0814 49.92)` | Searing Gorge Brown | white, 9.2 to 1 |
| 21 | `#67371c` | `oklch(39.27% 0.0795 48.60)` | Meatloaf | white, 9.7 to 1 |
| 22 | `#63341b` | `oklch(37.93% 0.0772 47.32)` | Chubby Chocolate | white, 10.3 to 1 |
| 23 | `#5e311a` | `oklch(36.60% 0.0748 46.09)` | Overbaked | white, 10.9 to 1 |
| 24 | `#5a2e19` | `oklch(35.29% 0.0722 44.91)` | Fudge Brownie | white, 11.4 to 1 |
| 25 | `#552b18` | `oklch(34.01% 0.0696 43.78)` | Fudge Brownie | white, 12 to 1 |
| 26 | `#512817` | `oklch(32.77% 0.0670 42.71)` | Bittersweet Chocolate | white, 12.6 to 1 |
| 27 | `#4d2516` | `oklch(31.60% 0.0645 41.71)` | Torrefacto Roast | white, 13.1 to 1 |
| 28 | `#492315` | `oklch(30.50% 0.0620 40.78)` | Wild Brown | white, 13.6 to 1 |
| 29 | `#452114` | `oklch(29.49% 0.0598 39.93)` | Longan’s Kernel | white, 14.1 to 1 |
| 30 | `#421f13` | `oklch(28.59% 0.0579 39.16)` | Délicieux au Chocolat | white, 14.5 to 1 |
| 31 | `#3f1e13` | `oklch(27.81% 0.0563 38.48)` | Délicieux au Chocolat | white, 14.9 to 1 |
| 32 | `#3d1c12` | `oklch(27.17% 0.0551 37.88)` | Délicieux au Chocolat | white, 15.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #998258 0.000% 3.125%, #988056 3.125% 6.250%, #977d53 6.250% 9.375%, #957a4f 9.375% 12.500%, #94774c 12.500% 15.625%, #927348 15.625% 18.750%, #906f43 18.750% 21.875%, #8f6b3f 21.875% 25.000%, #8c673b 25.000% 28.125%, #8a6236 28.125% 31.250%, #885e32 31.250% 34.375%, #86592e 34.375% 37.500%, #83552b 37.500% 40.625%, #805028 40.625% 43.750%, #7d4c25 43.750% 46.875%, #7a4923 46.875% 50.000%, #774521 50.000% 53.125%, #74421f 53.125% 56.250%, #703e1e 56.250% 59.375%, #6c3b1d 59.375% 62.500%, #67371c 62.500% 65.625%, #63341b 65.625% 68.750%, #5e311a 68.750% 71.875%, #5a2e19 71.875% 75.000%, #552b18 75.000% 78.125%, #512817 78.125% 81.250%, #4d2516 81.250% 84.375%, #492315 84.375% 87.500%, #452114 87.500% 90.625%, #421f13 90.625% 93.750%, #3f1e13 93.750% 96.875%, #3d1c12 96.875% 100.000%);
background: linear-gradient(90deg, oklch(61.81% 0.0648 82.27) 0.000% 3.125%, oklch(61.20% 0.0656 81.25) 3.125% 6.250%, oklch(60.46% 0.0668 79.99) 6.250% 9.375%, oklch(59.61% 0.0682 78.52) 9.375% 12.500%, oklch(58.66% 0.0699 76.87) 12.500% 15.625%, oklch(57.63% 0.0717 75.06) 15.625% 18.750%, oklch(56.52% 0.0736 73.14) 18.750% 21.875%, oklch(55.36% 0.0755 71.13) 21.875% 25.000%, oklch(54.15% 0.0775 69.06) 25.000% 28.125%, oklch(52.90% 0.0793 66.97) 28.125% 31.250%, oklch(51.63% 0.0810 64.88) 31.250% 34.375%, oklch(50.36% 0.0825 62.82) 34.375% 37.500%, oklch(49.09% 0.0838 60.82) 37.500% 40.625%, oklch(47.84% 0.0848 58.92) 40.625% 43.750%, oklch(46.62% 0.0854 57.15) 43.750% 46.875%, oklch(45.45% 0.0855 55.53) 46.875% 50.000%, oklch(44.31% 0.0852 54.08) 50.000% 53.125%, oklch(43.12% 0.0844 52.67) 53.125% 56.250%, oklch(41.88% 0.0831 51.28) 56.250% 59.375%, oklch(40.58% 0.0814 49.92) 59.375% 62.500%, oklch(39.27% 0.0795 48.60) 62.500% 65.625%, oklch(37.93% 0.0772 47.32) 65.625% 68.750%, oklch(36.60% 0.0748 46.09) 68.750% 71.875%, oklch(35.29% 0.0722 44.91) 71.875% 75.000%, oklch(34.01% 0.0696 43.78) 75.000% 78.125%, oklch(32.77% 0.0670 42.71) 78.125% 81.250%, oklch(31.60% 0.0645 41.71) 81.250% 84.375%, oklch(30.50% 0.0620 40.78) 84.375% 87.500%, oklch(29.49% 0.0598 39.93) 87.500% 90.625%, oklch(28.59% 0.0579 39.16) 90.625% 93.750%, oklch(27.81% 0.0563 38.48) 93.750% 96.875%, oklch(27.17% 0.0551 37.88) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.618 | 0.065 | 82.3 |
| 2 | 0.449 | 0.085 | 54.8 |
| 3 | 0.272 | 0.055 | 37.9 |

## In these collections

- [Weathered garden gradients](https://grabient.com/weathered-garden-gradients)
- [Earth tone gradients](https://grabient.com/earth-tone-gradients)

## Other forms

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