# Vivid analogous cyan to blue angular gradient

Vivid analogous cyan to blue angular gradient with 32 colors: #2bd7ff, #30ddff, #38e7ff, #3ff1ff, #42faff, #5bfffd, #72fffa, #6ffffa, #5afffc, #30ffff, #30fdff, #34fcff, #3efdff, #48feff, #4ffdff, #4ef8ff, #41edff, #2bdbff, #13c3ff, #17a8ff, #2c8dff, #3a77fc, #3b64fb, #3751fc, #323eff, #2e2bff, #2e12ff, #2f00fc, #2f00fb, #2e00fc, #2e00ff, #2d07fe. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaz2ib9LY8_K4QFwssCTsnG7xuwO7bj_g`
- Page: https://grabient.com/kaz2ib9LY8_K4QFwssCTsnG7xuwO7bj_g?style=angularGradient&steps=32&angle=225
- Drawn as: angular gradient, 32 steps, 225 degrees
- Kinds: light center, vivid, light, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 6.9 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 | `#2bd7ff` | `oklch(81.50% 0.1398 218.67)` | Neon Blue | black, 12.2 to 1 |
| 2 | `#30ddff` | `oklch(83.01% 0.1383 214.92)` | Vaporwave Blue | black, 12.9 to 1 |
| 3 | `#38e7ff` | `oklch(85.26% 0.1370 209.38)` | Shimmering Expanse Cyan | black, 13.9 to 1 |
| 4 | `#3ff1ff` | `oklch(87.75% 0.1376 203.22)` | Lightsaber Blue | black, 15.2 to 1 |
| 5 | `#42faff` | `oklch(90.02% 0.1408 197.60)` | Bright Cyan | black, 16.3 to 1 |
| 6 | `#5bfffd` | `oklch(91.57% 0.1339 193.72)` | CGA Blue | black, 17.1 to 1 |
| 7 | `#72fffa` | `oklch(92.15% 0.1223 192.19)` | Aggressive Baby Blue | black, 17.4 to 1 |
| 8 | `#6ffffa` | `oklch(92.04% 0.1242 192.25)` | Aggressive Baby Blue | black, 17.3 to 1 |
| 9 | `#5afffc` | `oklch(91.53% 0.1344 193.32)` | CGA Blue | black, 17.1 to 1 |
| 10 | `#30ffff` | `oklch(90.85% 0.1485 194.81)` | Beaming Blue | black, 16.8 to 1 |
| 11 | `#30fdff` | `oklch(90.28% 0.1473 196.15)` | Bright Cyan | black, 16.5 to 1 |
| 12 | `#34fcff` | `oklch(90.14% 0.1457 196.66)` | Bright Cyan | black, 16.4 to 1 |
| 13 | `#3efdff` | `oklch(90.54% 0.1436 196.12)` | Bright Cyan | black, 16.6 to 1 |
| 14 | `#48feff` | `oklch(90.97% 0.1407 195.60)` | Bright Cyan | black, 16.8 to 1 |
| 15 | `#4ffdff` | `oklch(90.88% 0.1375 196.22)` | Bright Cyan | black, 16.8 to 1 |
| 16 | `#4ef8ff` | `oklch(89.73% 0.1352 199.11)` | Frozen Turquoise | black, 16.1 to 1 |
| 17 | `#41edff` | `oklch(86.93% 0.1356 205.57)` | Sparky Blue | black, 14.7 to 1 |
| 18 | `#2bdbff` | `oklch(82.29% 0.1395 216.52)` | Vaporwave Blue | black, 12.6 to 1 |
| 19 | `#13c3ff` | `oklch(76.51% 0.1499 229.98)` | Spiro Disco Ball | black, 10.2 to 1 |
| 20 | `#17a8ff` | `oklch(70.43% 0.1676 243.70)` | Protoss Pylon | black, 8 to 1 |
| 21 | `#2c8dff` | `oklch(64.85% 0.1906 255.40)` | Clear Chill | black, 6.3 to 1 |
| 22 | `#3a77fc` | `oklch(60.50% 0.2082 262.94)` | Lightish Blue | black, 5.2 to 1 |
| 23 | `#3b64fb` | `oklch(56.84% 0.2287 266.94)` | Gentian Flower | white, 4.7 to 1 |
| 24 | `#3751fc` | `oklch(53.63% 0.2518 268.68)` | Hooloovoo Blue | white, 5.5 to 1 |
| 25 | `#323eff` | `oklch(50.90% 0.2744 269.08)` | Blueshift | white, 6.4 to 1 |
| 26 | `#2e2bff` | `oklch(48.68% 0.2898 269.07)` | System Shock Blue | white, 7.2 to 1 |
| 27 | `#2e12ff` | `oklch(47.01% 0.3011 269.52)` | Blue Pencil | white, 7.9 to 1 |
| 28 | `#2f00fc` | `oklch(46.13% 0.3024 269.97)` | Blue Pencil | white, 8.2 to 1 |
| 29 | `#2f00fb` | `oklch(45.91% 0.3009 269.99)` | Blue Pencil | white, 8.3 to 1 |
| 30 | `#2e00fc` | `oklch(46.08% 0.3026 269.78)` | Blue Pencil | white, 8.3 to 1 |
| 31 | `#2e00ff` | `oklch(46.35% 0.3049 269.52)` | Blue Pencil | white, 8.2 to 1 |
| 32 | `#2d07fe` | `oklch(46.46% 0.3031 269.40)` | Blue Pencil | white, 8.1 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #2bd7ff 0.0%, #30ddff 3.2%, #38e7ff 6.5%, #3ff1ff 9.7%, #42faff 12.9%, #5bfffd 16.1%, #72fffa 19.4%, #6ffffa 22.6%, #5afffc 25.8%, #30ffff 29.0%, #30fdff 32.3%, #34fcff 35.5%, #3efdff 38.7%, #48feff 41.9%, #4ffdff 45.2%, #4ef8ff 48.4%, #41edff 51.6%, #2bdbff 54.8%, #13c3ff 58.1%, #17a8ff 61.3%, #2c8dff 64.5%, #3a77fc 67.7%, #3b64fb 71.0%, #3751fc 74.2%, #323eff 77.4%, #2e2bff 80.6%, #2e12ff 83.9%, #2f00fc 87.1%, #2f00fb 90.3%, #2e00fc 93.5%, #2e00ff 96.8%, #2d07fe 100.0%);
background: conic-gradient(from 225deg in oklch, oklch(81.50% 0.1398 218.67) 0.0%, oklch(83.01% 0.1383 214.92) 3.2%, oklch(85.26% 0.1370 209.38) 6.5%, oklch(87.75% 0.1376 203.22) 9.7%, oklch(90.02% 0.1408 197.60) 12.9%, oklch(91.57% 0.1339 193.72) 16.1%, oklch(92.15% 0.1223 192.19) 19.4%, oklch(92.04% 0.1242 192.25) 22.6%, oklch(91.53% 0.1344 193.32) 25.8%, oklch(90.85% 0.1485 194.81) 29.0%, oklch(90.28% 0.1473 196.15) 32.3%, oklch(90.14% 0.1457 196.66) 35.5%, oklch(90.54% 0.1436 196.12) 38.7%, oklch(90.97% 0.1407 195.60) 41.9%, oklch(90.88% 0.1375 196.22) 45.2%, oklch(89.73% 0.1352 199.11) 48.4%, oklch(86.93% 0.1356 205.57) 51.6%, oklch(82.29% 0.1395 216.52) 54.8%, oklch(76.51% 0.1499 229.98) 58.1%, oklch(70.43% 0.1676 243.70) 61.3%, oklch(64.85% 0.1906 255.40) 64.5%, oklch(60.50% 0.2082 262.94) 67.7%, oklch(56.84% 0.2287 266.94) 71.0%, oklch(53.63% 0.2518 268.68) 74.2%, oklch(50.90% 0.2744 269.08) 77.4%, oklch(48.68% 0.2898 269.07) 80.6%, oklch(47.01% 0.3011 269.52) 83.9%, oklch(46.13% 0.3024 269.97) 87.1%, oklch(45.91% 0.3009 269.99) 90.3%, oklch(46.08% 0.3026 269.78) 93.5%, oklch(46.35% 0.3049 269.52) 96.8%, oklch(46.46% 0.3031 269.40) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.815 | 0.143 | 218.7 |
| 2 | 0.917 | 0.149 | 193.3 |
| 3 | 0.902 | 0.154 | 196.5 |
| 4 | 0.886 | 0.139 | 201.8 |
| 5 | 0.618 | 0.203 | 260.9 |
| 6 | 0.472 | 0.305 | 269.4 |
| 7 | 0.465 | 0.303 | 269.4 |

## In these collections

- [Electric blue gradients](https://grabient.com/electric-blue-gradients)

## Other forms

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