# Cyan Violet Blue Halo

This radial gradient moves from the center outward through vivid cyan, blue, vivid cyan, violet, vivid cyan, cyan, and pale blue. The complete visible route keeps the collection’s named color relationship clear while providing distinct light and dark areas for type, marks, and framing.

- Also called: Vivid analogous light blue and purple linear gradient
- Seed: `kYz1idoyXJ8OhNbJx0n2qI1HESxy`
- Page: https://grabient.com/kYz1idoyXJ8OhNbJx0n2qI1HESxy?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 11.1 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 | `#57d4fa` | `oklch(81.50% 0.1213 221.48)` | Libra Blue Morpho | black, 12.2 to 1 |
| 2 | `#52bbec` | `oklch(74.99% 0.1193 232.19)` | Clean Pool | black, 9.6 to 1 |
| 3 | `#5295d4` | `oklch(65.29% 0.1166 248.53)` | Blue Tourmaline | black, 6.6 to 1 |
| 4 | `#516bb1` | `oklch(54.07% 0.1134 267.29)` | Azraq Blue | white, 5.1 to 1 |
| 5 | `#4b4489` | `oklch(43.02% 0.1100 285.23)` | Moonlight Sonata | white, 8.4 to 1 |
| 6 | `#402766` | `oklch(33.81% 0.1067 299.16)` | Fading Horizon | white, 12.3 to 1 |
| 7 | `#361651` | `oklch(28.12% 0.1039 305.84)` | Russian Violet | white, 15.1 to 1 |
| 8 | `#31154e` | `oklch(27.12% 0.1006 301.98)` | Russian Violet | white, 15.5 to 1 |
| 9 | `#2d2259` | `oklch(29.80% 0.0958 288.26)` | Cluedo Night | white, 14.1 to 1 |
| 10 | `#273669` | `oklch(34.88% 0.0908 268.94)` | Passionate Blue | white, 11.5 to 1 |
| 11 | `#1e4e77` | `oklch(41.11% 0.0870 248.33)` | Mykonos Reflection | white, 8.7 to 1 |
| 12 | `#186482` | `oklch(47.21% 0.0857 230.73)` | Journey Into Night | white, 6.6 to 1 |
| 13 | `#17748c` | `oklch(51.93% 0.0884 220.46)` | Enamel Blue | white, 5.3 to 1 |
| 14 | `#0d7c98` | `oklch(54.39% 0.0973 221.54)` | Pacific Pleasure | white, 4.8 to 1 |
| 15 | `#037dac` | `oklch(55.64% 0.1148 233.39)` | Neptune | white, 4.6 to 1 |
| 16 | `#2d77c2` | `oklch(56.16% 0.1371 251.73)` | Windows Blue | white, 4.6 to 1 |
| 17 | `#576ad2` | `oklch(56.35% 0.1604 272.19)` | Borage Blue | white, 4.7 to 1 |
| 18 | `#795cd6` | `oklch(56.56% 0.1804 290.40)` | Astro Purple | white, 4.8 to 1 |
| 19 | `#8f52d4` | `oklch(57.16% 0.1932 301.97)` | Morado Purple | white, 4.8 to 1 |
| 20 | `#9455d9` | `oklch(58.48% 0.1948 302.66)` | Morado Purple | white, 4.5 to 1 |
| 21 | `#8665e4` | `oklch(60.23% 0.1855 292.07)` | Medium Slate Blue | black, 4.9 to 1 |
| 22 | `#6a7aeb` | `oklch(62.23% 0.1685 274.12)` | Pan Purple | black, 5.5 to 1 |
| 23 | `#4490e4` | `oklch(64.44% 0.1473 252.96)` | Oregon Blue | black, 6.3 to 1 |
| 24 | `#2ba1d4` | `oklch(66.80% 0.1252 232.74)` | Blue Damselfly | black, 7.1 to 1 |
| 25 | `#3dacc7` | `oklch(69.26% 0.1055 217.62)` | Dragonfly Blue | black, 7.9 to 1 |
| 26 | `#56b3c5` | `oklch(71.77% 0.0914 211.67)` | Aqua Verde | black, 8.6 to 1 |
| 27 | `#6dbacd` | `oklch(74.68% 0.0811 215.12)` | Delusional Dragonfly | black, 9.5 to 1 |
| 28 | `#84c2da` | `oklch(77.95% 0.0724 224.90)` | Blue Charm | black, 10.6 to 1 |
| 29 | `#9bc9e8` | `oklch(81.28% 0.0653 238.30)` | Windsor Way | black, 11.8 to 1 |
| 30 | `#b1cff3` | `oklch(84.42% 0.0595 252.63)` | Alphabet Blue | black, 13 to 1 |
| 31 | `#c3d5fa` | `oklch(87.08% 0.0548 265.18)` | Pale Phthalo Blue | black, 14.1 to 1 |
| 32 | `#cfd9fd` | `oklch(88.98% 0.0510 273.27)` | Icy Plains | black, 15 to 1 |

## CSS

```css
background: linear-gradient(135deg, #57d4fa 0.0%, #52bbec 3.2%, #5295d4 6.5%, #516bb1 9.7%, #4b4489 12.9%, #402766 16.1%, #361651 19.4%, #31154e 22.6%, #2d2259 25.8%, #273669 29.0%, #1e4e77 32.3%, #186482 35.5%, #17748c 38.7%, #0d7c98 41.9%, #037dac 45.2%, #2d77c2 48.4%, #576ad2 51.6%, #795cd6 54.8%, #8f52d4 58.1%, #9455d9 61.3%, #8665e4 64.5%, #6a7aeb 67.7%, #4490e4 71.0%, #2ba1d4 74.2%, #3dacc7 77.4%, #56b3c5 80.6%, #6dbacd 83.9%, #84c2da 87.1%, #9bc9e8 90.3%, #b1cff3 93.5%, #c3d5fa 96.8%, #cfd9fd 100.0%);
background: linear-gradient(135deg in oklch, oklch(81.50% 0.1213 221.48) 0.0%, oklch(74.99% 0.1193 232.19) 3.2%, oklch(65.29% 0.1166 248.53) 6.5%, oklch(54.07% 0.1134 267.29) 9.7%, oklch(43.02% 0.1100 285.23) 12.9%, oklch(33.81% 0.1067 299.16) 16.1%, oklch(28.12% 0.1039 305.84) 19.4%, oklch(27.12% 0.1006 301.98) 22.6%, oklch(29.80% 0.0958 288.26) 25.8%, oklch(34.88% 0.0908 268.94) 29.0%, oklch(41.11% 0.0870 248.33) 32.3%, oklch(47.21% 0.0857 230.73) 35.5%, oklch(51.93% 0.0884 220.46) 38.7%, oklch(54.39% 0.0973 221.54) 41.9%, oklch(55.64% 0.1148 233.39) 45.2%, oklch(56.16% 0.1371 251.73) 48.4%, oklch(56.35% 0.1604 272.19) 51.6%, oklch(56.56% 0.1804 290.40) 54.8%, oklch(57.16% 0.1932 301.97) 58.1%, oklch(58.48% 0.1948 302.66) 61.3%, oklch(60.23% 0.1855 292.07) 64.5%, oklch(62.23% 0.1685 274.12) 67.7%, oklch(64.44% 0.1473 252.96) 71.0%, oklch(66.80% 0.1252 232.74) 74.2%, oklch(69.26% 0.1055 217.62) 77.4%, oklch(71.77% 0.0914 211.67) 80.6%, oklch(74.68% 0.0811 215.12) 83.9%, oklch(77.95% 0.0724 224.90) 87.1%, oklch(81.28% 0.0653 238.30) 90.3%, oklch(84.42% 0.0595 252.63) 93.5%, oklch(87.08% 0.0548 265.18) 96.8%, oklch(88.98% 0.0510 273.27) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.815 | 0.121 | 221.5 |
| 2 | 0.276 | 0.103 | 306 |
| 3 | 0.531 | 0.091 | 219.4 |
| 4 | 0.579 | 0.196 | 303.9 |
| 5 | 0.713 | 0.094 | 212 |
| 6 | 0.89 | 0.051 | 273.3 |

## In these collections

- [Blue and purple gradients](https://grabient.com/blue-and-purple-gradients)

## Other forms

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