# Vivid cyan, blue and purple linear gradient Vivid cyan, blue and purple linear gradient with 32 colors: #00dceb, #00dbeb, #01dae9, #03d8e8, #04d7e6, #01d4e5, #00d1e4, #00cce4, #00c7e3, #00c0e3, #0bb9e3, #14b2e2, #1aabe2, #1da3e2, #219be3, #2792e3, #2f88e3, #387ee4, #4175e4, #4b6ce5, #5463e6, #5e5ae8, #6751e9, #7047ea, #793eea, #8136ea, #892eeb, #9128ed, #9923ef, #a11ef1, #a719f3, #ac14f4. Edit it and copy or download CSS, SVG, PNG or shader code. - Seed: `kYz2WRY7FAVeyQxJwsPRNnDUnnwa` - Page: https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa?steps=32 - Drawn as: linear gradient, 32 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 | `#00dbeb` | `oklch(81.24% 0.1385 203.99)` | Tamarama | black, 12.3 to 1 | | 3 | `#01dae9` | `oklch(80.94% 0.1379 203.87)` | Thousand Sons Blue | black, 12.1 to 1 | | 4 | `#03d8e8` | `oklch(80.56% 0.1370 203.83)` | Thousand Sons Blue | black, 12 to 1 | | 5 | `#04d7e6` | `oklch(80.06% 0.1362 204.11)` | Thousand Sons Blue | black, 11.8 to 1 | | 6 | `#01d4e5` | `oklch(79.40% 0.1355 204.95)` | Aztec Turquoise | black, 11.5 to 1 | | 7 | `#00d1e4` | `oklch(78.55% 0.1346 206.62)` | Aztec Turquoise | black, 11.2 to 1 | | 8 | `#00cce4` | `oklch(77.45% 0.1336 209.31)` | Picnic Day Sky | black, 10.7 to 1 | | 9 | `#00c7e3` | `oklch(76.11% 0.1331 212.86)` | Caribbean Blue | black, 10.2 to 1 | | 10 | `#00c0e3` | `oklch(74.60% 0.1333 217.08)` | Blue Raspberry | black, 9.6 to 1 | | 11 | `#0bb9e3` | `oklch(72.96% 0.1333 221.74)` | Maldives | black, 9 to 1 | | 12 | `#14b2e2` | `oklch(71.26% 0.1341 226.64)` | Blue Atoll | black, 8.5 to 1 | | 13 | `#1aabe2` | `oklch(69.56% 0.1364 231.57)` | Royal Peacock | black, 7.9 to 1 | | 14 | `#1da3e2` | `oklch(67.86% 0.1404 236.43)` | Vanadyl Blue | black, 7.4 to 1 | | 15 | `#219be3` | `oklch(65.99% 0.1461 241.60)` | Homeworld | black, 6.8 to 1 | | 16 | `#2792e3` | `oklch(64.02% 0.1529 247.00)` | Bleu de France | black, 6.2 to 1 | | 17 | `#2f88e3` | `oklch(62.08% 0.1608 252.49)` | Bleu de France | black, 5.7 to 1 | | 18 | `#387ee4` | `oklch(60.25% 0.1692 257.94)` | Skies of Cyberspace | black, 5.2 to 1 | | 19 | `#4175e4` | `oklch(58.67% 0.1780 263.22)` | Skies of Cyberspace | black, 4.9 to 1 | | 20 | `#4b6ce5` | `oklch(57.40% 0.1869 268.24)` | Royal Blue | black, 4.5 to 1 | | 21 | `#5463e6` | `oklch(56.35% 0.1969 273.25)` | Arcane Brew | white, 4.8 to 1 | | 22 | `#5e5ae8` | `oklch(55.47% 0.2076 278.24)` | Arcane Brew | white, 5.1 to 1 | | 23 | `#6751e9` | `oklch(54.78% 0.2187 283.07)` | Majorelle Blue | white, 5.3 to 1 | | 24 | `#7047ea` | `oklch(54.29% 0.2295 287.63)` | Bluish Purple | white, 5.5 to 1 | | 25 | `#793eea` | `oklch(54.01% 0.2396 291.81)` | Bluish Purple | white, 5.6 to 1 | | 26 | `#8136ea` | `oklch(53.95% 0.2483 295.48)` | Thick Purple | white, 5.7 to 1 | | 27 | `#892eeb` | `oklch(54.26% 0.2563 298.74)` | Bright Blue Violet | white, 5.7 to 1 | | 28 | `#9128ed` | `oklch(54.91% 0.2637 301.65)` | Bright Blue Violet | white, 5.6 to 1 | | 29 | `#9923ef` | `oklch(55.75% 0.2706 304.21)` | Singapore Orchid | white, 5.4 to 1 | | 30 | `#a11ef1` | `oklch(56.62% 0.2765 306.39)` | Singapore Orchid | white, 5.2 to 1 | | 31 | `#a719f3` | `oklch(57.38% 0.2815 308.18)` | Singapore Orchid | white, 5.1 to 1 | | 32 | `#ac14f4` | `oklch(57.87% 0.2852 309.58)` | Bright Violet | white, 5 to 1 | ## CSS ```css background: linear-gradient(90deg, #00dceb 0.0%, #00dbeb 3.2%, #01dae9 6.5%, #03d8e8 9.7%, #04d7e6 12.9%, #01d4e5 16.1%, #00d1e4 19.4%, #00cce4 22.6%, #00c7e3 25.8%, #00c0e3 29.0%, #0bb9e3 32.3%, #14b2e2 35.5%, #1aabe2 38.7%, #1da3e2 41.9%, #219be3 45.2%, #2792e3 48.4%, #2f88e3 51.6%, #387ee4 54.8%, #4175e4 58.1%, #4b6ce5 61.3%, #5463e6 64.5%, #5e5ae8 67.7%, #6751e9 71.0%, #7047ea 74.2%, #793eea 77.4%, #8136ea 80.6%, #892eeb 83.9%, #9128ed 87.1%, #9923ef 90.3%, #a11ef1 93.5%, #a719f3 96.8%, #ac14f4 100.0%); background: linear-gradient(90deg in oklch, oklch(81.50% 0.1389 203.91) 0.0%, oklch(81.24% 0.1385 203.99) 3.2%, oklch(80.94% 0.1379 203.87) 6.5%, oklch(80.56% 0.1370 203.83) 9.7%, oklch(80.06% 0.1362 204.11) 12.9%, oklch(79.40% 0.1355 204.95) 16.1%, oklch(78.55% 0.1346 206.62) 19.4%, oklch(77.45% 0.1336 209.31) 22.6%, oklch(76.11% 0.1331 212.86) 25.8%, oklch(74.60% 0.1333 217.08) 29.0%, oklch(72.96% 0.1333 221.74) 32.3%, oklch(71.26% 0.1341 226.64) 35.5%, oklch(69.56% 0.1364 231.57) 38.7%, oklch(67.86% 0.1404 236.43) 41.9%, oklch(65.99% 0.1461 241.60) 45.2%, oklch(64.02% 0.1529 247.00) 48.4%, oklch(62.08% 0.1608 252.49) 51.6%, oklch(60.25% 0.1692 257.94) 54.8%, oklch(58.67% 0.1780 263.22) 58.1%, oklch(57.40% 0.1869 268.24) 61.3%, oklch(56.35% 0.1969 273.25) 64.5%, oklch(55.47% 0.2076 278.24) 67.7%, oklch(54.78% 0.2187 283.07) 71.0%, oklch(54.29% 0.2295 287.63) 74.2%, oklch(54.01% 0.2396 291.81) 77.4%, oklch(53.95% 0.2483 295.48) 80.6%, oklch(54.26% 0.2563 298.74) 83.9%, oklch(54.91% 0.2637 301.65) 87.1%, oklch(55.75% 0.2706 304.21) 90.3%, oklch(56.62% 0.2765 306.39) 93.5%, oklch(57.38% 0.2815 308.18) 96.8%, 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=32) - [PNG](https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa.png?steps=32) - [SVG](https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa.svg?steps=32) - [CSS](https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa.css?steps=32) - [ASE](https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa.ase?steps=32) - [GPL](https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa.gpl?steps=32) - [GRD](https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa.grd?steps=32) - [Design tokens](https://grabient.com/kYz2WRY7FAVeyQxJwsPRNnDUnnwa.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kYz2WRY7FAVeyQxJwsPRNnDUnnwa&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kYz2WRY7FAVeyQxJwsPRNnDUnnwa) - [Guide for agents](https://grabient.com/llms.txt)