# Pastel Arcade Diagonal Swatches

Pale yellow, aqua, lavender, and pink form a clean pastel palette with a light, nostalgic arcade mood. Warm and cool tones alternate gently, giving the colors enough contrast for graphic shapes while keeping the overall feeling soft. It fits retro web graphics, sticker sets, summer posters, and searches for pastel vaporwave or aqua pink color palettes.

- Also called: Pink, purple, light blue and tan linear swatches
- Seed: `kW6Cbw4rZAFG7O9nqDM9qQz4`
- Page: https://grabient.com/kW6Cbw4rZAFG7O9nqDM9qQz4?style=linearSwatches&steps=5&angle=225
- Drawn as: linear swatches, 5 steps, 225 degrees
- Kinds: vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.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 | `#fbd6ef` | `oklch(91.34% 0.0524 338.20)` | Jacaranda | black, 15.9 to 1 |
| 2 | `#f38ed5` | `oklch(77.56% 0.1488 339.26)` | Bubblegum Kisses | black, 9.6 to 1 |
| 3 | `#a36fdb` | `oklch(64.17% 0.1626 304.39)` | Violet Voltage | black, 5.8 to 1 |
| 4 | `#5bd9da` | `oklch(81.50% 0.1102 196.60)` | Neon Nazar | black, 12.3 to 1 |
| 5 | `#fde99b` | `oklch(93.31% 0.0992 95.15)` | Pale Daffodil | black, 17.3 to 1 |

## CSS

```css
background: linear-gradient(225deg, #fbd6ef 0.000% 20.000%, #f38ed5 20.000% 40.000%, #a36fdb 40.000% 60.000%, #5bd9da 60.000% 80.000%, #fde99b 80.000% 100.000%);
background: linear-gradient(225deg, oklch(91.34% 0.0524 338.20) 0.000% 20.000%, oklch(77.56% 0.1488 339.26) 20.000% 40.000%, oklch(64.17% 0.1626 304.39) 40.000% 60.000%, oklch(81.50% 0.1102 196.60) 60.000% 80.000%, oklch(93.31% 0.0992 95.15) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.913 | 0.052 | 338.2 |
| 2 | 0.776 | 0.149 | 339.3 |
| 3 | 0.642 | 0.163 | 304.4 |
| 4 | 0.815 | 0.11 | 196.6 |
| 5 | 0.933 | 0.099 | 95.2 |

## In these collections

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

## Other forms

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