# Rainbow from orange to teal linear gradient

Rainbow from orange to teal linear gradient with 7 colors: #f57c03, #ed7e00, #e5484f, #8e23a9, #60179b, #005381, #2b7d33. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWtYImVsM_T5LtUyQbwwrEvI`
- Page: https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, rainbow
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 3.7 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 | `#f57c03` | `oklch(71.26% 0.1791 53.44)` | University of Tennessee Orange | black, 7.7 to 1 |
| 2 | `#ed7e00` | `oklch(70.47% 0.1718 56.36)` | Bright Marigold | black, 7.5 to 1 |
| 3 | `#e5484f` | `oklch(62.51% 0.1930 22.32)` | Thimbleberry | black, 5.3 to 1 |
| 4 | `#8e23a9` | `oklch(48.82% 0.2081 318.33)` | Minesweeper’s Purple | white, 7.1 to 1 |
| 5 | `#60179b` | `oklch(40.49% 0.1929 303.18)` | Wild Violet | white, 10 to 1 |
| 6 | `#005381` | `oklch(42.52% 0.1016 242.36)` | Toy Submarine Blue | white, 8.1 to 1 |
| 7 | `#2b7d33` | `oklch(52.36% 0.1350 145.02)` | Lush Paradise | white, 5.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f57c03 0.0%, #ed7e00 16.7%, #e5484f 33.3%, #8e23a9 50.0%, #60179b 66.7%, #005381 83.3%, #2b7d33 100.0%);
background: linear-gradient(90deg in oklch, oklch(71.26% 0.1791 53.44) 0.0%, oklch(70.47% 0.1718 56.36) 16.7%, oklch(62.51% 0.1930 22.32) 33.3%, oklch(48.82% 0.2081 318.33) 50.0%, oklch(40.49% 0.1929 303.18) 66.7%, oklch(42.52% 0.1016 242.36) 83.3%, oklch(52.36% 0.1350 145.02) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.713 | 0.179 | 53.4 |
| 2 | 0.681 | 0.185 | 48.2 |
| 3 | 0.488 | 0.208 | -41.7 |
| 4 | 0.394 | 0.181 | -73.4 |
| 5 | 0.524 | 0.135 | -215 |

## In these collections

- [Secondary color swatches](https://grabient.com/secondary-color-swatches)

## Other forms

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