# Cobalt blue, magenta and crimson vivid multicolor

The Cobalt blue, magenta and crimson vivid multicolor 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 brand mood boards and editorial graphics. Its lightest and darkest tones both fall within the blue color family.

- Also called: Neon tritone blue, purple and red linear gradient
- Seed: `kYlZi80MZBdBCQ7MzsSzltENDeQI`
- Page: https://grabient.com/kYlZi80MZBdBCQ7MzsSzltENDeQI?steps=6&angle=180
- Drawn as: linear gradient, 6 steps, 180 degrees
- Kinds: even lightness, vivid, neon, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 1.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 | `#3d6ff6` | `oklch(58.66% 0.2094 265.08)` | Hailey Blue | black, 4.8 to 1 |
| 2 | `#7277fc` | `oklch(63.39% 0.1929 277.76)` | Stargate Shimmer | black, 5.7 to 1 |
| 3 | `#aa63da` | `oklch(62.99% 0.1819 309.46)` | Violet Voltage | black, 5.5 to 1 |
| 4 | `#d73394` | `oklch(60.24% 0.2163 349.62)` | Dark Princess Pink | black, 4.7 to 1 |
| 5 | `#f70026` | `oklch(61.42% 0.2494 25.56)` | Cherry Red | black, 4.9 to 1 |
| 6 | `#fd2100` | `oklch(63.39% 0.2483 30.81)` | Thai Hot | black, 5.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #3d6ff6 0.0%, #7277fc 20.0%, #aa63da 40.0%, #d73394 60.0%, #f70026 80.0%, #fd2100 100.0%);
background: linear-gradient(180deg in oklch, oklch(58.66% 0.2094 265.08) 0.0%, oklch(63.39% 0.1929 277.76) 20.0%, oklch(62.99% 0.1819 309.46) 40.0%, oklch(60.24% 0.2163 349.62) 60.0%, oklch(61.42% 0.2494 25.56) 80.0%, oklch(63.39% 0.2483 30.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.587 | 0.209 | 265.1 |
| 2 | 0.634 | 0.193 | 277.8 |
| 3 | 0.63 | 0.182 | 309.5 |
| 4 | 0.602 | 0.216 | 349.6 |
| 5 | 0.614 | 0.251 | 385.5 |
| 6 | 0.634 | 0.259 | 390.8 |

## In these collections

- [GTA 6 gradients](https://grabient.com/gta-6-gradients)
- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)

## Other forms

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