# Analogous beige, yellow and orange linear gradient

Analogous beige, yellow and orange linear gradient with 5 colors: #fef0ce, #fee082, #fec03f, #e69322, #bf5b33. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW8yI-9CtAes4PrdNz5SrK8w`
- Page: https://grabient.com/kW8yI-9CtAes4PrdNz5SrK8w?steps=5&angle=180
- Drawn as: linear gradient, 5 steps, 180 degrees
- Kinds: light to dark, vivid, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#fef0ce` | `oklch(95.67% 0.0469 87.89)` | Walnut Milkies | black, 18.5 to 1 |
| 2 | `#fee082` | `oklch(91.34% 0.1185 92.12)` | June Day | black, 16.2 to 1 |
| 3 | `#fec03f` | `oklch(84.25% 0.1543 81.55)` | Nârenji Orange | black, 12.7 to 1 |
| 4 | `#e69322` | `oklch(73.23% 0.1516 67.81)` | Sanskrit | black, 8.5 to 1 |
| 5 | `#bf5b33` | `oklch(58.66% 0.1392 41.39)` | Tartare | black, 4.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #fef0ce 0.0%, #fee082 25.0%, #fec03f 50.0%, #e69322 75.0%, #bf5b33 100.0%);
background: linear-gradient(180deg in oklch, oklch(95.67% 0.0469 87.89) 0.0%, oklch(91.34% 0.1185 92.12) 25.0%, oklch(84.25% 0.1543 81.55) 50.0%, oklch(73.23% 0.1516 67.81) 75.0%, oklch(58.66% 0.1392 41.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.047 | 87.9 |
| 2 | 0.913 | 0.119 | 92.1 |
| 3 | 0.843 | 0.154 | 81.6 |
| 4 | 0.732 | 0.152 | 67.8 |
| 5 | 0.587 | 0.139 | 41.4 |

## In these collections

- [Wheat field sunset](https://grabient.com/wheat-field-sunset)
- [Thanksgiving gradients](https://grabient.com/thanksgiving-gradients)
- [Golden hour gradients](https://grabient.com/golden-hour-gradients)

## Other forms

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