# Magenta and rose neon palette

The Magenta and rose neon palette brings together 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 red, and its lightest tone is magenta.

- Also called: Neon analogous pink to red linear gradient
- Seed: `kUsebq0uBDNDbw1S10DA`
- Page: https://grabient.com/kUsebq0uBDNDbw1S10DA?steps=6&angle=315
- Drawn as: linear gradient, 6 steps, 315 degrees
- Kinds: even lightness, vivid, neon, warm
- Hues: analogous
- 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 | `#fe04f8` | `oklch(69.69% 0.3169 329.77)` | Barbara | black, 6.5 to 1 |
| 2 | `#ff0abb` | `oklch(66.85% 0.2817 344.85)` | Brutal Pink | black, 6 to 1 |
| 3 | `#ff007d` | `oklch(64.40% 0.2595 3.22)` | Pink Poison | black, 5.5 to 1 |
| 4 | `#ff0e3f` | `oklch(63.45% 0.2517 21.40)` | American Rose | black, 5.3 to 1 |
| 5 | `#ff260b` | `oklch(63.86% 0.2466 30.61)` | Red October | black, 5.5 to 1 |
| 6 | `#ff3801` | `oklch(64.96% 0.2381 33.17)` | Coquelicot | black, 5.8 to 1 |

## CSS

```css
background: linear-gradient(315deg, #fe04f8 0.0%, #ff0abb 20.0%, #ff007d 40.0%, #ff0e3f 60.0%, #ff260b 80.0%, #ff3801 100.0%);
background: linear-gradient(315deg in oklch, oklch(69.69% 0.3169 329.77) 0.0%, oklch(66.85% 0.2817 344.85) 20.0%, oklch(64.40% 0.2595 3.22) 40.0%, oklch(63.45% 0.2517 21.40) 60.0%, oklch(63.86% 0.2466 30.61) 80.0%, oklch(64.96% 0.2381 33.17) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.697 | 0.317 | 329.8 |
| 2 | 0.65 | 0.265 | 357.2 |
| 3 | 0.634 | 0.252 | 385.8 |
| 4 | 0.65 | 0.24 | 393.2 |

## In these collections

- [Neon gradients](https://grabient.com/neon-gradients)

## Other forms

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