# Cobalt blue, magenta and crimson color palette

The Cobalt blue, magenta and crimson color palette brings together blue, purple, magenta, and red. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is blue, and its lightest tone is magenta.

- Also called: Neon blue, purple, pink and red linear swatches
- Seed: `kWb-G6PuxCMzrRDS4URT1vEQ`
- Page: https://grabient.com/kWb-G6PuxCMzrRDS4URT1vEQ?style=linearSwatches&steps=6&angle=45
- Drawn as: linear swatches, 6 steps, 45 degrees
- Kinds: vivid, neon, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 2.2 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 | `#0044bb` | `oklch(43.71% 0.1963 261.59)` | Once in a Blue Moon | white, 8.2 to 1 |
| 2 | `#4500fe` | `oklch(47.68% 0.2987 275.39)` | Overdue Blue | white, 7.7 to 1 |
| 3 | `#970bff` | `oklch(56.01% 0.2929 301.26)` | Star Platinum Purple | white, 5.5 to 1 |
| 4 | `#e000d4` | `oklch(62.94% 0.2850 331.23)` | Passionate Pink | black, 5.1 to 1 |
| 5 | `#ff0c84` | `oklch(64.84% 0.2589 1.49)` | Neon Rose | black, 5.6 to 1 |
| 6 | `#f81c00` | `oklch(62.21% 0.2461 30.47)` | Spectacular Scarlet | black, 5.1 to 1 |

## CSS

```css
background: linear-gradient(45deg, #0044bb 0.000% 16.667%, #4500fe 16.667% 33.333%, #970bff 33.333% 50.000%, #e000d4 50.000% 66.667%, #ff0c84 66.667% 83.333%, #f81c00 83.333% 100.000%);
background: linear-gradient(45deg, oklch(43.71% 0.1963 261.59) 0.000% 16.667%, oklch(47.68% 0.2987 275.39) 16.667% 33.333%, oklch(56.01% 0.2929 301.26) 33.333% 50.000%, oklch(62.94% 0.2850 331.23) 50.000% 66.667%, oklch(64.84% 0.2589 1.49) 66.667% 83.333%, oklch(62.21% 0.2461 30.47) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.437 | 0.31 | 261.6 |
| 2 | 0.492 | 0.298 | 280.6 |
| 3 | 0.602 | 0.295 | 316.5 |
| 4 | 0.65 | 0.267 | 353.5 |
| 5 | 0.622 | 0.252 | 390.5 |

## In these collections

- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)
- [Neon swatches](https://grabient.com/neon-swatches)

## Other forms

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