# Orange Lilac Green Fan

These four angular wedges move from vivid orange through fresh green, pale lilac, and a deeper leafy green. The light purple wedge softens the saturated orange and greens while the fan geometry keeps each role clear. Use them for educational diagrams, playful posters, product labels, or creative interfaces with strong categorical contrast.

- Also called: Rainbow from orange to green angular swatches
- Seed: `kUoI8c2zPMV6qVNQOCrg`
- Page: https://grabient.com/kUoI8c2zPMV6qVNQOCrg?style=angularSwatches&steps=4&angle=300
- Drawn as: angular swatches, 4 steps, 300 degrees
- Kinds: even lightness, vivid, rainbow
- Hues: triadic
- Contrast of its darkest and lightest colors: 1.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 | `#e65001` | `oklch(62.99% 0.1970 40.08)` | Lava Nectar | black, 5.5 to 1 |
| 2 | `#66ba69` | `oklch(71.65% 0.1419 144.70)` | Forest Fern | black, 8.8 to 1 |
| 3 | `#ce93d8` | `oklch(74.41% 0.1157 321.17)` | Somewhere in a Fairytale | black, 8.8 to 1 |
| 4 | `#45a046` | `oklch(62.99% 0.1543 143.64)` | Fervent Green | black, 6.3 to 1 |

## CSS

```css
background: conic-gradient(from 300deg, #e65001 0.000% 25.000%, #66ba69 25.000% 50.000%, #ce93d8 50.000% 75.000%, #45a046 75.000% 100.000%);
background: conic-gradient(from 300deg, oklch(62.99% 0.1970 40.08) 0.000% 25.000%, oklch(71.65% 0.1419 144.70) 25.000% 50.000%, oklch(74.41% 0.1157 321.17) 50.000% 75.000%, oklch(62.99% 0.1543 143.64) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.63 | 0.197 | 40.1 |
| 2 | 0.717 | 0.142 | 144.7 |
| 3 | 0.744 | 0.116 | 321.2 |
| 4 | 0.63 | 0.154 | 143.6 |

## In these collections

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

## Other forms

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