# Poolside Pixel Bands

Five bands move from violet through turquoise, turquoise, sky blue, and finish in rose pink. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. The palette supports playful digital graphics, fashion layouts, stickers, and energetic interface themes without losing its darker and lighter anchors.

- Also called: Vivid purple, light blue, teal and pink linear swatches
- Seed: `kWm4rRZ6y1lOoPhGykh4TRJ4`
- Page: https://grabient.com/kWm4rRZ6y1lOoPhGykh4TRJ4?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: vivid, cool
- Hues: wide
- 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 | `#8c65e8` | `oklch(61.02% 0.1902 293.91)` | Medium Slate Blue | black, 5.1 to 1 |
| 2 | `#46d9ea` | `oklch(81.50% 0.1226 206.20)` | Blue Dacnis | black, 12.3 to 1 |
| 3 | `#15a7a1` | `oklch(65.75% 0.1102 190.34)` | Jadestone | black, 7 to 1 |
| 4 | `#2968e8` | `oklch(55.51% 0.2039 262.20)` | Bluetiful | white, 4.9 to 1 |
| 5 | `#f38bc4` | `oklch(76.38% 0.1433 346.74)` | Bubblegum Beam | black, 9.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #8c65e8 0.000% 20.000%, #46d9ea 20.000% 40.000%, #15a7a1 40.000% 60.000%, #2968e8 60.000% 80.000%, #f38bc4 80.000% 100.000%);
background: linear-gradient(180deg, oklch(61.02% 0.1902 293.91) 0.000% 20.000%, oklch(81.50% 0.1226 206.20) 20.000% 40.000%, oklch(65.75% 0.1102 190.34) 40.000% 60.000%, oklch(55.51% 0.2039 262.20) 60.000% 80.000%, oklch(76.38% 0.1433 346.74) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.19 | 293.9 |
| 2 | 0.815 | 0.123 | 206.2 |
| 3 | 0.657 | 0.11 | 190.3 |
| 4 | 0.555 | 0.204 | 262.2 |
| 5 | 0.764 | 0.143 | 346.7 |

## In these collections

- [Y2K swatches](https://grabient.com/y2k-swatches)

## Other forms

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