# Vivid tritone purple, red and orange angular swatches

Vivid tritone purple, red and orange angular swatches with 6 colors: #7d2a76, #770c66, #b32843, #f96c27, #ffaa2e, #f3b636. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYb2vrsjvAkC_RJYxMM5jvDOc3QS`
- Page: https://grabient.com/kYb2vrsjvAkC_RJYxMM5jvDOc3QS?style=angularSwatches&steps=6
- Drawn as: angular swatches, 6 steps, 90 degrees
- Kinds: dark to light, vivid, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 5.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 | `#7d2a76` | `oklch(43.70% 0.1474 331.17)` | Veronica Purple | white, 8.5 to 1 |
| 2 | `#770c66` | `oklch(39.37% 0.1640 336.46)` | Purple Curse | white, 10.3 to 1 |
| 3 | `#b32843` | `oklch(50.79% 0.1736 15.56)` | Cherryade | white, 6.3 to 1 |
| 4 | `#f96c27` | `oklch(69.69% 0.1888 43.03)` | Shocking Orange | black, 7.2 to 1 |
| 5 | `#ffaa2e` | `oklch(80.31% 0.1607 70.51)` | Bee Cluster | black, 11 to 1 |
| 6 | `#f3b636` | `oklch(81.10% 0.1516 81.07)` | Sneezeweeds | black, 11.5 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #7d2a76 0.000% 16.667%, #770c66 16.667% 33.333%, #b32843 33.333% 50.000%, #f96c27 50.000% 66.667%, #ffaa2e 66.667% 83.333%, #f3b636 83.333% 100.000%);
background: conic-gradient(from 90deg, oklch(43.70% 0.1474 331.17) 0.000% 16.667%, oklch(39.37% 0.1640 336.46) 16.667% 33.333%, oklch(50.79% 0.1736 15.56) 33.333% 50.000%, oklch(69.69% 0.1888 43.03) 50.000% 66.667%, oklch(80.31% 0.1607 70.51) 66.667% 83.333%, oklch(81.10% 0.1516 81.07) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.437 | 0.147 | 331.2 |
| 2 | 0.394 | 0.164 | 336.5 |
| 3 | 0.508 | 0.174 | 375.6 |
| 4 | 0.697 | 0.189 | 403 |
| 5 | 0.803 | 0.164 | 430.5 |
| 6 | 0.811 | 0.152 | 441.1 |

## In these collections

- [Sunset swatches](https://grabient.com/sunset-swatches)
- [Warm swatches](https://grabient.com/warm-swatches)
- [Sunrise swatches](https://grabient.com/sunrise-swatches)

## Other forms

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