# Electric Diary Stripe

Five bands move from sky blue through rose pink, violet, mint green, and finish in deep indigo. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. It suits playful digital graphics, fashion layouts, stickers, and energetic interface themes.

- Also called: Vivid blue, pink, green and purple linear swatches
- Seed: `kWjZS64TRJ-QmurtyCysS3UY`
- Page: https://grabient.com/kWjZS64TRJ-QmurtyCysS3UY?style=linearSwatches&steps=5&angle=240
- Drawn as: linear swatches, 5 steps, 240 degrees
- Kinds: light center, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 7.2 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 | `#2a68e8` | `oklch(55.51% 0.2039 262.27)` | Bluetiful | white, 4.9 to 1 |
| 2 | `#f38bc4` | `oklch(76.38% 0.1433 346.81)` | Bubblegum Beam | black, 9.2 to 1 |
| 3 | `#c7a9f2` | `oklch(78.74% 0.1061 302.42)` | Teasel Dipsacus | black, 10.4 to 1 |
| 4 | `#85f06a` | `oklch(86.22% 0.1984 139.68)` | Herbivore | black, 14.6 to 1 |
| 5 | `#5b2a72` | `oklch(38.58% 0.1254 312.99)` | Violethargic | white, 10.4 to 1 |

## CSS

```css
background: linear-gradient(240deg, #2a68e8 0.000% 20.000%, #f38bc4 20.000% 40.000%, #c7a9f2 40.000% 60.000%, #85f06a 60.000% 80.000%, #5b2a72 80.000% 100.000%);
background: linear-gradient(240deg, oklch(55.51% 0.2039 262.27) 0.000% 20.000%, oklch(76.38% 0.1433 346.81) 20.000% 40.000%, oklch(78.74% 0.1061 302.42) 40.000% 60.000%, oklch(86.22% 0.1984 139.68) 60.000% 80.000%, oklch(38.58% 0.1254 312.99) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.555 | 0.204 | 262.3 |
| 2 | 0.764 | 0.143 | 346.8 |
| 3 | 0.787 | 0.106 | 302.4 |
| 4 | 0.862 | 0.198 | 139.7 |
| 5 | 0.386 | 0.125 | 313 |

## In these collections

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

## Other forms

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