# Charcoal, orange and plum color palette

The Charcoal, orange and plum color palette brings together dark gray, pale orange, orange, and magenta. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits seasonal packaging and event invitations. Its darkest tone is dark gray, and its lightest tone is pale orange.

- Also called: Dark gray, orange, pink and purple linear swatches
- Seed: `kWTATrcQ7MeMxv1MwbbLKq84`
- Page: https://grabient.com/kWTATrcQ7MeMxv1MwbbLKq84?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: light center, vivid, warm, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 9.8 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 | `#2f2d2f` | `oklch(29.92% 0.0055 330.47)` | Dark Onyx | white, 13.7 to 1 |
| 2 | `#ead8be` | `oklch(88.98% 0.0400 76.14)` | Steamed Milk | black, 15 to 1 |
| 3 | `#eea749` | `oklch(77.95% 0.1364 70.86)` | Egyptian Gold | black, 10.2 to 1 |
| 4 | `#cd4789` | `oklch(60.24% 0.1805 353.72)` | Smitten | black, 4.8 to 1 |
| 5 | `#591e58` | `oklch(35.04% 0.1171 328.36)` | Purple Velour | white, 11.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #2f2d2f 0.000% 20.000%, #ead8be 20.000% 40.000%, #eea749 40.000% 60.000%, #cd4789 60.000% 80.000%, #591e58 80.000% 100.000%);
background: linear-gradient(135deg, oklch(29.92% 0.0055 330.47) 0.000% 20.000%, oklch(88.98% 0.0400 76.14) 20.000% 40.000%, oklch(77.95% 0.1364 70.86) 40.000% 60.000%, oklch(60.24% 0.1805 353.72) 60.000% 80.000%, oklch(35.04% 0.1171 328.36) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.299 | 0.006 | 330.5 |
| 2 | 0.89 | 0.04 | 436.1 |
| 3 | 0.78 | 0.136 | 430.9 |
| 4 | 0.602 | 0.181 | 353.7 |
| 5 | 0.35 | 0.117 | 328.4 |

## In these collections

- [Day of the Dead swatches](https://grabient.com/day-of-the-dead-swatches)
- [Diwali swatches](https://grabient.com/diwali-swatches)
- [Halloween swatches](https://grabient.com/halloween-swatches)

## Other forms

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