# Analogous brown to yellow linear gradient

Analogous brown to yellow linear gradient with 32 colors: #4e300e, #533310, #583812, #5f3e16, #674419, #6f4b1d, #785321, #7f5925, #866028, #8d662b, #936b2f, #9a7132, #a07736, #a67d39, #ac833c, #b2883f, #b78d42, #bd9345, #c29847, #c79d49, #cca24c, #d1a74e, #d5ac50, #d9b051, #ddb553, #e1b955, #e5be57, #e8c259, #ebc65a, #eec95c, #f0cc5d, #f2cf5e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWVi8uQR_A9QmQLjLMC7bHAo`
- Page: https://grabient.com/kWVi8uQR_A9QmQLjLMC7bHAo?steps=32
- Drawn as: linear gradient, 32 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 | `#533310` | `oklch(35.26% 0.0666 65.38)` | Moelleux au Chocolat | white, 11.3 to 1 |
| 3 | `#583812` | `oklch(37.16% 0.0690 66.32)` | Chocolate Fantasies | white, 10.5 to 1 |
| 4 | `#5f3e16` | `oklch(39.41% 0.0719 67.44)` | Hippogriff Brown | white, 9.5 to 1 |
| 5 | `#674419` | `oklch(41.90% 0.0751 68.68)` | Very Coffee | white, 8.6 to 1 |
| 6 | `#6f4b1d` | `oklch(44.51% 0.0784 69.95)` | Vintage Wood | white, 7.7 to 1 |
| 7 | `#785321` | `oklch(47.09% 0.0817 71.21)` | Lizard Brown | white, 6.9 to 1 |
| 8 | `#7f5925` | `oklch(49.52% 0.0847 72.37)` | Hot Curry | white, 6.2 to 1 |
| 9 | `#866028` | `oklch(51.70% 0.0875 73.38)` | Kumera | white, 5.6 to 1 |
| 10 | `#8d662b` | `oklch(53.76% 0.0899 74.28)` | Tapenade | white, 5.1 to 1 |
| 11 | `#936b2f` | `oklch(55.79% 0.0923 75.14)` | Vintage Caramel | white, 4.7 to 1 |
| 12 | `#9a7132` | `oklch(57.78% 0.0946 75.95)` | Buttered Rum | black, 4.7 to 1 |
| 13 | `#a07736` | `oklch(59.73% 0.0969 76.74)` | Natural Evolution | black, 5.1 to 1 |
| 14 | `#a67d39` | `oklch(61.63% 0.0991 77.51)` | Fluor Spar | black, 5.6 to 1 |
| 15 | `#ac833c` | `oklch(63.48% 0.1013 78.29)` | Bird’s-Eye | black, 6 to 1 |
| 16 | `#b2883f` | `oklch(65.27% 0.1036 79.08)` | Butterscotch Ripple | black, 6.4 to 1 |
| 17 | `#b78d42` | `oklch(67.00% 0.1059 79.89)` | Bread Crust | black, 6.9 to 1 |
| 18 | `#bd9345` | `oklch(68.68% 0.1083 80.71)` | Alluvial Inca | black, 7.4 to 1 |
| 19 | `#c29847` | `oklch(70.31% 0.1106 81.53)` | Suzani Gold | black, 7.8 to 1 |
| 20 | `#c79d49` | `oklch(71.89% 0.1130 82.35)` | Goldbricker | black, 8.3 to 1 |
| 21 | `#cca24c` | `oklch(73.41% 0.1154 83.16)` | Golden Sheaf | black, 8.8 to 1 |
| 22 | `#d1a74e` | `oklch(74.88% 0.1177 83.98)` | Royal Gold Pearl | black, 9.3 to 1 |
| 23 | `#d5ac50` | `oklch(76.28% 0.1200 84.80)` | Solar Relic | black, 9.8 to 1 |
| 24 | `#d9b051` | `oklch(77.63% 0.1221 85.62)` | Golden Cricket | black, 10.2 to 1 |
| 25 | `#ddb553` | `oklch(78.93% 0.1242 86.46)` | High Honey | black, 10.7 to 1 |
| 26 | `#e1b955` | `oklch(80.22% 0.1263 87.38)` | Sun God | black, 11.2 to 1 |
| 27 | `#e5be57` | `oklch(81.48% 0.1284 88.33)` | Golden Appeal | black, 11.7 to 1 |
| 28 | `#e8c259` | `oklch(82.68% 0.1304 89.27)` | Honey Crisp | black, 12.2 to 1 |
| 29 | `#ebc65a` | `oklch(83.78% 0.1323 90.17)` | Blonde Girl | black, 12.7 to 1 |
| 30 | `#eec95c` | `oklch(84.76% 0.1339 90.98)` | Citrus Zest | black, 13.1 to 1 |
| 31 | `#f0cc5d` | `oklch(85.58% 0.1353 91.66)` | Vault-Tec Yellow | black, 13.5 to 1 |
| 32 | `#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%, #533310 3.2%, #583812 6.5%, #5f3e16 9.7%, #674419 12.9%, #6f4b1d 16.1%, #785321 19.4%, #7f5925 22.6%, #866028 25.8%, #8d662b 29.0%, #936b2f 32.3%, #9a7132 35.5%, #a07736 38.7%, #a67d39 41.9%, #ac833c 45.2%, #b2883f 48.4%, #b78d42 51.6%, #bd9345 54.8%, #c29847 58.1%, #c79d49 61.3%, #cca24c 64.5%, #d1a74e 67.7%, #d5ac50 71.0%, #d9b051 74.2%, #ddb553 77.4%, #e1b955 80.6%, #e5be57 83.9%, #e8c259 87.1%, #ebc65a 90.3%, #eec95c 93.5%, #f0cc5d 96.8%, #f2cf5e 100.0%);
background: linear-gradient(90deg in oklch, oklch(33.86% 0.0648 64.69) 0.0%, oklch(35.26% 0.0666 65.38) 3.2%, oklch(37.16% 0.0690 66.32) 6.5%, oklch(39.41% 0.0719 67.44) 9.7%, oklch(41.90% 0.0751 68.68) 12.9%, oklch(44.51% 0.0784 69.95) 16.1%, oklch(47.09% 0.0817 71.21) 19.4%, oklch(49.52% 0.0847 72.37) 22.6%, oklch(51.70% 0.0875 73.38) 25.8%, oklch(53.76% 0.0899 74.28) 29.0%, oklch(55.79% 0.0923 75.14) 32.3%, oklch(57.78% 0.0946 75.95) 35.5%, oklch(59.73% 0.0969 76.74) 38.7%, oklch(61.63% 0.0991 77.51) 41.9%, oklch(63.48% 0.1013 78.29) 45.2%, oklch(65.27% 0.1036 79.08) 48.4%, oklch(67.00% 0.1059 79.89) 51.6%, oklch(68.68% 0.1083 80.71) 54.8%, oklch(70.31% 0.1106 81.53) 58.1%, oklch(71.89% 0.1130 82.35) 61.3%, oklch(73.41% 0.1154 83.16) 64.5%, oklch(74.88% 0.1177 83.98) 67.7%, oklch(76.28% 0.1200 84.80) 71.0%, oklch(77.63% 0.1221 85.62) 74.2%, oklch(78.93% 0.1242 86.46) 77.4%, oklch(80.22% 0.1263 87.38) 80.6%, oklch(81.48% 0.1284 88.33) 83.9%, oklch(82.68% 0.1304 89.27) 87.1%, oklch(83.78% 0.1323 90.17) 90.3%, oklch(84.76% 0.1339 90.98) 93.5%, oklch(85.58% 0.1353 91.66) 96.8%, 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

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

## Other forms

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