# Violet and mustard color palette

The Violet and mustard color palette brings together purple, light purple, gold, and yellow. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is purple, and its lightest tone is yellow.

- Also called: Vivid purple, lavender and yellow linear swatches
- Seed: `kYaJnRPtTAExSQHfKEFb5pP_dFQi`
- Page: https://grabient.com/kYaJnRPtTAExSQHfKEFb5pP_dFQi?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: dark to light, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 8.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 | `#5714ae` | `oklch(40.94% 0.2108 293.91)` | Aubergine Perl | white, 9.9 to 1 |
| 2 | `#712bd3` | `oklch(49.21% 0.2329 294.96)` | Crown Chakra | white, 7 to 1 |
| 3 | `#9652f0` | `oklch(59.84% 0.2260 299.19)` | Navy Genesis Evangelion | black, 4.7 to 1 |
| 4 | `#c499e1` | `oklch(74.80% 0.1102 310.81)` | Somewhere in a Fairytale | black, 8.9 to 1 |
| 5 | `#ecd4a1` | `oklch(87.80% 0.0717 86.08)` | Tangent | black, 14.5 to 1 |
| 6 | `#fef02d` | `oklch(93.70% 0.1902 105.10)` | Big Yellow Streak | black, 17.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #5714ae 0.000% 16.667%, #712bd3 16.667% 33.333%, #9652f0 33.333% 50.000%, #c499e1 50.000% 66.667%, #ecd4a1 66.667% 83.333%, #fef02d 83.333% 100.000%);
background: linear-gradient(90deg, oklch(40.94% 0.2108 293.91) 0.000% 16.667%, oklch(49.21% 0.2329 294.96) 16.667% 33.333%, oklch(59.84% 0.2260 299.19) 33.333% 50.000%, oklch(74.80% 0.1102 310.81) 50.000% 66.667%, oklch(87.80% 0.0717 86.08) 66.667% 83.333%, oklch(93.70% 0.1902 105.10) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.409 | 0.211 | 293.9 |
| 2 | 0.492 | 0.233 | 295 |
| 3 | 0.598 | 0.226 | 299.2 |
| 4 | 0.748 | 0.11 | 310.8 |
| 5 | 0.878 | 0.072 | 446.1 |
| 6 | 0.937 | 0.19 | 465.1 |

## In these collections

- [Complementary swatches](https://grabient.com/complementary-swatches)
- [Purple and yellow swatches](https://grabient.com/purple-and-yellow-swatches)

## Other forms

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