# Canary coral violet bands

Canary yellow moves through warm orange and coral into hot pink and violet, with a pale yellow edge that keeps the horizontal swatches bright and open. The mood is cheerful and energetic. It suits party invitations, children’s packaging, festival graphics, and searches for bright color palettes or colorful swatches.

- Also called: Beige, orange, pink and blue linear swatches
- Seed: `kW8zJD7Dg-dpEOnUVjuQtg3Q`
- Page: https://grabient.com/kW8zJD7Dg-dpEOnUVjuQtg3Q?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: light to dark, vivid, warm, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 5.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 | `#fff1bd` | `oklch(95.67% 0.0689 94.93)` | Drop of Lemon | black, 18.5 to 1 |
| 2 | `#ffc344` | `oklch(85.04% 0.1528 82.25)` | Nârenji Orange | black, 13.1 to 1 |
| 3 | `#ff6d46` | `oklch(70.86% 0.1867 35.74)` | Outrageous Orange | black, 7.5 to 1 |
| 4 | `#fa3690` | `oklch(66.14% 0.2370 358.76)` | Unicorn Dust | black, 6 to 1 |
| 5 | `#683deb` | `oklch(52.36% 0.2425 285.84)` | Purplish Blue | white, 6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #fff1bd 0.000% 20.000%, #ffc344 20.000% 40.000%, #ff6d46 40.000% 60.000%, #fa3690 60.000% 80.000%, #683deb 80.000% 100.000%);
background: linear-gradient(180deg, oklch(95.67% 0.0689 94.93) 0.000% 20.000%, oklch(85.04% 0.1528 82.25) 20.000% 40.000%, oklch(70.86% 0.1867 35.74) 40.000% 60.000%, oklch(66.14% 0.2370 358.76) 60.000% 80.000%, oklch(52.36% 0.2425 285.84) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.069 | 94.9 |
| 2 | 0.85 | 0.154 | 82.2 |
| 3 | 0.709 | 0.187 | 35.7 |
| 4 | 0.661 | 0.237 | -1.2 |
| 5 | 0.524 | 0.243 | -74.2 |

## In these collections

- [Bright swatches](https://grabient.com/bright-swatches)

## Other forms

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