# Orange Violet Green Fan

These five angular wedges move from vivid orange through red orange, bright violet, deep purple, and leafy green. The fan keeps the three secondary color families distinct while adding a useful shift in value within orange and purple. Use them for educational graphics, festival posters, playful packaging, or bold interface accents.

- Also called: Rainbow from orange to green angular swatches
- Seed: `kWtYImVsM_T5LtUyQbwwrEvI`
- Page: https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI?style=angularSwatches&steps=5
- Drawn as: angular swatches, 5 steps, 90 degrees
- Kinds: vivid, rainbow
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 3.8 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 | `#ef6c02` | `oklch(68.11% 0.1846 48.15)` | Epicurean Orange | black, 6.8 to 1 |
| 3 | `#8e23a9` | `oklch(48.82% 0.2081 318.33)` | Minesweeper’s Purple | white, 7.1 to 1 |
| 4 | `#46279f` | `oklch(39.37% 0.1805 286.63)` | Galactic Purple | white, 10.2 to 1 |
| 5 | `#2b7d33` | `oklch(52.36% 0.1350 145.02)` | Lush Paradise | white, 5.1 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #f57c03 0.000% 20.000%, #ef6c02 20.000% 40.000%, #8e23a9 40.000% 60.000%, #46279f 60.000% 80.000%, #2b7d33 80.000% 100.000%);
background: conic-gradient(from 90deg, oklch(71.26% 0.1791 53.44) 0.000% 20.000%, oklch(68.11% 0.1846 48.15) 20.000% 40.000%, oklch(48.82% 0.2081 318.33) 40.000% 60.000%, oklch(39.37% 0.1805 286.63) 60.000% 80.000%, oklch(52.36% 0.1350 145.02) 80.000% 100.000%);
```

## 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?style=angularSwatches&steps=5)
- [PNG](https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI.png?style=angularSwatches&steps=5)
- [SVG](https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI.svg?style=angularSwatches&steps=5)
- [CSS](https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI.css?style=angularSwatches&steps=5)
- [ASE](https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI.ase?style=angularSwatches&steps=5)
- [GPL](https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI.gpl?style=angularSwatches&steps=5)
- [GRD](https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI.grd?style=angularSwatches&steps=5)
- [Design tokens](https://grabient.com/kWtYImVsM_T5LtUyQbwwrEvI.tokens.json?style=angularSwatches&steps=5)
- [Social card](https://grabient.com/api/og?seed=kWtYImVsM_T5LtUyQbwwrEvI&style=angularSwatches&steps=5)
- [Palettes like this one](https://grabient.com/palettes?q=kWtYImVsM_T5LtUyQbwwrEvI)
- [Guide for agents](https://grabient.com/llms.txt)