# Orange and Purple: Crimson and mauve

The "Orange and Purple: Crimson and mauve" palette brings together red, orange, magenta, purple, blue, and dark blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is orange.

- Also called: Orange, brown, purple and navy linear gradient
- Seed: `kakXUZUjBBlcZv9SEraQyg8S-ovwgmT0A`
- Page: https://grabient.com/kakXUZUjBBlcZv9SEraQyg8S-ovwgmT0A?steps=8&angle=135
- Drawn as: linear gradient, 8 steps, 135 degrees
- Kinds: light center, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 5.3 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 | `#c44b2d` | `oklch(57.09% 0.1612 35.16)` | Red Fang | white, 4.7 to 1 |
| 2 | `#cd6d38` | `oklch(63.62% 0.1384 47.59)` | Hot Caramel | black, 5.8 to 1 |
| 3 | `#c28a65` | `oklch(68.06% 0.0858 54.27)` | Sassy | black, 7.1 to 1 |
| 4 | `#b28993` | `oklch(67.22% 0.0515 3.25)` | Rose Tea | black, 6.8 to 1 |
| 5 | `#8f74a2` | `oklch(60.24% 0.0739 310.83)` | Diffused Orchid | black, 5.2 to 1 |
| 6 | `#645099` | `oklch(48.52% 0.1161 294.62)` | Purple Opulence | white, 6.6 to 1 |
| 7 | `#3a2f70` | `oklch(35.43% 0.1075 287.74)` | Her Highness | white, 11.5 to 1 |
| 8 | `#132144` | `oklch(25.59% 0.0689 266.23)` | Dark Eclipse | white, 15.8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #c44b2d 0.0%, #cd6d38 14.3%, #c28a65 28.6%, #b28993 42.9%, #8f74a2 57.1%, #645099 71.4%, #3a2f70 85.7%, #132144 100.0%);
background: linear-gradient(135deg in oklch, oklch(57.09% 0.1612 35.16) 0.0%, oklch(63.62% 0.1384 47.59) 14.3%, oklch(68.06% 0.0858 54.27) 28.6%, oklch(67.22% 0.0515 3.25) 42.9%, oklch(60.24% 0.0739 310.83) 57.1%, oklch(48.52% 0.1161 294.62) 71.4%, oklch(35.43% 0.1075 287.74) 85.7%, oklch(25.59% 0.0689 266.23) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.571 | 0.161 | 35.2 |
| 2 | 0.646 | 0.132 | 48.9 |
| 3 | 0.685 | 0.07 | 47.8 |
| 4 | 0.646 | 0.051 | -31.4 |
| 5 | 0.528 | 0.11 | -62.1 |
| 6 | 0.374 | 0.112 | -69.5 |
| 7 | 0.256 | 0.069 | -93.8 |

## In these collections

- [Orange and purple gradients](https://grabient.com/orange-and-purple-gradients)

## Other forms

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