# Purple, salmon, peach and yellow angular swatches

Purple, salmon, peach and yellow angular swatches with 5 colors: #4d3e5e, #a85667, #fe7b70, #fdae7b, #fde586. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWZCnZRqfHV06wjnqcMdStE4`
- Page: https://grabient.com/kWZCnZRqfHV06wjnqcMdStE4?style=angularSwatches&steps=5
- Drawn as: angular swatches, 5 steps, 90 degrees
- Kinds: dark to light, pastel, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 7.6 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 | `#4d3e5e` | `oklch(39.37% 0.0565 305.16)` | Powerful Mauve | white, 9.6 to 1 |
| 2 | `#a85667` | `oklch(55.51% 0.1089 7.50)` | Splatter | white, 5 to 1 |
| 3 | `#fe7b70` | `oklch(73.23% 0.1612 26.53)` | Hipster Salmon | black, 8.2 to 1 |
| 4 | `#fdae7b` | `oklch(81.50% 0.1144 52.94)` | Peach | black, 11.4 to 1 |
| 5 | `#fde586` | `oklch(92.13% 0.1185 95.21)` | Lemon Drizzle | black, 16.6 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #4d3e5e 0.000% 20.000%, #a85667 20.000% 40.000%, #fe7b70 40.000% 60.000%, #fdae7b 60.000% 80.000%, #fde586 80.000% 100.000%);
background: conic-gradient(from 90deg, oklch(39.37% 0.0565 305.16) 0.000% 20.000%, oklch(55.51% 0.1089 7.50) 20.000% 40.000%, oklch(73.23% 0.1612 26.53) 40.000% 60.000%, oklch(81.50% 0.1144 52.94) 60.000% 80.000%, oklch(92.13% 0.1185 95.21) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.394 | 0.056 | 305.2 |
| 2 | 0.555 | 0.109 | 367.5 |
| 3 | 0.732 | 0.161 | 386.5 |
| 4 | 0.815 | 0.114 | 412.9 |
| 5 | 0.921 | 0.119 | 455.2 |

## In these collections

- [Dusk gradients](https://grabient.com/dusk-gradients)
- [WGSN 2027 swatches](https://grabient.com/wgsn-2027-swatches)

## Other forms

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