# Gummy Candy Ribbon

5 fan-shaped bands turn around the center through olive, violet, pale rose, green, and orange. The lighter colors offer relief while the deeper colors support legible pale type and clear focal marks. Use this palette for candy packaging, party graphics, playful stickers, and bright interface accents; each visible color keeps a practical role without weakening the collection’s specific mood.

- Also called: Rainbow from green to orange angular swatches
- Seed: `kWz4ZfzkDT-amRhesFS6LS0I`
- Page: https://grabient.com/kWz4ZfzkDT-amRhesFS6LS0I?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: vivid, rainbow
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.3 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 | `#8edc55` | `oklch(81.50% 0.1846 134.30)` | Lilliputian Lime | black, 12.4 to 1 |
| 2 | `#9b63da` | `oklch(61.42% 0.1778 303.38)` | Legendary Lavender | black, 5.2 to 1 |
| 3 | `#f6a4c3` | `oklch(80.71% 0.1047 355.16)` | Rogue Pink | black, 10.9 to 1 |
| 4 | `#37c7a0` | `oklch(74.41% 0.1323 170.58)` | Jadeite | black, 9.8 to 1 |
| 5 | `#ffb44e` | `oklch(82.28% 0.1444 71.25)` | Orange Toffee | black, 11.8 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #8edc55 0.000% 20.000%, #9b63da 20.000% 40.000%, #f6a4c3 40.000% 60.000%, #37c7a0 60.000% 80.000%, #ffb44e 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(81.50% 0.1846 134.30) 0.000% 20.000%, oklch(61.42% 0.1778 303.38) 20.000% 40.000%, oklch(80.71% 0.1047 355.16) 40.000% 60.000%, oklch(74.41% 0.1323 170.58) 60.000% 80.000%, oklch(82.28% 0.1444 71.25) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.815 | 0.185 | 134.3 |
| 2 | 0.614 | 0.178 | 303.4 |
| 3 | 0.807 | 0.105 | 355.2 |
| 4 | 0.744 | 0.132 | 530.6 |
| 5 | 0.823 | 0.145 | 431.2 |

## In these collections

- [Gummy candy swatches](https://grabient.com/gummy-candy-swatches)

## Other forms

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