# Orange, brown and dark purple linear gradient

Orange, brown and dark purple linear gradient with 7 colors: #cf7710, #f3934d, #b07831, #392902, #322333, #222543, #34033a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWpmsr3rC_KUVQ0ljaxHibFQ`
- Page: https://grabient.com/kWpmsr3rC_KUVQ0ljaxHibFQ
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, vivid, dark, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 7.4 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 | `#cf7710` | `oklch(65.35% 0.1474 61.17)` | Tree Sap | black, 6.3 to 1 |
| 2 | `#f3934d` | `oklch(75.08% 0.1434 54.60)` | Faded Orange | black, 9 to 1 |
| 3 | `#b07831` | `oklch(61.65% 0.1110 68.96)` | Butterbeer | black, 5.5 to 1 |
| 4 | `#392902` | `oklch(29.13% 0.0579 83.36)` | Secret Passage | white, 14.1 to 1 |
| 5 | `#322333` | `oklch(28.17% 0.0354 324.30)` | Zero Gravity | white, 14.7 to 1 |
| 6 | `#222543` | `oklch(27.81% 0.0561 278.63)` | Black Market | white, 14.8 to 1 |
| 7 | `#34033a` | `oklch(23.62% 0.1061 322.89)` | Dark Purple | white, 17.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #cf7710 0.0%, #f3934d 16.7%, #b07831 33.3%, #392902 50.0%, #322333 66.7%, #222543 83.3%, #34033a 100.0%);
background: linear-gradient(90deg in oklch, oklch(65.35% 0.1474 61.17) 0.0%, oklch(75.08% 0.1434 54.60) 16.7%, oklch(61.65% 0.1110 68.96) 33.3%, oklch(29.13% 0.0579 83.36) 50.0%, oklch(28.17% 0.0354 324.30) 66.7%, oklch(27.81% 0.0561 278.63) 83.3%, oklch(23.62% 0.1061 322.89) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.654 | 0.147 | 61.2 |
| 2 | 0.744 | 0.134 | 54.8 |
| 3 | 0.291 | 0.058 | 83.4 |
| 4 | 0.295 | 0.037 | -82.5 |
| 5 | 0.236 | 0.106 | -37.1 |

## In these collections

- [Halloween gradients](https://grabient.com/halloween-gradients)

## Other forms

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