# Orange and violet secondary color palette

The Orange and violet secondary color palette brings together orange, green, and purple. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is purple, and its lightest tone is orange.

- Also called: Rainbow from orange to purple radial swatches
- Seed: `kWtmoqVDTKEU50xJyUFMzO-g`
- Page: https://grabient.com/kWtmoqVDTKEU50xJyUFMzO-g?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: light to dark, 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 | `#e58a36` | `oklch(71.65% 0.1461 59.06)` | Velvet Marigold | black, 8 to 1 |
| 2 | `#53a957` | `oklch(66.14% 0.1447 144.66)` | Harā Green | black, 7.1 to 1 |
| 3 | `#8751b7` | `oklch(54.33% 0.1585 306.34)` | Harley Hair Purple | white, 5.3 to 1 |
| 4 | `#a947c5` | `oklch(57.87% 0.2012 317.97)` | Royal Gramma Purple | white, 4.7 to 1 |
| 5 | `#5c2c83` | `oklch(40.16% 0.1419 306.34)` | Deep Amethyst | white, 9.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #e58a36 0.000% 20.000%, #53a957 20.000% 40.000%, #8751b7 40.000% 60.000%, #a947c5 60.000% 80.000%, #5c2c83 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(71.65% 0.1461 59.06) 0.000% 20.000%, oklch(66.14% 0.1447 144.66) 20.000% 40.000%, oklch(54.33% 0.1585 306.34) 40.000% 60.000%, oklch(57.87% 0.2012 317.97) 60.000% 80.000%, oklch(40.16% 0.1419 306.34) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.717 | 0.146 | 59.1 |
| 2 | 0.661 | 0.145 | 144.7 |
| 3 | 0.543 | 0.158 | 306.3 |
| 4 | 0.579 | 0.201 | 318 |
| 5 | 0.402 | 0.142 | 306.3 |

## In these collections

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

## Other forms

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