# Violet Orange Green Quarters

These four angular wedges move from violet through fresh green, vivid orange, and deeper leafy green. Large separated regions make the secondary color relationships immediate and easy to assign to different graphic roles. Use them for classroom materials, geometric posters, youth branding, or categorical accents that need a simple high energy composition.

- Also called: Rainbow from purple to green angular swatches
- Seed: `kUko3k2zOrFBHs5CsUwg`
- Page: https://grabient.com/kUko3k2zOrFBHs5CsUwg?style=angularSwatches&steps=4&angle=180
- Drawn as: angular swatches, 4 steps, 180 degrees
- Kinds: vivid, rainbow
- Hues: wide
- Contrast of its darkest and lightest colors: 2.1 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 | `#aa46bc` | `oklch(57.48% 0.1943 321.33)` | Fuchsia Pheromone | white, 4.8 to 1 |
| 2 | `#65ba69` | `oklch(71.65% 0.1419 144.85)` | Forest Fern | black, 8.8 to 1 |
| 3 | `#e65100` | `oklch(62.99% 0.1969 40.21)` | Lava Nectar | black, 5.5 to 1 |
| 4 | `#2f7d31` | `oklch(52.36% 0.1350 143.79)` | Lush Paradise | white, 5.1 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #aa46bc 0.000% 25.000%, #65ba69 25.000% 50.000%, #e65100 50.000% 75.000%, #2f7d31 75.000% 100.000%);
background: conic-gradient(from 180deg, oklch(57.48% 0.1943 321.33) 0.000% 25.000%, oklch(71.65% 0.1419 144.85) 25.000% 50.000%, oklch(62.99% 0.1969 40.21) 50.000% 75.000%, oklch(52.36% 0.1350 143.79) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.575 | 0.194 | 321.3 |
| 2 | 0.717 | 0.142 | 144.9 |
| 3 | 0.63 | 0.197 | 40.2 |
| 4 | 0.524 | 0.135 | 143.8 |

## In these collections

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

## Other forms

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