# Chrome Candy Fan

Five bands move from ivory through turquoise, magenta, gold, and finish in turquoise. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. This balance works well in playful digital graphics, fashion layouts, stickers, and energetic interface themes, especially where readable contrast matters.

- Also called: Rainbow angular swatches
- Seed: `kW9AqEU6hAdRU0tuvUyZ6zM4`
- Page: https://grabient.com/kW9AqEU6hAdRU0tuvUyZ6zM4?style=angularSwatches&steps=5&angle=120
- Drawn as: angular swatches, 5 steps, 120 degrees
- Kinds: dark center, vivid, light, rainbow
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.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 | `#e8f5f3` | `oklch(96.06% 0.0138 185.62)` | Shiroi White | black, 18.8 to 1 |
| 2 | `#16a7a0` | `oklch(65.75% 0.1102 189.85)` | Jadestone | black, 7 to 1 |
| 3 | `#f13ea8` | `oklch(66.14% 0.2329 349.42)` | Major Magenta | black, 6 to 1 |
| 4 | `#f5d330` | `oklch(87.01% 0.1681 96.15)` | Giallo | black, 14.2 to 1 |
| 5 | `#46d9e9` | `oklch(81.50% 0.1226 206.06)` | Blue Dacnis | black, 12.3 to 1 |

## CSS

```css
background: conic-gradient(from 120deg, #e8f5f3 0.000% 20.000%, #16a7a0 20.000% 40.000%, #f13ea8 40.000% 60.000%, #f5d330 60.000% 80.000%, #46d9e9 80.000% 100.000%);
background: conic-gradient(from 120deg, oklch(96.06% 0.0138 185.62) 0.000% 20.000%, oklch(65.75% 0.1102 189.85) 20.000% 40.000%, oklch(66.14% 0.2329 349.42) 40.000% 60.000%, oklch(87.01% 0.1681 96.15) 60.000% 80.000%, oklch(81.50% 0.1226 206.06) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.014 | 185.6 |
| 2 | 0.657 | 0.11 | 189.9 |
| 3 | 0.661 | 0.233 | 349.4 |
| 4 | 0.87 | 0.168 | 456.2 |
| 5 | 0.815 | 0.123 | 566.1 |

## In these collections

- [Y2K swatches](https://grabient.com/y2k-swatches)

## Other forms

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