# Analogous brown, orange and black linear gradient

Analogous brown, orange and black linear gradient with 14 colors: #b36828, #c0732c, #d28232, #db8c35, #d18c37, #ba833a, #9c7638, #786631, #4f4f29, #2a3520, #0e2017, #000c0e, #000105, #000001. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWllko2jHA8aewgfC8gAovOg`
- Page: https://grabient.com/kWllko2jHA8aewgfC8gAovOg?steps=14
- Drawn as: linear gradient, 14 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 | `#c0732c` | `oklch(62.71% 0.1280 58.62)` | Sudan Brown | black, 5.7 to 1 |
| 3 | `#d28232` | `oklch(67.76% 0.1353 61.08)` | Rapakivi Granite | black, 6.9 to 1 |
| 4 | `#db8c35` | `oklch(70.82% 0.1375 64.42)` | Status Bronze | black, 7.8 to 1 |
| 5 | `#d18c37` | `oklch(69.50% 0.1288 67.86)` | Caramelise | black, 7.5 to 1 |
| 6 | `#ba833a` | `oklch(65.21% 0.1120 71.14)` | Butter & Syrup | black, 6.4 to 1 |
| 7 | `#9c7638` | `oklch(59.01% 0.0928 77.72)` | Heavy Ochre | black, 5 to 1 |
| 8 | `#786631` | `oklch(51.51% 0.0755 90.60)` | Himalaya | white, 5.6 to 1 |
| 9 | `#4f4f29` | `oklch(41.71% 0.0569 108.53)` | Warplock Bronze | white, 8.4 to 1 |
| 10 | `#2a3520` | `oklch(31.32% 0.0402 131.42)` | Rangitoto | white, 12.8 to 1 |
| 11 | `#0e2017` | `oklch(22.34% 0.0300 160.11)` | Black Emerald | white, 17 to 1 |
| 12 | `#000c0e` | `oklch(14.17% 0.0241 201.54)` | Black Knight | white, 19.8 to 1 |
| 13 | `#000105` | `oklch(7.12% 0.0220 253.14)` | Black Hole | white, 20.8 to 1 |
| 14 | `#000001` | `oklch(3.47% 0.0212 278.49)` | Black | white, 20.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #b36828 0.0%, #c0732c 7.7%, #d28232 15.4%, #db8c35 23.1%, #d18c37 30.8%, #ba833a 38.5%, #9c7638 46.2%, #786631 53.8%, #4f4f29 61.5%, #2a3520 69.2%, #0e2017 76.9%, #000c0e 84.6%, #000105 92.3%, #000001 100.0%);
background: linear-gradient(90deg in oklch, oklch(59.06% 0.1226 56.95) 0.0%, oklch(62.71% 0.1280 58.62) 7.7%, oklch(67.76% 0.1353 61.08) 15.4%, oklch(70.82% 0.1375 64.42) 23.1%, oklch(69.50% 0.1288 67.86) 30.8%, oklch(65.21% 0.1120 71.14) 38.5%, oklch(59.01% 0.0928 77.72) 46.2%, oklch(51.51% 0.0755 90.60) 53.8%, oklch(41.71% 0.0569 108.53) 61.5%, oklch(31.32% 0.0402 131.42) 69.2%, oklch(22.34% 0.0300 160.11) 76.9%, oklch(14.17% 0.0241 201.54) 84.6%, oklch(7.12% 0.0220 253.14) 92.3%, oklch(3.47% 0.0212 278.49) 100.0%);
```

## 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?steps=14)
- [PNG](https://grabient.com/kWllko2jHA8aewgfC8gAovOg.png?steps=14)
- [SVG](https://grabient.com/kWllko2jHA8aewgfC8gAovOg.svg?steps=14)
- [CSS](https://grabient.com/kWllko2jHA8aewgfC8gAovOg.css?steps=14)
- [ASE](https://grabient.com/kWllko2jHA8aewgfC8gAovOg.ase?steps=14)
- [GPL](https://grabient.com/kWllko2jHA8aewgfC8gAovOg.gpl?steps=14)
- [GRD](https://grabient.com/kWllko2jHA8aewgfC8gAovOg.grd?steps=14)
- [Design tokens](https://grabient.com/kWllko2jHA8aewgfC8gAovOg.tokens.json?steps=14)
- [Social card](https://grabient.com/api/og?seed=kWllko2jHA8aewgfC8gAovOg&steps=14)
- [Palettes like this one](https://grabient.com/palettes?q=kWllko2jHA8aewgfC8gAovOg)
- [Guide for agents](https://grabient.com/llms.txt)