# Teal Cyan Violet Halo

This radial gradient moves from the center outward through teal, vivid cyan, violet, deep cyan, muted blue, and pale violet. 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: Light blue, purple, navy and lavender linear gradient
- Seed: `kUw1qSsj5MamVNXzlkrA`
- Page: https://grabient.com/kUw1qSsj5MamVNXzlkrA?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: 10.5 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 | `#2ac9da` | `oklch(76.77% 0.1240 206.02)` | Sea Serpent | black, 10.5 to 1 |
| 2 | `#17c1dc` | `oklch(74.50% 0.1274 212.89)` | Caribbean Blue | black, 9.6 to 1 |
| 3 | `#02b4de` | `oklch(71.42% 0.1325 222.75)` | Blue Atoll | black, 8.5 to 1 |
| 4 | `#16a4e0` | `oklch(67.73% 0.1390 234.79)` | Vanadyl Blue | black, 7.3 to 1 |
| 5 | `#3290de` | `oklch(63.60% 0.1461 248.17)` | Oregon Blue | black, 6.1 to 1 |
| 6 | `#497ad8` | `oklch(59.23% 0.1533 262.09)` | Skies of Cyberspace | black, 5 to 1 |
| 7 | `#5a63cc` | `oklch(54.79% 0.1601 275.73)` | Borage Blue | white, 5.1 to 1 |
| 8 | `#644ebc` | `oklch(50.48% 0.1659 288.27)` | Waiporoporo Purple | white, 6.2 to 1 |
| 9 | `#693aa9` | `oklch(46.48% 0.1702 298.90)` | Poppy Pompadour | white, 7.5 to 1 |
| 10 | `#692997` | `oklch(42.96% 0.1723 306.81)` | Queens of the Dead | white, 8.8 to 1 |
| 11 | `#651c8a` | `oklch(40.13% 0.1717 311.17)` | Sapphire Siren | white, 10 to 1 |
| 12 | `#5e1681` | `oklch(37.94% 0.1679 311.10)` | Extraviolet | white, 10.9 to 1 |
| 13 | `#53167c` | `oklch(35.84% 0.1604 306.43)` | Velvet Vortex | white, 11.8 to 1 |
| 14 | `#441979` | `oklch(33.86% 0.1502 298.13)` | Explorer of the Galaxies | white, 12.6 to 1 |
| 15 | `#331e74` | `oklch(32.09% 0.1379 287.21)` | Deep Space Rodeo | white, 13.3 to 1 |
| 16 | `#20236c` | `oklch(30.63% 0.1242 274.70)` | After Work Blue | white, 13.8 to 1 |
| 17 | `#092862` | `oklch(29.57% 0.1100 261.61)` | Blue Leviathan | white, 14 to 1 |
| 18 | `#002d51` | `oklch(29.02% 0.0803 249.10)` | Indigo Black | white, 14.1 to 1 |
| 19 | `#002f47` | `oklch(29.04% 0.0643 237.93)` | Cosmos Blue | white, 13.9 to 1 |
| 20 | `#003245` | `oklch(29.75% 0.0588 229.22)` | Nordic Noir | white, 13.5 to 1 |
| 21 | `#003747` | `oklch(31.22% 0.0587 224.02)` | Crowberry Blue | white, 12.8 to 1 |
| 22 | `#0c3d4c` | `oklch(33.60% 0.0562 223.21)` | Subterranean River | white, 11.7 to 1 |
| 23 | `#1e4656` | `oklch(37.44% 0.0526 226.61)` | Blue Syzygy | white, 10 to 1 |
| 24 | `#315466` | `oklch(42.59% 0.0507 233.27)` | Deep Dive | white, 8.1 to 1 |
| 25 | `#46637a` | `oklch(48.72% 0.0503 242.45)` | Stellar | white, 6.2 to 1 |
| 26 | `#5e7591` | `oklch(55.49% 0.0510 253.40)` | Columbus | white, 4.7 to 1 |
| 27 | `#7988a8` | `oklch(62.58% 0.0525 265.38)` | Ship Cove | black, 5.8 to 1 |
| 28 | `#959bc0` | `oklch(69.64% 0.0544 277.66)` | Grape Ivy | black, 7.6 to 1 |
| 29 | `#b1add5` | `oklch(76.35% 0.0566 289.49)` | Delicate Lilac | black, 9.7 to 1 |
| 30 | `#cbbde6` | `oklch(82.35% 0.0585 300.12)` | Drifting Dream | black, 11.9 to 1 |
| 31 | `#e1cbf4` | `oklch(87.33% 0.0600 308.83)` | Mousse aux Pruneaux | black, 14 to 1 |
| 32 | `#f1d6fe` | `oklch(90.94% 0.0606 314.86)` | Lavender Savour | black, 15.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #2ac9da 0.0%, #17c1dc 3.2%, #02b4de 6.5%, #16a4e0 9.7%, #3290de 12.9%, #497ad8 16.1%, #5a63cc 19.4%, #644ebc 22.6%, #693aa9 25.8%, #692997 29.0%, #651c8a 32.3%, #5e1681 35.5%, #53167c 38.7%, #441979 41.9%, #331e74 45.2%, #20236c 48.4%, #092862 51.6%, #002d51 54.8%, #002f47 58.1%, #003245 61.3%, #003747 64.5%, #0c3d4c 67.7%, #1e4656 71.0%, #315466 74.2%, #46637a 77.4%, #5e7591 80.6%, #7988a8 83.9%, #959bc0 87.1%, #b1add5 90.3%, #cbbde6 93.5%, #e1cbf4 96.8%, #f1d6fe 100.0%);
background: linear-gradient(135deg in oklch, oklch(76.77% 0.1240 206.02) 0.0%, oklch(74.50% 0.1274 212.89) 3.2%, oklch(71.42% 0.1325 222.75) 6.5%, oklch(67.73% 0.1390 234.79) 9.7%, oklch(63.60% 0.1461 248.17) 12.9%, oklch(59.23% 0.1533 262.09) 16.1%, oklch(54.79% 0.1601 275.73) 19.4%, oklch(50.48% 0.1659 288.27) 22.6%, oklch(46.48% 0.1702 298.90) 25.8%, oklch(42.96% 0.1723 306.81) 29.0%, oklch(40.13% 0.1717 311.17) 32.3%, oklch(37.94% 0.1679 311.10) 35.5%, oklch(35.84% 0.1604 306.43) 38.7%, oklch(33.86% 0.1502 298.13) 41.9%, oklch(32.09% 0.1379 287.21) 45.2%, oklch(30.63% 0.1242 274.70) 48.4%, oklch(29.57% 0.1100 261.61) 51.6%, oklch(29.02% 0.0803 249.10) 54.8%, oklch(29.04% 0.0643 237.93) 58.1%, oklch(29.75% 0.0588 229.22) 61.3%, oklch(31.22% 0.0587 224.02) 64.5%, oklch(33.60% 0.0562 223.21) 67.7%, oklch(37.44% 0.0526 226.61) 71.0%, oklch(42.59% 0.0507 233.27) 74.2%, oklch(48.72% 0.0503 242.45) 77.4%, oklch(55.49% 0.0510 253.40) 80.6%, oklch(62.58% 0.0525 265.38) 83.9%, oklch(69.64% 0.0544 277.66) 87.1%, oklch(76.35% 0.0566 289.49) 90.3%, oklch(82.35% 0.0585 300.12) 93.5%, oklch(87.33% 0.0600 308.83) 96.8%, oklch(90.94% 0.0606 314.86) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.768 | 0.124 | 206 |
| 2 | 0.394 | 0.171 | 311.7 |
| 3 | 0.327 | 0.058 | 222.9 |
| 4 | 0.909 | 0.061 | 314.9 |

## In these collections

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

## Other forms

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