# Marble Lobby Sunset

Five bands move from pale cream through turquoise, violet, rose pink, and finish in soft black. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. The palette supports music artwork, luminous backgrounds, event graphics, and atmospheric title panels without losing its darker and lighter anchors.

- Also called: Off-white, purple, pink and navy linear swatches
- Seed: `kW7hQ36CvOLs9TJXyEUGxm3w`
- Page: https://grabient.com/kW7hQ36CvOLs9TJXyEUGxm3w?style=linearSwatches&steps=5&angle=60
- Drawn as: linear swatches, 5 steps, 60 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 14.8 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 | `#f5e8d6` | `oklch(93.70% 0.0276 78.05)` | Vanilla Delight | black, 17.4 to 1 |
| 2 | `#4cdbe0` | `oklch(81.89% 0.1199 198.52)` | Neon Nazar | black, 12.5 to 1 |
| 3 | `#7037a2` | `oklch(46.46% 0.1681 305.25)` | Purple Heart | white, 7.6 to 1 |
| 4 | `#ef5caf` | `oklch(68.90% 0.1984 348.58)` | Crumbly Lipstick | black, 6.8 to 1 |
| 5 | `#141338` | `oklch(21.26% 0.0703 279.89)` | Spanish Roast | white, 17.8 to 1 |

## CSS

```css
background: linear-gradient(60deg, #f5e8d6 0.000% 20.000%, #4cdbe0 20.000% 40.000%, #7037a2 40.000% 60.000%, #ef5caf 60.000% 80.000%, #141338 80.000% 100.000%);
background: linear-gradient(60deg, oklch(93.70% 0.0276 78.05) 0.000% 20.000%, oklch(81.89% 0.1199 198.52) 20.000% 40.000%, oklch(46.46% 0.1681 305.25) 40.000% 60.000%, oklch(68.90% 0.1984 348.58) 60.000% 80.000%, oklch(21.26% 0.0703 279.89) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.028 | 78 |
| 2 | 0.819 | 0.12 | 198.5 |
| 3 | 0.465 | 0.168 | 305.2 |
| 4 | 0.689 | 0.198 | 348.6 |
| 5 | 0.213 | 0.07 | 279.9 |

## In these collections

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

## Other forms

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