# Analogous brown, orange and yellow linear gradient

Analogous brown, orange and yellow linear gradient with 7 colors: #604a0d, #9f5c08, #e57517, #ff9829, #ffbd31, #ffe53a, #fbffb8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYazo9yC88tzAv1mvEI8sFC3zLwY`
- Page: https://grabient.com/kYazo9yC88tzAv1mvEI8sFC3zLwY?angle=33
- Drawn as: linear gradient, 7 steps, 33 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#604a0d` | `oklch(42.13% 0.0799 86.48)` | Mud Brown | white, 8.4 to 1 |
| 2 | `#9f5c08` | `oklch(54.01% 0.1208 62.62)` | Soft Tone Ink | white, 5.2 to 1 |
| 3 | `#e57517` | `oklch(68.01% 0.1662 52.86)` | Martian Colony | black, 6.9 to 1 |
| 4 | `#ff9829` | `oklch(77.19% 0.1667 61.39)` | Guava | black, 9.7 to 1 |
| 5 | `#ffbd31` | `oklch(83.80% 0.1607 80.85)` | Vibrant Honey | black, 12.5 to 1 |
| 6 | `#ffe53a` | `oklch(91.65% 0.1762 100.12)` | Highlighter | black, 16.5 to 1 |
| 7 | `#fbffb8` | `oklch(98.03% 0.0899 110.78)` | Lamenters Yellow | black, 20 to 1 |

## CSS

```css
background: linear-gradient(33deg, #604a0d 0.0%, #9f5c08 16.7%, #e57517 33.3%, #ff9829 50.0%, #ffbd31 66.7%, #ffe53a 83.3%, #fbffb8 100.0%);
background: linear-gradient(33deg in oklch, oklch(42.13% 0.0799 86.48) 0.0%, oklch(54.01% 0.1208 62.62) 16.7%, oklch(68.01% 0.1662 52.86) 33.3%, oklch(77.19% 0.1667 61.39) 50.0%, oklch(83.80% 0.1607 80.85) 66.7%, oklch(91.65% 0.1762 100.12) 83.3%, oklch(98.03% 0.0899 110.78) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.421 | 0.08 | 86.5 |
| 2 | 0.567 | 0.13 | 59 |
| 3 | 0.728 | 0.178 | 53.7 |
| 4 | 0.807 | 0.165 | 72.7 |
| 5 | 0.902 | 0.179 | 97.1 |
| 6 | 0.98 | 0.208 | 110.8 |

## In these collections

- [Golden hour gradients](https://grabient.com/golden-hour-gradients)

## Other forms

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