# Vivid analogous blue, cyan and green linear gradient

Vivid analogous blue, cyan and green linear gradient with 32 colors: #02aded, #03afed, #08b2ed, #10b5ed, #16b8ee, #1bbcee, #1dc1ee, #1ec5ee, #1bcaee, #15cfed, #0ed5ec, #09dceb, #0de2e8, #16e8e5, #21ede2, #2af2de, #30f5da, #33f8d7, #35fad3, #34fccf, #33fecb, #34ffc7, #3fffc3, #45ffbf, #47ffba, #40ffb5, #33ffae, #32fda9, #30fca4, #2efba0, #2df99c, #2df999. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWs2um4jE-G62O7xwb3bkk-4`
- Page: https://grabient.com/kWs2um4jE-G62O7xwb3bkk-4?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: vivid, light, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 1.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 | `#02aded` | `oklch(70.47% 0.1474 234.14)` | Democrat | black, 8.2 to 1 |
| 2 | `#03afed` | `oklch(70.99% 0.1463 233.02)` | Democrat | black, 8.3 to 1 |
| 3 | `#08b2ed` | `oklch(71.65% 0.1445 231.67)` | Lynx Screen Blue | black, 8.5 to 1 |
| 4 | `#10b5ed` | `oklch(72.43% 0.1423 230.08)` | Cyanite | black, 8.8 to 1 |
| 5 | `#16b8ee` | `oklch(73.32% 0.1401 228.21)` | Cyanite | black, 9.1 to 1 |
| 6 | `#1bbcee` | `oklch(74.29% 0.1380 226.04)` | Blue Bikini | black, 9.5 to 1 |
| 7 | `#1dc1ee` | `oklch(75.31% 0.1363 223.54)` | Blue Raspberry | black, 9.8 to 1 |
| 8 | `#1ec5ee` | `oklch(76.37% 0.1353 220.68)` | Blue Raspberry | black, 10.2 to 1 |
| 9 | `#1bcaee` | `oklch(77.44% 0.1351 217.42)` | Picnic Day Sky | black, 10.7 to 1 |
| 10 | `#15cfed` | `oklch(78.66% 0.1356 213.44)` | Picnic Day Sky | black, 11.1 to 1 |
| 11 | `#0ed5ec` | `oklch(80.02% 0.1366 208.79)` | Thousand Sons Blue | black, 11.7 to 1 |
| 12 | `#09dceb` | `oklch(81.45% 0.1381 203.72)` | Tamarama | black, 12.4 to 1 |
| 13 | `#0de2e8` | `oklch(82.89% 0.1399 198.49)` | Fish Boy | black, 13 to 1 |
| 14 | `#16e8e5` | `oklch(84.28% 0.1421 193.33)` | Bright Turquoise | black, 13.6 to 1 |
| 15 | `#21ede2` | `oklch(85.53% 0.1446 188.49)` | Frozen Boubble | black, 14.3 to 1 |
| 16 | `#2af2de` | `oklch(86.58% 0.1474 184.21)` | Frozen Boubble | black, 14.8 to 1 |
| 17 | `#30f5da` | `oklch(87.38% 0.1504 180.68)` | Bright Aqua | black, 15.2 to 1 |
| 18 | `#33f8d7` | `oklch(88.01% 0.1540 177.61)` | Lamiaceae | black, 15.5 to 1 |
| 19 | `#35fad3` | `oklch(88.50% 0.1581 174.90)` | Lamiaceae | black, 15.8 to 1 |
| 20 | `#34fccf` | `oklch(88.87% 0.1625 172.49)` | Plunge Pool | black, 16 to 1 |
| 21 | `#33fecb` | `oklch(89.12% 0.1671 170.34)` | Plunge Pool | black, 16.1 to 1 |
| 22 | `#34ffc7` | `oklch(89.28% 0.1707 168.38)` | Plunge Pool | black, 16.2 to 1 |
| 23 | `#3fffc3` | `oklch(89.36% 0.1705 166.56)` | Plunge Pool | black, 16.3 to 1 |
| 24 | `#45ffbf` | `oklch(89.37% 0.1716 164.82)` | Night Pearl | black, 16.3 to 1 |
| 25 | `#47ffba` | `oklch(89.29% 0.1747 163.17)` | Greenish Cyan | black, 16.2 to 1 |
| 26 | `#40ffb5` | `oklch(89.04% 0.1813 161.68)` | Greenish Cyan | black, 16.1 to 1 |
| 27 | `#33ffae` | `oklch(88.66% 0.1895 160.35)` | Enthusiasm | black, 16 to 1 |
| 28 | `#32fda9` | `oklch(88.20% 0.1925 159.18)` | Enthusiasm | black, 15.8 to 1 |
| 29 | `#30fca4` | `oklch(87.72% 0.1952 158.16)` | Yíng Guāng Sè Green | black, 15.5 to 1 |
| 30 | `#2efba0` | `oklch(87.26% 0.1976 157.29)` | Yíng Guāng Sè Green | black, 15.3 to 1 |
| 31 | `#2df99c` | `oklch(86.87% 0.1996 156.55)` | Atomic Spring | black, 15.1 to 1 |
| 32 | `#2df999` | `oklch(86.61% 0.2012 155.94)` | Atomic Spring | black, 15 to 1 |

## CSS

```css
background: linear-gradient(90deg, #02aded 0.0%, #03afed 3.2%, #08b2ed 6.5%, #10b5ed 9.7%, #16b8ee 12.9%, #1bbcee 16.1%, #1dc1ee 19.4%, #1ec5ee 22.6%, #1bcaee 25.8%, #15cfed 29.0%, #0ed5ec 32.3%, #09dceb 35.5%, #0de2e8 38.7%, #16e8e5 41.9%, #21ede2 45.2%, #2af2de 48.4%, #30f5da 51.6%, #33f8d7 54.8%, #35fad3 58.1%, #34fccf 61.3%, #33fecb 64.5%, #34ffc7 67.7%, #3fffc3 71.0%, #45ffbf 74.2%, #47ffba 77.4%, #40ffb5 80.6%, #33ffae 83.9%, #32fda9 87.1%, #30fca4 90.3%, #2efba0 93.5%, #2df99c 96.8%, #2df999 100.0%);
background: linear-gradient(90deg in oklch, oklch(70.47% 0.1474 234.14) 0.0%, oklch(70.99% 0.1463 233.02) 3.2%, oklch(71.65% 0.1445 231.67) 6.5%, oklch(72.43% 0.1423 230.08) 9.7%, oklch(73.32% 0.1401 228.21) 12.9%, oklch(74.29% 0.1380 226.04) 16.1%, oklch(75.31% 0.1363 223.54) 19.4%, oklch(76.37% 0.1353 220.68) 22.6%, oklch(77.44% 0.1351 217.42) 25.8%, oklch(78.66% 0.1356 213.44) 29.0%, oklch(80.02% 0.1366 208.79) 32.3%, oklch(81.45% 0.1381 203.72) 35.5%, oklch(82.89% 0.1399 198.49) 38.7%, oklch(84.28% 0.1421 193.33) 41.9%, oklch(85.53% 0.1446 188.49) 45.2%, oklch(86.58% 0.1474 184.21) 48.4%, oklch(87.38% 0.1504 180.68) 51.6%, oklch(88.01% 0.1540 177.61) 54.8%, oklch(88.50% 0.1581 174.90) 58.1%, oklch(88.87% 0.1625 172.49) 61.3%, oklch(89.12% 0.1671 170.34) 64.5%, oklch(89.28% 0.1707 168.38) 67.7%, oklch(89.36% 0.1705 166.56) 71.0%, oklch(89.37% 0.1716 164.82) 74.2%, oklch(89.29% 0.1747 163.17) 77.4%, oklch(89.04% 0.1813 161.68) 80.6%, oklch(88.66% 0.1895 160.35) 83.9%, oklch(88.20% 0.1925 159.18) 87.1%, oklch(87.72% 0.1952 158.16) 90.3%, oklch(87.26% 0.1976 157.29) 93.5%, oklch(86.87% 0.1996 156.55) 96.8%, oklch(86.61% 0.2012 155.94) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.705 | 0.147 | 234.1 |
| 2 | 0.772 | 0.135 | 218.3 |
| 3 | 0.87 | 0.149 | 182.4 |
| 4 | 0.894 | 0.181 | 164.4 |
| 5 | 0.866 | 0.201 | 155.9 |

## In these collections

- [Bright gradients](https://grabient.com/bright-gradients)
- [Summer gradients](https://grabient.com/summer-gradients)
- [Neon gradients](https://grabient.com/neon-gradients)

## Other forms

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