# Warm beige to brown linear gradient

Warm beige to brown linear gradient with 4 colors: #f4e7ab, #d4ae5c, #8e5e25, #422e28. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU6zlF4ag-cKivepC7wA`
- Page: https://grabient.com/kU6zlF4ag-cKivepC7wA?steps=4&angle=180
- Drawn as: linear gradient, 4 steps, 180 degrees
- Kinds: light to dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.2 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 | `#f4e7ab` | `oklch(92.52% 0.0785 97.73)` | Glisten Yellow | black, 16.9 to 1 |
| 2 | `#d4ae5c` | `oklch(76.77% 0.1102 85.05)` | Sell Gold | black, 9.9 to 1 |
| 3 | `#8e5e25` | `oklch(52.36% 0.0951 68.15)` | Afghan Carpet | white, 5.5 to 1 |
| 4 | `#422e28` | `oklch(32.28% 0.0317 35.39)` | Chinese Ink | white, 12.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #f4e7ab 0.0%, #d4ae5c 33.3%, #8e5e25 66.7%, #422e28 100.0%);
background: linear-gradient(180deg in oklch, oklch(92.52% 0.0785 97.73) 0.0%, oklch(76.77% 0.1102 85.05) 33.3%, oklch(52.36% 0.0951 68.15) 66.7%, oklch(32.28% 0.0317 35.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.925 | 0.079 | 97.7 |
| 2 | 0.768 | 0.11 | 85.1 |
| 3 | 0.524 | 0.095 | 68.1 |
| 4 | 0.323 | 0.032 | 35.4 |

## In these collections

- [Oktoberfest](https://grabient.com/oktoberfest)
- [Lemon blossom veranda](https://grabient.com/lemon-blossom-veranda)

## Other forms

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