# Electric Sunset Neon Bands

Bright orange and hot pink move through violet-blue and electric cyan against a dark navy anchor. The high saturation and wide lightness range feel energetic, digital, and slightly nocturnal. This palette fits music artwork, event promotions, streaming graphics, and searches for neon sunset colors, cyan pink palettes, or bold diagonal swatches.

- Also called: Navy, cyan, purple and orange linear swatches
- Seed: `kWLx3PbbQ11HFxvX5Ua471MQ`
- Page: https://grabient.com/kWLx3PbbQ11HFxvX5Ua471MQ?style=linearSwatches&steps=5&angle=225
- Drawn as: linear swatches, 5 steps, 225 degrees
- Kinds: light center, vivid
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12.9 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 | `#130f23` | `oklch(18.50% 0.0400 291.09)` | Corbeau | white, 18.7 to 1 |
| 2 | `#22ecff` | `oklch(86.22% 0.1433 205.50)` | Whimsical Blue | black, 14.4 to 1 |
| 3 | `#5184ff` | `oklch(64.17% 0.1910 264.67)` | Flickery C64 | black, 6 to 1 |
| 4 | `#e443fe` | `oklch(68.90% 0.2783 321.74)` | Geisha Pink | black, 6.5 to 1 |
| 5 | `#ff9f1c` | `oklch(78.35% 0.1678 66.36)` | Orange Fruit | black, 10.2 to 1 |

## CSS

```css
background: linear-gradient(225deg, #130f23 0.000% 20.000%, #22ecff 20.000% 40.000%, #5184ff 40.000% 60.000%, #e443fe 60.000% 80.000%, #ff9f1c 80.000% 100.000%);
background: linear-gradient(225deg, oklch(18.50% 0.0400 291.09) 0.000% 20.000%, oklch(86.22% 0.1433 205.50) 20.000% 40.000%, oklch(64.17% 0.1910 264.67) 40.000% 60.000%, oklch(68.90% 0.2783 321.74) 60.000% 80.000%, oklch(78.35% 0.1678 66.36) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.185 | 0.04 | 291.1 |
| 2 | 0.862 | 0.143 | 205.5 |
| 3 | 0.642 | 0.192 | 264.7 |
| 4 | 0.689 | 0.278 | 321.7 |
| 5 | 0.783 | 0.168 | 426.4 |

## In these collections

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

## Other forms

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