# Orange-Red Pale Pink Fan

These four angular wedges move from orange-red through hot pink, mint, and finish in pale pink. 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: Tritone orange, pink and light blue angular swatches
- Seed: `kUpokZWk07O8frFvl9Eg`
- Page: https://grabient.com/kUpokZWk07O8frFvl9Eg?style=angularSwatches&steps=4&angle=60
- Drawn as: angular swatches, 4 steps, 60 degrees
- Kinds: vivid, multicolor
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 2.4 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 | `#ec5934` | `oklch(65.35% 0.1888 35.16)` | Day Glow Orange | black, 6 to 1 |
| 2 | `#ff5ba8` | `oklch(70.86% 0.2101 355.00)` | Magenta Crayon | black, 7.3 to 1 |
| 3 | `#8fe8e1` | `oklch(87.40% 0.0868 189.09)` | Aqua Fiesta | black, 14.8 to 1 |
| 4 | `#f3c7e8` | `oklch(87.80% 0.0648 334.92)` | Sugar High | black, 14.1 to 1 |

## CSS

```css
background: conic-gradient(from 60deg, #ec5934 0.000% 25.000%, #ff5ba8 25.000% 50.000%, #8fe8e1 50.000% 75.000%, #f3c7e8 75.000% 100.000%);
background: conic-gradient(from 60deg, oklch(65.35% 0.1888 35.16) 0.000% 25.000%, oklch(70.86% 0.2101 355.00) 25.000% 50.000%, oklch(87.40% 0.0868 189.09) 50.000% 75.000%, oklch(87.80% 0.0648 334.92) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.654 | 0.189 | 35.2 |
| 2 | 0.709 | 0.212 | -5 |
| 3 | 0.874 | 0.087 | -170.9 |
| 4 | 0.878 | 0.065 | -25.1 |

## In these collections

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

## Other forms

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