# Turquoise, cobalt blue and violet cyberpunk palette

The Turquoise, cobalt blue and violet cyberpunk palette brings together teal, blue, and purple. The colors span a moderate 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 cyan, blue and purple linear gradient
- Seed: `kYz2WRY7FAVeyQxJwsPRNnDUnnwa`
- Page: https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa?steps=6
- Drawn as: linear gradient, 6 steps, 90 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 | `#00dceb` | `oklch(81.50% 0.1389 203.91)` | Tamarama | black, 12.4 to 1 |
| 2 | `#00d0e4` | `oklch(78.35% 0.1344 207.08)` | Aztec Turquoise | black, 11.1 to 1 |
| 3 | `#1ba8e2` | `oklch(68.90% 0.1378 233.50)` | Huelveño Horizon | black, 7.7 to 1 |
| 4 | `#4770e5` | `oklch(57.87% 0.1833 266.25)` | Royal Blue | black, 4.7 to 1 |
| 5 | `#7f37ea` | `oklch(53.94% 0.2467 294.79)` | Bluish Purple | white, 5.7 to 1 |
| 6 | `#ac14f4` | `oklch(57.87% 0.2852 309.58)` | Bright Violet | white, 5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00dceb 0.0%, #00d0e4 20.0%, #1ba8e2 40.0%, #4770e5 60.0%, #7f37ea 80.0%, #ac14f4 100.0%);
background: linear-gradient(90deg in oklch, oklch(81.50% 0.1389 203.91) 0.0%, oklch(78.35% 0.1344 207.08) 20.0%, oklch(68.90% 0.1378 233.50) 40.0%, oklch(57.87% 0.1833 266.25) 60.0%, oklch(53.94% 0.2467 294.79) 80.0%, oklch(57.87% 0.2852 309.58) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.815 | 0.139 | 203.9 |
| 2 | 0.783 | 0.135 | 207.1 |
| 3 | 0.689 | 0.138 | 233.5 |
| 4 | 0.579 | 0.183 | 266.3 |
| 5 | 0.539 | 0.247 | 294.8 |
| 6 | 0.579 | 0.285 | 309.6 |

## In these collections

- [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients)

## Other forms

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