# Orange and mauve color palette

The Orange and mauve color palette brings together pale orange, light orange, orange, red, and magenta. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits botanical branding and garden event graphics. Its darkest tone is magenta, and its lightest tone is pale orange.

- Also called: Off-white, peach, red and purple angular swatches
- Seed: `kW9RMy6qG_tqsPXIsD0Mxg7w`
- Page: https://grabient.com/kW9RMy6qG_tqsPXIsD0Mxg7w?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: light to dark, warm, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#fff1e1` | `oklch(96.46% 0.0262 71.02)` | Sugar Glaze | black, 18.9 to 1 |
| 2 | `#f2bf88` | `oklch(83.86% 0.0923 68.90)` | Melon Balls | black, 12.6 to 1 |
| 3 | `#df8a5c` | `oklch(71.26% 0.1213 47.77)` | Copper Tan | black, 7.9 to 1 |
| 4 | `#b95351` | `oklch(57.09% 0.1323 23.46)` | Carmelito | white, 4.7 to 1 |
| 5 | `#62394e` | `oklch(40.16% 0.0661 348.59)` | Violet Posy | white, 9.4 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #fff1e1 0.000% 20.000%, #f2bf88 20.000% 40.000%, #df8a5c 40.000% 60.000%, #b95351 60.000% 80.000%, #62394e 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(96.46% 0.0262 71.02) 0.000% 20.000%, oklch(83.86% 0.0923 68.90) 20.000% 40.000%, oklch(71.26% 0.1213 47.77) 40.000% 60.000%, oklch(57.09% 0.1323 23.46) 60.000% 80.000%, oklch(40.16% 0.0661 348.59) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.965 | 0.026 | 71 |
| 2 | 0.839 | 0.092 | 68.9 |
| 3 | 0.713 | 0.121 | 47.8 |
| 4 | 0.571 | 0.132 | 23.5 |
| 5 | 0.402 | 0.066 | -11.4 |

## In these collections

- [Soft swatches](https://grabient.com/soft-swatches)
- [Cottagecore swatches](https://grabient.com/cottagecore-swatches)
- [Floral swatches](https://grabient.com/floral-swatches)

## Other forms

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