# Purple, brown, yellow and light green linear gradient

Purple, brown, yellow and light green linear gradient with 21 colors: #403156, #4d2f4b, #573038, #5a3528, #5f3c1f, #684215, #734804, #7a5200, #825c00, #8a6600, #927200, #9a7e01, #a08c03, #a79b06, #afac06, #b7c003, #bed40b, #c3e51f, #c8f332, #cdff41, #dcff9a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaWC_WsBXMjqkwvIKkG2DVB-zHwZ5TUCA`
- Page: https://grabient.com/kaWC_WsBXMjqkwvIKkG2DVB-zHwZ5TUCA?steps=21&angle=180
- Drawn as: linear gradient, 21 steps, 180 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.5 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 | `#403156` | `oklch(34.65% 0.0648 301.64)` | Naggaroth Night | white, 11.7 to 1 |
| 2 | `#4d2f4b` | `oklch(35.20% 0.0620 328.38)` | Grimace | white, 11.5 to 1 |
| 3 | `#573038` | `oklch(36.02% 0.0583 6.42)` | Port Royale | white, 11.1 to 1 |
| 4 | `#5a3528` | `oklch(37.26% 0.0579 40.51)` | Terra Brun | white, 10.5 to 1 |
| 5 | `#5f3c1f` | `oklch(39.08% 0.0649 58.82)` | Cassiterite Brown | white, 9.7 to 1 |
| 6 | `#684215` | `oklch(41.46% 0.0786 66.80)` | Very Coffee | white, 8.8 to 1 |
| 7 | `#734804` | `oklch(44.18% 0.0932 70.64)` | Flat Brown | white, 7.8 to 1 |
| 8 | `#7a5200` | `oklch(47.02% 0.0989 75.58)` | Pickled Grape Leaves | white, 6.9 to 1 |
| 9 | `#825c00` | `oklch(50.05% 0.1036 80.28)` | Soil of Avagddu | white, 6 to 1 |
| 10 | `#8a6600` | `oklch(53.29% 0.1093 84.24)` | Alligator | white, 5.2 to 1 |
| 11 | `#927200` | `oklch(56.69% 0.1157 88.53)` | Vermin Brown | black, 4.6 to 1 |
| 12 | `#9a7e01` | `oklch(60.22% 0.1231 93.55)` | Cerignola Olive | black, 5.3 to 1 |
| 13 | `#a08c03` | `oklch(63.90% 0.1317 98.80)` | Guava Green | black, 6.2 to 1 |
| 14 | `#a79b06` | `oklch(67.88% 0.1421 103.87)` | Nuclear Fallout | black, 7.3 to 1 |
| 15 | `#afac06` | `oklch(72.39% 0.1555 108.52)` | Honey and Thyme | black, 8.7 to 1 |
| 16 | `#b7c003` | `oklch(77.53% 0.1725 113.03)` | La Rioja | black, 10.5 to 1 |
| 17 | `#bed40b` | `oklch(82.55% 0.1888 117.02)` | Evening Primrose | black, 12.6 to 1 |
| 18 | `#c3e51f` | `oklch(86.72% 0.2001 120.07)` | Sour Green | black, 14.5 to 1 |
| 19 | `#c8f332` | `oklch(90.30% 0.2064 122.15)` | Pick Your Poison | black, 16.3 to 1 |
| 20 | `#cdff41` | `oklch(93.24% 0.2099 123.53)` | Yellow Green | black, 17.9 to 1 |
| 21 | `#dcff9a` | `oklch(95.27% 0.1318 124.46)` | Lime Mist | black, 18.8 to 1 |

## CSS

```css
background: linear-gradient(180deg, #403156 0.0%, #4d2f4b 5.0%, #573038 10.0%, #5a3528 15.0%, #5f3c1f 20.0%, #684215 25.0%, #734804 30.0%, #7a5200 35.0%, #825c00 40.0%, #8a6600 45.0%, #927200 50.0%, #9a7e01 55.0%, #a08c03 60.0%, #a79b06 65.0%, #afac06 70.0%, #b7c003 75.0%, #bed40b 80.0%, #c3e51f 85.0%, #c8f332 90.0%, #cdff41 95.0%, #dcff9a 100.0%);
background: linear-gradient(180deg in oklch, oklch(34.65% 0.0648 301.64) 0.0%, oklch(35.20% 0.0620 328.38) 5.0%, oklch(36.02% 0.0583 6.42) 10.0%, oklch(37.26% 0.0579 40.51) 15.0%, oklch(39.08% 0.0649 58.82) 20.0%, oklch(41.46% 0.0786 66.80) 25.0%, oklch(44.18% 0.0932 70.64) 30.0%, oklch(47.02% 0.0989 75.58) 35.0%, oklch(50.05% 0.1036 80.28) 40.0%, oklch(53.29% 0.1093 84.24) 45.0%, oklch(56.69% 0.1157 88.53) 50.0%, oklch(60.22% 0.1231 93.55) 55.0%, oklch(63.90% 0.1317 98.80) 60.0%, oklch(67.88% 0.1421 103.87) 65.0%, oklch(72.39% 0.1555 108.52) 70.0%, oklch(77.53% 0.1725 113.03) 75.0%, oklch(82.55% 0.1888 117.02) 80.0%, oklch(86.72% 0.2001 120.07) 85.0%, oklch(90.30% 0.2064 122.15) 90.0%, oklch(93.24% 0.2099 123.53) 95.0%, oklch(95.27% 0.1318 124.46) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.346 | 0.065 | 301.6 |
| 2 | 0.378 | 0.059 | 408.4 |
| 3 | 0.461 | 0.101 | 433.7 |
| 4 | 0.567 | 0.116 | 448.5 |
| 5 | 0.693 | 0.146 | 465.4 |
| 6 | 0.854 | 0.197 | 479.2 |
| 7 | 0.953 | 0.212 | 484.5 |

## In these collections

- [Dark multicolor gradients](https://grabient.com/dark-multicolor-gradients)

## Other forms

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