# Lagoon Cassette Bands

Five bands move from turquoise through turquoise, rose pink, cobalt blue, and finish in deep indigo. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. This balance works well in music artwork, luminous backgrounds, event graphics, and atmospheric title panels, especially where readable contrast matters.

- Also called: Light blue, pink, blue and purple linear swatches
- Seed: `kW0FeN7Z--tfIUwvJ7YqKpCo`
- Page: https://grabient.com/kW0FeN7Z--tfIUwvJ7YqKpCo?style=linearSwatches&steps=5&angle=225
- Drawn as: linear swatches, 5 steps, 225 degrees
- Kinds: light to dark, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 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 | `#4cdbe1` | `oklch(81.89% 0.1199 198.98)` | Neon Nazar | black, 12.5 to 1 |
| 2 | `#8be5dd` | `oklch(86.22% 0.0868 188.42)` | Aqua Fiesta | black, 14.2 to 1 |
| 3 | `#f05cac` | `oklch(68.90% 0.1984 350.10)` | Fugitive Flamingo | black, 6.8 to 1 |
| 4 | `#273a79` | `oklch(37.01% 0.1089 267.67)` | Surf the Web | white, 10.6 to 1 |
| 5 | `#352268` | `oklch(31.89% 0.1157 290.92)` | Dark Dreams | white, 13.2 to 1 |

## CSS

```css
background: linear-gradient(225deg, #4cdbe1 0.000% 20.000%, #8be5dd 20.000% 40.000%, #f05cac 40.000% 60.000%, #273a79 60.000% 80.000%, #352268 80.000% 100.000%);
background: linear-gradient(225deg, oklch(81.89% 0.1199 198.98) 0.000% 20.000%, oklch(86.22% 0.0868 188.42) 20.000% 40.000%, oklch(68.90% 0.1984 350.10) 40.000% 60.000%, oklch(37.01% 0.1089 267.67) 60.000% 80.000%, oklch(31.89% 0.1157 290.92) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.819 | 0.12 | 199 |
| 2 | 0.862 | 0.087 | 188.4 |
| 3 | 0.689 | 0.198 | 350.1 |
| 4 | 0.37 | 0.109 | 267.7 |
| 5 | 0.319 | 0.116 | 290.9 |

## In these collections

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

## Other forms

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