# Turquoise, cobalt blue and violet neon palette

The Turquoise, cobalt blue and violet neon palette brings together teal, blue, and purple. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is purple, and its lightest tone is teal.

- Also called: Vivid light blue, blue and purple linear gradient
- Seed: `kYzmaa5rK_VwzwnOQsQSVtDc1qQW`
- Page: https://grabient.com/kYzmaa5rK_VwzwnOQsQSVtDc1qQW?steps=6&angle=45
- Drawn as: linear gradient, 6 steps, 45 degrees
- Kinds: vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 2.8 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 | `#21d6fc` | `oklch(81.10% 0.1406 217.27)` | Neon Blue | black, 12.1 to 1 |
| 2 | `#0fd7f4` | `oklch(80.71% 0.1392 211.98)` | Neon Blue | black, 12 to 1 |
| 3 | `#24b4f0` | `oklch(72.44% 0.1419 233.12)` | Lynx Screen Blue | black, 8.8 to 1 |
| 4 | `#567af1` | `oklch(61.42% 0.1833 267.99)` | Blue Öyster Cult | black, 5.4 to 1 |
| 5 | `#8f40f6` | `oklch(57.48% 0.2508 297.58)` | Sugar Grape | white, 4.9 to 1 |
| 6 | `#b71eff` | `oklch(60.63% 0.2921 310.26)` | Hunky Hummingbird | black, 4.6 to 1 |

## CSS

```css
background: linear-gradient(45deg, #21d6fc 0.0%, #0fd7f4 20.0%, #24b4f0 40.0%, #567af1 60.0%, #8f40f6 80.0%, #b71eff 100.0%);
background: linear-gradient(45deg in oklch, oklch(81.10% 0.1406 217.27) 0.0%, oklch(80.71% 0.1392 211.98) 20.0%, oklch(72.44% 0.1419 233.12) 40.0%, oklch(61.42% 0.1833 267.99) 60.0%, oklch(57.48% 0.2508 297.58) 80.0%, oklch(60.63% 0.2921 310.26) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.811 | 0.141 | 217.3 |
| 2 | 0.807 | 0.139 | 212 |
| 3 | 0.724 | 0.142 | 233.1 |
| 4 | 0.614 | 0.183 | 268 |
| 5 | 0.575 | 0.251 | 297.6 |
| 6 | 0.606 | 0.292 | 310.3 |

## In these collections

- [Neon swatches](https://grabient.com/neon-swatches)

## Other forms

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