# Arcade Closing Time

Five bands move from rose pink through deep indigo, steel blue, turquoise, and finish in violet. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. Use it for music artwork, luminous backgrounds, event graphics, and atmospheric title panels when the design needs several coordinated color roles.

- Also called: Pink, blue and purple angular swatches
- Seed: `kWr5D5KKo4y8nvTdq7jRjnKY`
- Page: https://grabient.com/kWr5D5KKo4y8nvTdq7jRjnKY?style=angularSwatches&steps=5&angle=180
- Drawn as: angular swatches, 5 steps, 180 degrees
- Kinds: dark center, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 5.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 | `#f05cac` | `oklch(68.90% 0.1984 350.16)` | Fugitive Flamingo | black, 6.8 to 1 |
| 2 | `#342268` | `oklch(31.89% 0.1157 289.92)` | Dark Dreams | white, 13.2 to 1 |
| 3 | `#253b79` | `oklch(37.01% 0.1089 266.67)` | Blue Expanse | white, 10.6 to 1 |
| 4 | `#25bfcf` | `oklch(73.62% 0.1199 206.44)` | The Crowd Roars! | black, 9.3 to 1 |
| 5 | `#7b5ac3` | `oklch(55.12% 0.1585 295.21)` | Fuchsia Blue | white, 5.1 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #f05cac 0.000% 20.000%, #342268 20.000% 40.000%, #253b79 40.000% 60.000%, #25bfcf 60.000% 80.000%, #7b5ac3 80.000% 100.000%);
background: conic-gradient(from 180deg, oklch(68.90% 0.1984 350.16) 0.000% 20.000%, oklch(31.89% 0.1157 289.92) 20.000% 40.000%, oklch(37.01% 0.1089 266.67) 40.000% 60.000%, oklch(73.62% 0.1199 206.44) 60.000% 80.000%, oklch(55.12% 0.1585 295.21) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.689 | 0.198 | 350.2 |
| 2 | 0.319 | 0.116 | 289.9 |
| 3 | 0.37 | 0.109 | 266.7 |
| 4 | 0.736 | 0.12 | 206.4 |
| 5 | 0.551 | 0.158 | 295.2 |

## In these collections

- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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