# Analogous brown to yellow linear gradient

Analogous brown to yellow linear gradient with 7 colors: #4e300e, #714d1e, #956d30, #b58b41, #cfa54d, #e4bd57, #f2cf5e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWVi8uQR_A9QmQLjLMC7bHAo`
- Page: https://grabient.com/kWVi8uQR_A9QmQLjLMC7bHAo
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.9 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 | `#4e300e` | `oklch(33.86% 0.0648 64.69)` | Bavarian Sweet Mustard | white, 12 to 1 |
| 2 | `#714d1e` | `oklch(44.94% 0.0790 70.17)` | Hairy Brown | white, 7.5 to 1 |
| 3 | `#956d30` | `oklch(56.46% 0.0931 75.41)` | Dirt Yellow | white, 4.6 to 1 |
| 4 | `#b58b41` | `oklch(66.14% 0.1047 79.48)` | Bread Crust | black, 6.7 to 1 |
| 5 | `#cfa54d` | `oklch(74.39% 0.1170 83.71)` | Royal Gold Pearl | black, 9.1 to 1 |
| 6 | `#e4bd57` | `oklch(81.28% 0.1280 88.17)` | Golden Appeal | black, 11.6 to 1 |
| 7 | `#f2cf5e` | `oklch(86.22% 0.1364 92.16)` | Ride off Into the Sunset | black, 13.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #4e300e 0.0%, #714d1e 16.7%, #956d30 33.3%, #b58b41 50.0%, #cfa54d 66.7%, #e4bd57 83.3%, #f2cf5e 100.0%);
background: linear-gradient(90deg in oklch, oklch(33.86% 0.0648 64.69) 0.0%, oklch(44.94% 0.0790 70.17) 16.7%, oklch(56.46% 0.0931 75.41) 33.3%, oklch(66.14% 0.1047 79.48) 50.0%, oklch(74.39% 0.1170 83.71) 66.7%, oklch(81.28% 0.1280 88.17) 83.3%, oklch(86.22% 0.1364 92.16) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.339 | 0.065 | 64.7 |
| 2 | 0.512 | 0.087 | 73.1 |
| 3 | 0.661 | 0.105 | 79.5 |
| 4 | 0.78 | 0.123 | 85.8 |
| 5 | 0.862 | 0.136 | 92.2 |

## In these collections

- [Gold gradients](https://grabient.com/gold-gradients)
- [Wheat field sunset](https://grabient.com/wheat-field-sunset)
- [Glass gradients](https://grabient.com/glass-gradients)

## Other forms

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