# Violet pink orange energy blocks

The Violet pink orange energy blocks brings together orange, blue, red, and teal. The colors span a moderate lightness range, combining strong color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is orange.

- Also called: Rainbow from orange to dark green angular swatches
- Seed: `kUvX8qN8ku9bKSqvk1Tg`
- Page: https://grabient.com/kUvX8qN8ku9bKSqvk1Tg?style=angularSwatches&steps=4&angle=180
- Drawn as: angular swatches, 4 steps, 180 degrees
- Kinds: vivid, rainbow
- Hues: wide
- Contrast of its darkest and lightest colors: 4.1 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 | `#fa8c06` | `oklch(74.41% 0.1750 59.06)` | Jú Huáng Tangerine | black, 8.8 to 1 |
| 2 | `#3b37bd` | `oklch(43.70% 0.2012 275.34)` | Blue Cardinal Flower | white, 8.5 to 1 |
| 3 | `#f95385` | `oklch(68.11% 0.2039 6.22)` | Macaroon Rose | black, 6.6 to 1 |
| 4 | `#1a4a44` | `oklch(37.40% 0.0524 183.76)` | Country Squire | white, 9.9 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #fa8c06 0.000% 25.000%, #3b37bd 25.000% 50.000%, #f95385 50.000% 75.000%, #1a4a44 75.000% 100.000%);
background: conic-gradient(from 180deg, oklch(74.41% 0.1750 59.06) 0.000% 25.000%, oklch(43.70% 0.2012 275.34) 25.000% 50.000%, oklch(68.11% 0.2039 6.22) 50.000% 75.000%, oklch(37.40% 0.0524 183.76) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.744 | 0.175 | 59.1 |
| 2 | 0.437 | 0.201 | -84.7 |
| 3 | 0.681 | 0.204 | 6.2 |
| 4 | 0.374 | 0.052 | 183.8 |

## In these collections

- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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