# Magenta, rose and orange neon palette

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

- Also called: Neon duotone pink and orange linear swatches
- Seed: `kWsunp1mpBVTbQdZREM4TtEA`
- Page: https://grabient.com/kWsunp1mpBVTbQdZREM4TtEA?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: even lightness, vivid, neon, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 1.5 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 | `#fe04fe` | `oklch(70.08% 0.3211 328.36)` | Magenta | black, 6.6 to 1 |
| 2 | `#ff0cce` | `oklch(67.71% 0.2909 339.98)` | Fuchsia Flame | black, 6.1 to 1 |
| 3 | `#fe2c99` | `oklch(66.54% 0.2508 355.83)` | Wild Strawberry | black, 6 to 1 |
| 4 | `#fe6565` | `oklch(70.08% 0.1874 23.31)` | Pompelmo | black, 7.2 to 1 |
| 5 | `#fd9534` | `oklch(76.38% 0.1626 58.18)` | Energy Orange | black, 9.4 to 1 |

## CSS

```css
background: linear-gradient(45deg, #fe04fe 0.000% 20.000%, #ff0cce 20.000% 40.000%, #fe2c99 40.000% 60.000%, #fe6565 60.000% 80.000%, #fd9534 80.000% 100.000%);
background: linear-gradient(45deg, oklch(70.08% 0.3211 328.36) 0.000% 20.000%, oklch(67.71% 0.2909 339.98) 20.000% 40.000%, oklch(66.54% 0.2508 355.83) 40.000% 60.000%, oklch(70.08% 0.1874 23.31) 60.000% 80.000%, oklch(76.38% 0.1626 58.18) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.701 | 0.321 | 328.4 |
| 2 | 0.677 | 0.292 | 340 |
| 3 | 0.665 | 0.251 | 355.8 |
| 4 | 0.701 | 0.187 | 383.3 |
| 5 | 0.764 | 0.163 | 418.2 |

## In these collections

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

## Other forms

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