# Hot Pink Pale Yellow Passage

These four diagonal bands move from hot pink through pale pink, orange-red, and finish in pale yellow. Use the unusual color clashes for dreamlike posters, experimental illustrations, music artwork, or playful title panels. The mix of soft and vivid tones offers distinct options for a background, foreground shapes, lettering, and small surprising accents.

- Also called: Vivid tritone pink, orange and yellow linear swatches
- Seed: `kUtJr8b5e9lNExx2rUhA`
- Page: https://grabient.com/kUtJr8b5e9lNExx2rUhA?style=linearSwatches&steps=4&angle=245
- Drawn as: linear swatches, 4 steps, 245 degrees
- Kinds: vivid, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 2.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 | `#ff5ba9` | `oklch(70.86% 0.2113 354.37)` | Pink Katydid | black, 7.3 to 1 |
| 2 | `#f2c7e8` | `oklch(87.80% 0.0648 334.30)` | Sugar High | black, 14.1 to 1 |
| 3 | `#ec5936` | `oklch(65.35% 0.1888 34.53)` | Day Glow Orange | black, 6 to 1 |
| 4 | `#f5ee88` | `oklch(93.31% 0.1240 105.33)` | Golden Staff | black, 17.4 to 1 |

## CSS

```css
background: linear-gradient(245deg, #ff5ba9 0.000% 25.000%, #f2c7e8 25.000% 50.000%, #ec5936 50.000% 75.000%, #f5ee88 75.000% 100.000%);
background: linear-gradient(245deg, oklch(70.86% 0.2113 354.37) 0.000% 25.000%, oklch(87.80% 0.0648 334.30) 25.000% 50.000%, oklch(65.35% 0.1888 34.53) 50.000% 75.000%, oklch(93.31% 0.1240 105.33) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.709 | 0.212 | 354.4 |
| 2 | 0.878 | 0.065 | 334.3 |
| 3 | 0.654 | 0.189 | 394.5 |
| 4 | 0.933 | 0.124 | 465.3 |

## In these collections

- [Surreal colors](https://grabient.com/surreal-colors)

## Other forms

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