# Yellow Green Violet Wedges

These angular wedges move through yellow, deep violet, muted green, and vivid violet. The complete visible route keeps the collection’s named color relationship clear while providing distinct light and dark areas for type, marks, and framing.

- Also called: Green, navy, olive and purple angular swatches
- Seed: `kUxIhak57TEoarNVw9Pg`
- Page: https://grabient.com/kUxIhak57TEoarNVw9Pg?style=angularSwatches&steps=4&angle=315
- Drawn as: angular swatches, 4 steps, 315 degrees
- Kinds: dark center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 10 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 | `#94c928` | `oklch(77.17% 0.1874 127.27)` | Bergamot | black, 10.6 to 1 |
| 2 | `#0e012c` | `oklch(15.35% 0.0841 288.95)` | Black Htun | white, 19.8 to 1 |
| 3 | `#6f8354` | `oklch(58.27% 0.0730 127.27)` | Herb | black, 5 to 1 |
| 4 | `#a378f9` | `oklch(67.32% 0.1860 296.35)` | Purple Illusionist | black, 6.6 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #94c928 0.000% 25.000%, #0e012c 25.000% 50.000%, #6f8354 50.000% 75.000%, #a378f9 75.000% 100.000%);
background: conic-gradient(from 315deg, oklch(77.17% 0.1874 127.27) 0.000% 25.000%, oklch(15.35% 0.0841 288.95) 25.000% 50.000%, oklch(58.27% 0.0730 127.27) 50.000% 75.000%, oklch(67.32% 0.1860 296.35) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.772 | 0.187 | 127.3 |
| 2 | 0.154 | 0.084 | 288.9 |
| 3 | 0.583 | 0.073 | 127.3 |
| 4 | 0.673 | 0.186 | 296.3 |

## In these collections

- [Complementary swatches](https://grabient.com/complementary-swatches)

## Other forms

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