# Orange to deep plum gradient

Duotone orange to purple linear gradient with 20 colors: #ff7b41, #fa7a40, #f2793f, #e9773f, #de7341, #d26e45, #c4684a, #b2624e, #a15a50, #915351, #834a52, #764154, #683857, #5a3159, #4d2c5b, #45285b, #40245c, #3d205d, #3c1d5e, #3b1b5f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Duotone orange to purple linear gradient
- Seed: `kWuYAe0zM_78dPOsoDhJyo-g`
- Page: https://grabient.com/kWuYAe0zM_78dPOsoDhJyo-g?steps=20&angle=180
- Drawn as: linear gradient, 20 steps, 180 degrees
- Kinds: light to dark
- Hues: two-hue
- Contrast of its darkest and lightest colors: 5.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 | `#ff7b41` | `oklch(72.83% 0.1758 42.89)` | Mythical Orange | black, 8.1 to 1 |
| 2 | `#fa7a40` | `oklch(71.90% 0.1716 43.33)` | Sagittarius Amber Artefact | black, 7.9 to 1 |
| 3 | `#f2793f` | `oklch(70.64% 0.1651 44.19)` | Mandarin | black, 7.5 to 1 |
| 4 | `#e9773f` | `oklch(69.04% 0.1571 44.75)` | Salsa Sizzle | black, 7.1 to 1 |
| 5 | `#de7341` | `oklch(67.08% 0.1480 44.31)` | Northern Barrens Dust | black, 6.6 to 1 |
| 6 | `#d26e45` | `oklch(64.72% 0.1379 42.21)` | Coral Gold | black, 6 to 1 |
| 7 | `#c4684a` | `oklch(61.77% 0.1246 39.03)` | Raw Copper | black, 5.4 to 1 |
| 8 | `#b2624e` | `oklch(58.37% 0.1094 34.85)` | Bruschetta | black, 4.7 to 1 |
| 9 | `#a15a50` | `oklch(54.77% 0.0948 29.29)` | Cajun Red | white, 5.1 to 1 |
| 10 | `#915351` | `oklch(51.26% 0.0835 21.97)` | Apple Butter | white, 5.9 to 1 |
| 11 | `#834a52` | `oklch(47.97% 0.0778 12.13)` | Parauri Brown | white, 6.8 to 1 |
| 12 | `#764154` | `oklch(44.57% 0.0768 358.26)` | Red Jade | white, 7.9 to 1 |
| 13 | `#683857` | `oklch(41.20% 0.0789 342.44)` | Halayà Úbe | white, 9.1 to 1 |
| 14 | `#5a3159` | `oklch(38.11% 0.0829 327.25)` | Japanese Violet | white, 10.3 to 1 |
| 15 | `#4d2c5b` | `oklch(35.56% 0.0872 315.26)` | Deep Plum | white, 11.5 to 1 |
| 16 | `#45285b` | `oklch(33.74% 0.0917 308.15)` | Acai | white, 12.3 to 1 |
| 17 | `#40245c` | `oklch(32.51% 0.0981 304.40)` | Galactic Wonder | white, 12.9 to 1 |
| 18 | `#3d205d` | `oklch(31.70% 0.1051 302.81)` | Christalle | white, 13.3 to 1 |
| 19 | `#3c1d5e` | `oklch(31.16% 0.1114 302.20)` | Christalle | white, 13.6 to 1 |
| 20 | `#3b1b5f` | `oklch(30.71% 0.1157 301.44)` | Christalle | white, 13.9 to 1 |

## CSS

```css
background: linear-gradient(180deg, #ff7b41 0.0%, #fa7a40 5.3%, #f2793f 10.5%, #e9773f 15.8%, #de7341 21.1%, #d26e45 26.3%, #c4684a 31.6%, #b2624e 36.8%, #a15a50 42.1%, #915351 47.4%, #834a52 52.6%, #764154 57.9%, #683857 63.2%, #5a3159 68.4%, #4d2c5b 73.7%, #45285b 78.9%, #40245c 84.2%, #3d205d 89.5%, #3c1d5e 94.7%, #3b1b5f 100.0%);
background: linear-gradient(180deg in oklch, oklch(72.83% 0.1758 42.89) 0.0%, oklch(71.90% 0.1716 43.33) 5.3%, oklch(70.64% 0.1651 44.19) 10.5%, oklch(69.04% 0.1571 44.75) 15.8%, oklch(67.08% 0.1480 44.31) 21.1%, oklch(64.72% 0.1379 42.21) 26.3%, oklch(61.77% 0.1246 39.03) 31.6%, oklch(58.37% 0.1094 34.85) 36.8%, oklch(54.77% 0.0948 29.29) 42.1%, oklch(51.26% 0.0835 21.97) 47.4%, oklch(47.97% 0.0778 12.13) 52.6%, oklch(44.57% 0.0768 358.26) 57.9%, oklch(41.20% 0.0789 342.44) 63.2%, oklch(38.11% 0.0829 327.25) 68.4%, oklch(35.56% 0.0872 315.26) 73.7%, oklch(33.74% 0.0917 308.15) 78.9%, oklch(32.51% 0.0981 304.40) 84.2%, oklch(31.70% 0.1051 302.81) 89.5%, oklch(31.16% 0.1114 302.20) 94.7%, oklch(30.71% 0.1157 301.44) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.728 | 0.176 | 42.9 |
| 2 | 0.654 | 0.141 | 42.9 |
| 3 | 0.496 | 0.08 | 17.5 |
| 4 | 0.35 | 0.088 | -46.9 |
| 5 | 0.307 | 0.116 | -58.6 |

## In these collections

- [Orange and purple gradients](https://grabient.com/orange-and-purple-gradients)

## Other forms

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