# Green Violet Orange Secondary Fan

These four angular wedges move from green through deep violet, bright purple, and orange. The two purple values strengthen the violet family while green and orange remain clearly separated, giving all three secondary colors useful graphic roles. Use them for color-theory teaching, classroom posters, bold brand accents, or categorical graphics that need recognizable secondary hues.

- Also called: Rainbow from green to orange angular swatches
- Seed: `kUhWJmskHQr5Lw7Ww0qA`
- Page: https://grabient.com/kUhWJmskHQr5Lw7Ww0qA?style=angularSwatches&steps=4&angle=150
- Drawn as: angular swatches, 4 steps, 150 degrees
- Kinds: vivid, rainbow
- Hues: wide
- Contrast of its darkest and lightest colors: 3.3 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 | `#2e7d32` | `oklch(52.36% 0.1350 144.14)` | Lush Paradise | white, 5.1 to 1 |
| 2 | `#4427a0` | `oklch(39.37% 0.1805 285.75)` | Galactic Purple | white, 10.2 to 1 |
| 3 | `#8d23aa` | `oklch(48.82% 0.2081 317.45)` | Minesweeper’s Purple | white, 7.1 to 1 |
| 4 | `#f06c0b` | `oklch(68.11% 0.1846 47.27)` | Epicurean Orange | black, 6.8 to 1 |

## CSS

```css
background: conic-gradient(from 150deg, #2e7d32 0.000% 25.000%, #4427a0 25.000% 50.000%, #8d23aa 50.000% 75.000%, #f06c0b 75.000% 100.000%);
background: conic-gradient(from 150deg, oklch(52.36% 0.1350 144.14) 0.000% 25.000%, oklch(39.37% 0.1805 285.75) 25.000% 50.000%, oklch(48.82% 0.2081 317.45) 50.000% 75.000%, oklch(68.11% 0.1846 47.27) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.524 | 0.135 | 144.1 |
| 2 | 0.394 | 0.181 | 285.7 |
| 3 | 0.488 | 0.208 | 317.4 |
| 4 | 0.681 | 0.185 | 407.3 |

## In these collections

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

## Other forms

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