# Orange, teal and mauve color palette

The Orange, teal and mauve color palette brings together orange, purple, green, light orange, and magenta. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is magenta, and its lightest tone is light orange.

- Also called: Rainbow from orange to dark purple radial swatches
- Seed: `kWr3AkvzAztanL1wEDWr4uyI`
- Page: https://grabient.com/kWr3AkvzAztanL1wEDWr4uyI?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: rainbow
- Hues: triadic
- Contrast of its darkest and lightest colors: 7.2 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 | `#e47b32` | `oklch(68.90% 0.1543 51.33)` | Spiced up Orange | black, 7.1 to 1 |
| 2 | `#774a9b` | `oklch(49.61% 0.1323 307.77)` | Studio | white, 6.4 to 1 |
| 3 | `#4aae8b` | `oklch(68.11% 0.1075 167.22)` | Walk in the Woods | black, 7.6 to 1 |
| 4 | `#e7d6b8` | `oklch(88.19% 0.0441 80.56)` | Drumskin | black, 14.6 to 1 |
| 5 | `#493b4a` | `oklch(37.40% 0.0317 324.32)` | Funkie Friday | white, 10.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #e47b32 0.000% 20.000%, #774a9b 20.000% 40.000%, #4aae8b 40.000% 60.000%, #e7d6b8 60.000% 80.000%, #493b4a 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(68.90% 0.1543 51.33) 0.000% 20.000%, oklch(49.61% 0.1323 307.77) 20.000% 40.000%, oklch(68.11% 0.1075 167.22) 40.000% 60.000%, oklch(88.19% 0.0441 80.56) 60.000% 80.000%, oklch(37.40% 0.0317 324.32) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.689 | 0.154 | 51.3 |
| 2 | 0.496 | 0.132 | -52.2 |
| 3 | 0.681 | 0.107 | -192.8 |
| 4 | 0.882 | 0.044 | -279.4 |
| 5 | 0.374 | 0.032 | -395.7 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)
- [Triadic swatches](https://grabient.com/triadic-swatches)

## Other forms

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