# Analogous brown to orange linear gradient

Analogous brown to orange linear gradient with 7 colors: #7d6c4f, #9a7c52, #bb884e, #c77e39, #c86a1f, #c25509, #ba4400. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUiSI51KO-c80vjFPD6A`
- Page: https://grabient.com/kUiSI51KO-c80vjFPD6A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.7 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 | `#7d6c4f` | `oklch(53.94% 0.0469 80.86)` | Juicy Fig | white, 5 to 1 |
| 2 | `#9a7c52` | `oklch(60.51% 0.0694 75.44)` | Branching-Out Olive | black, 5.3 to 1 |
| 3 | `#bb884e` | `oklch(66.54% 0.0978 68.18)` | Canvas | black, 6.7 to 1 |
| 4 | `#c77e39` | `oklch(65.65% 0.1232 60.72)` | Exotic Honey | black, 6.4 to 1 |
| 5 | `#c86a1f` | `oklch(62.20% 0.1447 53.38)` | Kincha Brown | black, 5.5 to 1 |
| 6 | `#c25509` | `oklch(58.00% 0.1579 46.65)` | Rust Orange | black, 4.6 to 1 |
| 7 | `#ba4400` | `oklch(54.33% 0.1648 41.72)` | Bolognese | white, 5.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #7d6c4f 0.0%, #9a7c52 16.7%, #bb884e 33.3%, #c77e39 50.0%, #c86a1f 66.7%, #c25509 83.3%, #ba4400 100.0%);
background: linear-gradient(90deg in oklch, oklch(53.94% 0.0469 80.86) 0.0%, oklch(60.51% 0.0694 75.44) 16.7%, oklch(66.54% 0.0978 68.18) 33.3%, oklch(65.65% 0.1232 60.72) 50.0%, oklch(62.20% 0.1447 53.38) 66.7%, oklch(58.00% 0.1579 46.65) 83.3%, oklch(54.33% 0.1648 41.72) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.539 | 0.047 | 80.9 |
| 2 | 0.665 | 0.098 | 68.2 |
| 3 | 0.622 | 0.145 | 53.4 |
| 4 | 0.543 | 0.165 | 41.8 |

## In these collections

- [Warm gradients](https://grabient.com/warm-gradients)

## Other forms

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