# Vivid blue, light blue, teal and pink linear gradient

Vivid blue, light blue, teal and pink linear gradient with 7 colors: #8c65e8, #38c1ff, #52d0cc, #15a7a1, #0080b0, #8a65ea, #f38bc4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWm4rRZ6y1lOoPhGykh4TRJ4`
- Page: https://grabient.com/kWm4rRZ6y1lOoPhGykh4TRJ4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, cool
- Hues: wide
- 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 | `#8c65e8` | `oklch(61.02% 0.1902 293.91)` | Medium Slate Blue | black, 5.1 to 1 |
| 2 | `#38c1ff` | `oklch(76.60% 0.1432 233.35)` | Shovel Knight | black, 10.2 to 1 |
| 3 | `#52d0cc` | `oklch(78.73% 0.1105 192.34)` | Medium Turquoise | black, 11.2 to 1 |
| 4 | `#15a7a1` | `oklch(65.75% 0.1102 190.34)` | Jadestone | black, 7 to 1 |
| 5 | `#0080b0` | `oklch(56.42% 0.1182 234.08)` | Turkish Blue | black, 4.6 to 1 |
| 6 | `#8a65ea` | `oklch(60.94% 0.1929 292.58)` | Medium Slate Blue | black, 5.1 to 1 |
| 7 | `#f38bc4` | `oklch(76.38% 0.1433 346.74)` | Bubblegum Beam | black, 9.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #8c65e8 0.0%, #38c1ff 16.7%, #52d0cc 33.3%, #15a7a1 50.0%, #0080b0 66.7%, #8a65ea 83.3%, #f38bc4 100.0%);
background: linear-gradient(90deg in oklch, oklch(61.02% 0.1902 293.91) 0.0%, oklch(76.60% 0.1432 233.35) 16.7%, oklch(78.73% 0.1105 192.34) 33.3%, oklch(65.75% 0.1102 190.34) 50.0%, oklch(56.42% 0.1182 234.08) 66.7%, oklch(60.94% 0.1929 292.58) 83.3%, oklch(76.38% 0.1433 346.74) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.19 | 293.9 |
| 2 | 0.815 | 0.123 | 206.2 |
| 3 | 0.657 | 0.11 | 190.3 |
| 4 | 0.555 | 0.204 | 262.2 |
| 5 | 0.764 | 0.143 | 346.7 |

## In these collections

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

## Other forms

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