# Magenta and gold color palette

The Magenta and gold color palette brings together purple, magenta, light red, yellow, and pale 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 pale yellow.

- Also called: Vivid purple, yellow and beige angular swatches
- Seed: `kYfKrgSNvBFPbwFjK8Q8zfLne0Pw`
- Page: https://grabient.com/kYfKrgSNvBFPbwFjK8Q8zfLne0Pw?style=angularSwatches&steps=6&angle=315
- Drawn as: angular swatches, 6 steps, 315 degrees
- Kinds: dark to light, vivid
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 6.1 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 | `#8f0cb7` | `oklch(48.82% 0.2343 315.00)` | Minesweeper’s Purple | white, 7.2 to 1 |
| 2 | `#ba1dc7` | `oklch(57.09% 0.2522 324.51)` | Fuchsia Flair | white, 5.1 to 1 |
| 3 | `#dc41de` | `oklch(65.75% 0.2522 327.68)` | Méi Gūi Zǐ Purple | black, 5.8 to 1 |
| 4 | `#f796af` | `oklch(77.95% 0.1199 3.61)` | Flower Girl | black, 9.9 to 1 |
| 5 | `#f4e35d` | `oklch(90.55% 0.1530 101.89)` | Flame Seal | black, 16 to 1 |
| 6 | `#ffeba4` | `oklch(94.09% 0.0917 94.50)` | Rite of Spring | black, 17.7 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #8f0cb7 0.000% 16.667%, #ba1dc7 16.667% 33.333%, #dc41de 33.333% 50.000%, #f796af 50.000% 66.667%, #f4e35d 66.667% 83.333%, #ffeba4 83.333% 100.000%);
background: conic-gradient(from 315deg, oklch(48.82% 0.2343 315.00) 0.000% 16.667%, oklch(57.09% 0.2522 324.51) 16.667% 33.333%, oklch(65.75% 0.2522 327.68) 33.333% 50.000%, oklch(77.95% 0.1199 3.61) 50.000% 66.667%, oklch(90.55% 0.1530 101.89) 66.667% 83.333%, oklch(94.09% 0.0917 94.50) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.488 | 0.234 | 315 |
| 2 | 0.571 | 0.252 | 324.5 |
| 3 | 0.657 | 0.252 | 327.7 |
| 4 | 0.78 | 0.12 | 363.6 |
| 5 | 0.906 | 0.153 | 461.9 |
| 6 | 0.941 | 0.143 | 454.5 |

## In these collections

- [Secondary color swatches](https://grabient.com/secondary-color-swatches)
- [Purple and yellow swatches](https://grabient.com/purple-and-yellow-swatches)

## Other forms

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