# Analogous brown, orange and black linear swatches

Analogous brown, orange and black linear swatches with 24 colors: #b36828, #b96d2a, #c3742d, #cd7d30, #d68533, #db8b35, #d98e36, #d28c37, #c68839, #b8823a, #a77b39, #947336, #806a32, #6a5e2e, #525129, #3c4325, #28341f, #18271a, #091c15, #001110, #00070a, #000205, #000003, #000001. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWllko2jHA8aewgfC8gAovOg`
- Page: https://grabient.com/kWllko2jHA8aewgfC8gAovOg?style=linearSwatches&steps=24
- Drawn as: linear swatches, 24 steps, 90 degrees
- Kinds: light center, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.8 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 | `#b36828` | `oklch(59.06% 0.1226 56.95)` | Dirty Brown | black, 4.9 to 1 |
| 2 | `#b96d2a` | `oklch(60.75% 0.1250 57.80)` | Brown Alpaca | black, 5.2 to 1 |
| 3 | `#c3742d` | `oklch(63.36% 0.1290 58.89)` | Orange Squash | black, 5.8 to 1 |
| 4 | `#cd7d30` | `oklch(66.28% 0.1333 60.24)` | Polished Bronze | black, 6.5 to 1 |
| 5 | `#d68533` | `oklch(68.89% 0.1367 61.86)` | Sunlounge | black, 7.2 to 1 |
| 6 | `#db8b35` | `oklch(70.58% 0.1378 63.77)` | Status Bronze | black, 7.7 to 1 |
| 7 | `#d98e36` | `oklch(70.75% 0.1355 65.95)` | Soft Pumpkin | black, 7.8 to 1 |
| 8 | `#d28c37` | `oklch(69.63% 0.1294 67.74)` | Caramelise | black, 7.5 to 1 |
| 9 | `#c68839` | `oklch(67.56% 0.1207 69.38)` | Gold Coast | black, 7 to 1 |
| 10 | `#b8823a` | `oklch(64.73% 0.1104 71.53)` | Monarch Gold | black, 6.2 to 1 |
| 11 | `#a77b39` | `oklch(61.32% 0.0994 74.83)` | Rich Sorrel | black, 5.5 to 1 |
| 12 | `#947336` | `oklch(57.51% 0.0888 79.94)` | California Gold Rush | black, 4.7 to 1 |
| 13 | `#806a32` | `oklch(53.35% 0.0793 87.32)` | By Gum | white, 5.2 to 1 |
| 14 | `#6a5e2e` | `oklch(48.30% 0.0691 96.29)` | Saguaro | white, 6.4 to 1 |
| 15 | `#525129` | `oklch(42.62% 0.0585 106.78)` | Warplock Bronze | white, 8.1 to 1 |
| 16 | `#3c4325` | `oklch(36.69% 0.0484 118.84)` | Deep Seaweed | white, 10.4 to 1 |
| 17 | `#28341f` | `oklch(30.89% 0.0396 132.53)` | Rangitoto | white, 13 to 1 |
| 18 | `#18271a` | `oklch(25.60% 0.0329 147.94)` | Deep Slate Olive | white, 15.5 to 1 |
| 19 | `#091c15` | `oklch(20.89% 0.0291 166.39)` | Pinch of Pepper | white, 17.6 to 1 |
| 20 | `#001110` | `oklch(16.22% 0.0278 189.63)` | Black Glaze | white, 19.2 to 1 |
| 21 | `#00070a` | `oklch(11.84% 0.0211 216.25)` | Eight Ball | white, 20.2 to 1 |
| 22 | `#000205` | `oklch(7.92% 0.0203 245.89)` | Black Hole | white, 20.7 to 1 |
| 23 | `#000003` | `oklch(4.50% 0.0305 264.13)` | Binary Black | white, 20.9 to 1 |
| 24 | `#000001` | `oklch(3.47% 0.0212 278.49)` | Black | white, 20.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #b36828 0.000% 4.167%, #b96d2a 4.167% 8.333%, #c3742d 8.333% 12.500%, #cd7d30 12.500% 16.667%, #d68533 16.667% 20.833%, #db8b35 20.833% 25.000%, #d98e36 25.000% 29.167%, #d28c37 29.167% 33.333%, #c68839 33.333% 37.500%, #b8823a 37.500% 41.667%, #a77b39 41.667% 45.833%, #947336 45.833% 50.000%, #806a32 50.000% 54.167%, #6a5e2e 54.167% 58.333%, #525129 58.333% 62.500%, #3c4325 62.500% 66.667%, #28341f 66.667% 70.833%, #18271a 70.833% 75.000%, #091c15 75.000% 79.167%, #001110 79.167% 83.333%, #00070a 83.333% 87.500%, #000205 87.500% 91.667%, #000003 91.667% 95.833%, #000001 95.833% 100.000%);
background: linear-gradient(90deg, oklch(59.06% 0.1226 56.95) 0.000% 4.167%, oklch(60.75% 0.1250 57.80) 4.167% 8.333%, oklch(63.36% 0.1290 58.89) 8.333% 12.500%, oklch(66.28% 0.1333 60.24) 12.500% 16.667%, oklch(68.89% 0.1367 61.86) 16.667% 20.833%, oklch(70.58% 0.1378 63.77) 20.833% 25.000%, oklch(70.75% 0.1355 65.95) 25.000% 29.167%, oklch(69.63% 0.1294 67.74) 29.167% 33.333%, oklch(67.56% 0.1207 69.38) 33.333% 37.500%, oklch(64.73% 0.1104 71.53) 37.500% 41.667%, oklch(61.32% 0.0994 74.83) 41.667% 45.833%, oklch(57.51% 0.0888 79.94) 45.833% 50.000%, oklch(53.35% 0.0793 87.32) 50.000% 54.167%, oklch(48.30% 0.0691 96.29) 54.167% 58.333%, oklch(42.62% 0.0585 106.78) 58.333% 62.500%, oklch(36.69% 0.0484 118.84) 62.500% 66.667%, oklch(30.89% 0.0396 132.53) 66.667% 70.833%, oklch(25.60% 0.0329 147.94) 70.833% 75.000%, oklch(20.89% 0.0291 166.39) 75.000% 79.167%, oklch(16.22% 0.0278 189.63) 79.167% 83.333%, oklch(11.84% 0.0211 216.25) 83.333% 87.500%, oklch(7.92% 0.0203 245.89) 87.500% 91.667%, oklch(4.50% 0.0305 264.13) 91.667% 95.833%, oklch(3.47% 0.0212 278.49) 95.833% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.591 | 0.123 | 57 |
| 2 | 0.709 | 0.136 | 65.4 |
| 3 | 0.555 | 0.084 | 83.4 |
| 4 | 0.244 | 0.032 | 152.1 |
| 5 | 0.02 | 0.032 | 275.7 |

## In these collections

- [Retro gradients](https://grabient.com/retro-gradients)
- [Text gradients](https://grabient.com/text-gradients)
- [Autumn gradients](https://grabient.com/autumn-gradients)
- [Wallpaper gradients](https://grabient.com/wallpaper-gradients)

## Other forms

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