# Primary Colors: Coral and gold

The "Primary Colors: Coral and gold" palette brings together red, gold, yellow, and blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is yellow.

- Also called: Vivid pink, yellow and blue angular swatches
- Seed: `kWsY8L7ztIve4QXauNFR0nBo`
- Page: https://grabient.com/kWsY8L7ztIve4QXauNFR0nBo?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: light center, vivid, light, multicolor
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 4.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 | `#ff5e73` | `oklch(69.68% 0.1958 16.17)` | Watermelon Candy | black, 7 to 1 |
| 2 | `#ffd03b` | `oklch(87.40% 0.1626 90.14)` | Peeps | black, 14.3 to 1 |
| 3 | `#fff069` | `oklch(94.09% 0.1543 102.83)` | Pale Ale | black, 17.8 to 1 |
| 4 | `#4aa7ff` | `oklch(71.26% 0.1557 249.71)` | Joust Blue | black, 8.2 to 1 |
| 5 | `#3668e9` | `oklch(55.91% 0.2026 264.51)` | Bluetiful | white, 4.8 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #ff5e73 0.000% 20.000%, #ffd03b 20.000% 40.000%, #fff069 40.000% 60.000%, #4aa7ff 60.000% 80.000%, #3668e9 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(69.68% 0.1958 16.17) 0.000% 20.000%, oklch(87.40% 0.1626 90.14) 20.000% 40.000%, oklch(94.09% 0.1543 102.83) 40.000% 60.000%, oklch(71.26% 0.1557 249.71) 60.000% 80.000%, oklch(55.91% 0.2026 264.51) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.697 | 0.197 | 16.2 |
| 2 | 0.874 | 0.163 | 90.1 |
| 3 | 0.941 | 0.154 | 102.8 |
| 4 | 0.713 | 0.156 | 249.7 |
| 5 | 0.559 | 0.203 | 264.5 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)
- [Primary color swatches](https://grabient.com/primary-color-swatches)

## Other forms

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