# Raspberry Meets Cobalt

The Coral and navy color palette brings together light red, red, magenta, and blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light red.

- Also called: Vivid duotone pink and blue radial swatches
- Seed: `kWxWMG1sU_kvMvzAvLUMLU_Q`
- Page: https://grabient.com/kWxWMG1sU_kvMvzAvLUMLU_Q?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: light to dark, vivid
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.7 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 | `#ff8fa3` | `oklch(77.56% 0.1360 9.14)` | Charming Cherry | black, 9.7 to 1 |
| 2 | `#f45b87` | `oklch(68.11% 0.1902 5.97)` | Watermelon Juice | black, 6.6 to 1 |
| 3 | `#d92f7a` | `oklch(59.45% 0.2108 359.63)` | Fuchsia Purple | black, 4.6 to 1 |
| 4 | `#3c5bc3` | `oklch(50.79% 0.1667 267.69)` | Free Speech Blue | white, 6 to 1 |
| 5 | `#133b8f` | `oklch(38.19% 0.1461 262.41)` | Mystery Oceans | white, 10.2 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #ff8fa3 0.000% 20.000%, #f45b87 20.000% 40.000%, #d92f7a 40.000% 60.000%, #3c5bc3 60.000% 80.000%, #133b8f 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(77.56% 0.1360 9.14) 0.000% 20.000%, oklch(68.11% 0.1902 5.97) 20.000% 40.000%, oklch(59.45% 0.2108 359.63) 40.000% 60.000%, oklch(50.79% 0.1667 267.69) 60.000% 80.000%, oklch(38.19% 0.1461 262.41) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.776 | 0.136 | 9.1 |
| 2 | 0.681 | 0.19 | 6 |
| 3 | 0.594 | 0.211 | -0.4 |
| 4 | 0.508 | 0.167 | -92.3 |
| 5 | 0.382 | 0.146 | -97.6 |

## In these collections

- [Pink and blue swatches](https://grabient.com/pink-and-blue-swatches)
- [Sunrise swatches](https://grabient.com/sunrise-swatches)

## Other forms

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