# Violet, cobalt blue and turquoise electric blue

The Violet, cobalt blue and turquoise electric blue brings together purple, blue, and teal. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is purple, and its lightest tone is teal.

- Also called: Vivid analogous purple to light blue linear gradient
- Seed: `kUis3RSVS9lc_PRntDwg`
- Page: https://grabient.com/kUis3RSVS9lc_PRntDwg?steps=6&angle=180
- Drawn as: linear gradient, 6 steps, 180 degrees
- Kinds: vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 3.4 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 | `#8220fe` | `oklch(54.33% 0.2825 293.91)` | Szöllősi Grape | white, 5.8 to 1 |
| 2 | `#6a46ff` | `oklch(55.50% 0.2551 283.13)` | Pink OCD | white, 5.3 to 1 |
| 3 | `#4c6bff` | `oklch(59.15% 0.2212 269.36)` | Blue Heath Butterfly | black, 4.8 to 1 |
| 4 | `#3492ff` | `oklch(66.05% 0.1836 254.92)` | Clear Chill | black, 6.6 to 1 |
| 5 | `#19b8ff` | `oklch(74.18% 0.1550 235.85)` | Blue Bolt | black, 9.3 to 1 |
| 6 | `#1fd8ff` | `oklch(81.50% 0.1422 217.81)` | Neon Blue | black, 12.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #8220fe 0.0%, #6a46ff 20.0%, #4c6bff 40.0%, #3492ff 60.0%, #19b8ff 80.0%, #1fd8ff 100.0%);
background: linear-gradient(180deg in oklch, oklch(54.33% 0.2825 293.91) 0.0%, oklch(55.50% 0.2551 283.13) 20.0%, oklch(59.15% 0.2212 269.36) 40.0%, oklch(66.05% 0.1836 254.92) 60.0%, oklch(74.18% 0.1550 235.85) 80.0%, oklch(81.50% 0.1422 217.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.543 | 0.282 | 293.9 |
| 2 | 0.575 | 0.233 | 273.8 |
| 3 | 0.685 | 0.174 | 249.5 |
| 4 | 0.815 | 0.143 | 217.8 |

## In these collections

- [Electric blue gradients](https://grabient.com/electric-blue-gradients)

## Other forms

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