# Vermilion violet green fan

Orange, purple and green angular swatches with 10 colors: #e04a1a, #c8363d, #aa2c5e, #8c3278, #72468c, #61698c, #539390, #6ac074, #71ed58, #9fff65. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Orange, purple and green angular swatches
- Seed: `kcnI0aRMC9r04vE8LbxRJM59SgM5oSb3c9s_A`
- Page: https://grabient.com/kcnI0aRMC9r04vE8LbxRJM59SgM5oSb3c9s_A?style=angularSwatches&steps=10&angle=210
- Drawn as: angular swatches, 10 steps, 210 degrees
- Kinds: dark center, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.9 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 | `#e04a1a` | `oklch(61.42% 0.1943 36.56)` | Scoville High | black, 5.1 to 1 |
| 2 | `#c8363d` | `oklch(55.64% 0.1821 22.91)` | Root Chakra | white, 5.1 to 1 |
| 3 | `#aa2c5e` | `oklch(50.22% 0.1664 1.15)` | Vivacious | white, 6.5 to 1 |
| 4 | `#8c3278` | `oklch(47.11% 0.1478 337.42)` | Violet Vixen | white, 7.3 to 1 |
| 5 | `#72468c` | `oklch(47.63% 0.1186 311.79)` | Grapes of Italy | white, 7 to 1 |
| 6 | `#61698c` | `oklch(52.89% 0.0559 273.64)` | Justice | white, 5.3 to 1 |
| 7 | `#539390` | `oklch(61.91% 0.0664 191.36)` | Mirage Lake | black, 5.9 to 1 |
| 8 | `#6ac074` | `oklch(73.52% 0.1373 146.40)` | Bermudagrass | black, 9.4 to 1 |
| 9 | `#71ed58` | `oklch(84.50% 0.2186 140.45)` | The Matrix | black, 13.9 to 1 |
| 10 | `#9fff65` | `oklch(90.94% 0.2091 135.54)` | Irradiated Green | black, 16.9 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #e04a1a 0.000% 10.000%, #c8363d 10.000% 20.000%, #aa2c5e 20.000% 30.000%, #8c3278 30.000% 40.000%, #72468c 40.000% 50.000%, #61698c 50.000% 60.000%, #539390 60.000% 70.000%, #6ac074 70.000% 80.000%, #71ed58 80.000% 90.000%, #9fff65 90.000% 100.000%);
background: conic-gradient(from 210deg, oklch(61.42% 0.1943 36.56) 0.000% 10.000%, oklch(55.64% 0.1821 22.91) 10.000% 20.000%, oklch(50.22% 0.1664 1.15) 20.000% 30.000%, oklch(47.11% 0.1478 337.42) 30.000% 40.000%, oklch(47.63% 0.1186 311.79) 40.000% 50.000%, oklch(52.89% 0.0559 273.64) 50.000% 60.000%, oklch(61.91% 0.0664 191.36) 60.000% 70.000%, oklch(73.52% 0.1373 146.40) 70.000% 80.000%, oklch(84.50% 0.2186 140.45) 80.000% 90.000%, oklch(90.94% 0.2091 135.54) 90.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.614 | 0.194 | 36.6 |
| 2 | 0.539 | 0.178 | 17.5 |
| 3 | 0.48 | 0.156 | -13.1 |
| 4 | 0.472 | 0.125 | -43.8 |
| 5 | 0.539 | 0.052 | -94.5 |
| 6 | 0.665 | 0.088 | -199.1 |
| 7 | 0.819 | 0.203 | -217.1 |
| 8 | 0.909 | 0.251 | -224.5 |

## Other forms

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