# Rainbow from orange to green linear gradient

Rainbow from orange to green linear gradient with 7 colors: #ec5f04, #9242bd, #2956c5, #346fd0, #61ca70, #d4c100, #50b521. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWp4sfP0SwUa7Ppou6110jEA`
- Page: https://grabient.com/kWp4sfP0SwUa7Ppou6110jEA
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, rainbow
- Hues: triadic
- Contrast of its darkest and lightest colors: 3.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 | `#ec5f04` | `oklch(65.75% 0.1915 43.59)` | Shu Red | black, 6.1 to 1 |
| 2 | `#9242bd` | `oklch(53.95% 0.1915 311.50)` | Akebi Purple | white, 5.6 to 1 |
| 3 | `#2956c5` | `oklch(49.17% 0.1808 264.06)` | Cerulean Blue | white, 6.4 to 1 |
| 4 | `#346fd0` | `oklch(55.51% 0.1626 259.88)` | Enchanting Sapphire | white, 4.8 to 1 |
| 5 | `#61ca70` | `oklch(75.59% 0.1599 146.80)` | Verdant Oasis | black, 10.2 to 1 |
| 6 | `#d4c100` | `oklch(80.18% 0.1680 102.22)` | Banana Powder | black, 11.4 to 1 |
| 7 | `#50b521` | `oklch(68.50% 0.1998 138.35)` | Kermit Green | black, 7.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ec5f04 0.0%, #9242bd 16.7%, #2956c5 33.3%, #346fd0 50.0%, #61ca70 66.7%, #d4c100 83.3%, #50b521 100.0%);
background: linear-gradient(90deg in oklch, oklch(65.75% 0.1915 43.59) 0.0%, oklch(53.95% 0.1915 311.50) 16.7%, oklch(49.17% 0.1808 264.06) 33.3%, oklch(55.51% 0.1626 259.88) 50.0%, oklch(75.59% 0.1599 146.80) 66.7%, oklch(80.18% 0.1680 102.22) 83.3%, oklch(68.50% 0.1998 138.35) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.657 | 0.192 | 43.6 |
| 2 | 0.496 | 0.189 | -88.5 |
| 3 | 0.555 | 0.163 | -100.1 |
| 4 | 0.823 | 0.164 | -256.5 |
| 5 | 0.685 | 0.2 | -221.7 |

## In these collections

- [Rainbow gradients](https://grabient.com/rainbow-gradients)

## Other forms

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