# Magenta and cobalt blue color palette

The Magenta and cobalt blue color palette brings together magenta, purple, and blue. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits fashion mood boards and lookbook graphics. Its darkest tone is blue, and its lightest tone is magenta.

- Also called: Neon pink, purple and blue angular swatches
- Seed: `kWs-Pr1fC_EvmPdH1DzUbW8w`
- Page: https://grabient.com/kWs-Pr1fC_EvmPdH1DzUbW8w?style=angularSwatches&steps=5&angle=270
- Drawn as: angular swatches, 5 steps, 270 degrees
- Kinds: vivid, neon
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.6 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 | `#ff2af2` | `oklch(70.47% 0.3002 331.17)` | Pink Kitsch | black, 6.8 to 1 |
| 2 | `#ea15fe` | `oklch(67.32% 0.3100 323.77)` | Brusque Pink | black, 6 to 1 |
| 3 | `#a92bfe` | `oklch(59.45% 0.2811 305.81)` | Cool Purple | white, 4.7 to 1 |
| 4 | `#6256f7` | `oklch(56.30% 0.2315 279.39)` | Shady Neon Blue | white, 5 to 1 |
| 5 | `#438fe3` | `oklch(64.17% 0.1474 252.97)` | Oregon Blue | black, 6.2 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #ff2af2 0.000% 20.000%, #ea15fe 20.000% 40.000%, #a92bfe 40.000% 60.000%, #6256f7 60.000% 80.000%, #438fe3 80.000% 100.000%);
background: conic-gradient(from 270deg, oklch(70.47% 0.3002 331.17) 0.000% 20.000%, oklch(67.32% 0.3100 323.77) 20.000% 40.000%, oklch(59.45% 0.2811 305.81) 40.000% 60.000%, oklch(56.30% 0.2315 279.39) 60.000% 80.000%, oklch(64.17% 0.1474 252.97) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.705 | 0.313 | 331.2 |
| 2 | 0.673 | 0.31 | 323.8 |
| 3 | 0.594 | 0.281 | 305.8 |
| 4 | 0.563 | 0.231 | 279.4 |
| 5 | 0.642 | 0.147 | 253 |

## In these collections

- [Neon swatches](https://grabient.com/neon-swatches)
- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)
- [Y2K swatches](https://grabient.com/y2k-swatches)

## Other forms

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