# Analogous brown, orange and tan linear gradient

Analogous brown, orange and tan linear gradient with 4 colors: #371300, #913910, #e67604, #fdda90. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUPTMiOq8_Na9wXypMOA`
- Page: https://grabient.com/kUPTMiOq8_Na9wXypMOA?steps=4
- Drawn as: linear gradient, 4 steps, 90 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.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 | `#371300` | `oklch(24.02% 0.0660 47.38)` | Chocolate Melange | white, 16.7 to 1 |
| 2 | `#913910` | `oklch(46.06% 0.1295 41.47)` | Citrine Brown | white, 7.5 to 1 |
| 3 | `#e67604` | `oklch(68.11% 0.1695 54.15)` | Martian Colony | black, 6.9 to 1 |
| 4 | `#fdda90` | `oklch(90.16% 0.1006 84.80)` | Cha-Cha-Cha | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #371300 0.0%, #913910 33.3%, #e67604 66.7%, #fdda90 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.02% 0.0660 47.38) 0.0%, oklch(46.06% 0.1295 41.47) 33.3%, oklch(68.11% 0.1695 54.15) 66.7%, oklch(90.16% 0.1006 84.80) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.07 | 47.8 |
| 2 | 0.461 | 0.13 | 41.5 |
| 3 | 0.681 | 0.169 | 54.2 |
| 4 | 0.902 | 0.101 | 84.8 |

## In these collections

- [Thanksgiving gradients](https://grabient.com/thanksgiving-gradients)

## Other forms

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