# Orchid Canary Angular Quartet

Four angular bands pair deep plum and orchid with ochre and pale canary yellow. The clearly separated complementary colors suit posters, editorial graphics, package accents, presentation slides, and decorative layouts that need a compact purple-and-yellow palette spanning dark jewel tones and bright warm highlights.

- Also called: Purple, orange and yellow angular swatches
- Seed: `kUUUngPDDBN2vTdtskEg`
- Page: https://grabient.com/kUUUngPDDBN2vTdtskEg?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: dark to light, multicolor
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 8.7 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 | `#451f55` | `oklch(31.89% 0.1006 315.00)` | Galactic Wonder | white, 13.3 to 1 |
| 2 | `#803c83` | `oklch(47.24% 0.1337 325.57)` | Violet Webcap | white, 7.2 to 1 |
| 3 | `#d1a13a` | `oklch(73.62% 0.1295 82.87)` | Cremini | black, 8.8 to 1 |
| 4 | `#f0cf5c` | `oklch(86.22% 0.1378 93.43)` | Sorreno Lemon | black, 13.8 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #451f55 0.000% 25.000%, #803c83 25.000% 50.000%, #d1a13a 50.000% 75.000%, #f0cf5c 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(31.89% 0.1006 315.00) 0.000% 25.000%, oklch(47.24% 0.1337 325.57) 25.000% 50.000%, oklch(73.62% 0.1295 82.87) 50.000% 75.000%, oklch(86.22% 0.1378 93.43) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.101 | 315 |
| 2 | 0.472 | 0.134 | 325.6 |
| 3 | 0.736 | 0.13 | 442.9 |
| 4 | 0.862 | 0.138 | 453.4 |

## In these collections

- [Purple and yellow swatches](https://grabient.com/purple-and-yellow-swatches)

## Other forms

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