# Vivid monochrome cyan to teal linear gradient Vivid monochrome cyan to teal linear gradient with 32 colors: #38e4ff, #39e6ff, #3ee9ff, #43ecff, #48f0ff, #4cf4ff, #4cf7ff, #48fbff, #43fdfe, #45fefd, #48fffa, #4afff8, #4cfff5, #4dfef2, #4ffef0, #4ffeed, #50feea, #50fee7, #50ffe3, #50ffe0, #52ffdc, #54ffd8, #55ffd5, #56ffd1, #56ffce, #55ffcb, #53ffc8, #51ffc5, #4fffc2, #4dffc0, #4bffbd, #49ffbb. Edit it and copy or download CSS, SVG, PNG or shader code. - Seed: `kW12OWczO-PMzvpyuT5ccC_A` - Page: https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: even lightness, vivid, light, cool - Hues: analogous - Contrast of its darkest and lightest colors: 1.2 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 | `#38e4ff` | `oklch(84.65% 0.1364 210.94)` | Shimmering Expanse Cyan | black, 13.7 to 1 | | 2 | `#39e6ff` | `oklch(85.16% 0.1366 209.72)` | Shimmering Expanse Cyan | black, 13.9 to 1 | | 3 | `#3ee9ff` | `oklch(85.90% 0.1358 208.09)` | Shimmering Expanse Cyan | black, 14.2 to 1 | | 4 | `#43ecff` | `oklch(86.77% 0.1349 206.13)` | Shimmering Expanse Cyan | black, 14.7 to 1 | | 5 | `#48f0ff` | `oklch(87.72% 0.1342 203.98)` | Bioluminescence | black, 15.1 to 1 | | 6 | `#4cf4ff` | `oklch(88.65% 0.1343 201.75)` | Frozen Turquoise | black, 15.6 to 1 | | 7 | `#4cf7ff` | `oklch(89.50% 0.1357 199.55)` | Frozen Turquoise | black, 16 to 1 | | 8 | `#48fbff` | `oklch(90.19% 0.1390 197.51)` | Bright Cyan | black, 16.4 to 1 | | 9 | `#43fdfe` | `oklch(90.64% 0.1420 195.72)` | Bright Cyan | black, 16.7 to 1 | | 10 | `#45fefd` | `oklch(90.89% 0.1421 194.11)` | Bright Cyan | black, 16.8 to 1 | | 11 | `#48fffa` | `oklch(90.99% 0.1419 192.60)` | Beaming Blue | black, 16.9 to 1 | | 12 | `#4afff8` | `oklch(90.99% 0.1415 191.15)` | Beaming Blue | black, 16.9 to 1 | | 13 | `#4cfff5` | `oklch(90.91% 0.1412 189.73)` | Icy Life | black, 16.8 to 1 | | 14 | `#4dfef2` | `oklch(90.79% 0.1410 188.31)` | Icy Life | black, 16.8 to 1 | | 15 | `#4ffef0` | `oklch(90.67% 0.1411 186.85)` | Icy Life | black, 16.7 to 1 | | 16 | `#4ffeed` | `oklch(90.57% 0.1415 185.32)` | Icy Life | black, 16.7 to 1 | | 17 | `#50feea` | `oklch(90.54% 0.1425 183.68)` | Icy Life | black, 16.7 to 1 | | 18 | `#50fee7` | `oklch(90.51% 0.1438 181.90)` | Icy Life | black, 16.7 to 1 | | 19 | `#50ffe3` | `oklch(90.47% 0.1455 180.02)` | Lamiaceae | black, 16.7 to 1 | | 20 | `#50ffe0` | `oklch(90.42% 0.1474 178.11)` | Lamiaceae | black, 16.7 to 1 | | 21 | `#52ffdc` | `oklch(90.37% 0.1484 176.21)` | Aurichalcite | black, 16.6 to 1 | | 22 | `#54ffd8` | `oklch(90.31% 0.1496 174.37)` | Aurichalcite | black, 16.6 to 1 | | 23 | `#55ffd5` | `oklch(90.24% 0.1512 172.66)` | Move Mint | black, 16.6 to 1 | | 24 | `#56ffd1` | `oklch(90.17% 0.1529 171.13)` | Rare Wind | black, 16.6 to 1 | | 25 | `#56ffce` | `oklch(90.09% 0.1550 169.79)` | Rare Wind | black, 16.5 to 1 | | 26 | `#55ffcb` | `oklch(89.99% 0.1575 168.54)` | Rare Wind | black, 16.5 to 1 | | 27 | `#53ffc8` | `oklch(89.87% 0.1603 167.39)` | Rare Wind | black, 16.5 to 1 | | 28 | `#51ffc5` | `oklch(89.75% 0.1633 166.35)` | Rare Wind | black, 16.4 to 1 | | 29 | `#4fffc2` | `oklch(89.63% 0.1662 165.42)` | Rare Wind | black, 16.4 to 1 | | 30 | `#4dffc0` | `oklch(89.52% 0.1689 164.61)` | Rare Wind | black, 16.3 to 1 | | 31 | `#4bffbd` | `oklch(89.43% 0.1712 163.93)` | Greenish Cyan | black, 16.3 to 1 | | 32 | `#49ffbb` | `oklch(89.37% 0.1730 163.39)` | Greenish Cyan | black, 16.3 to 1 | ## CSS ```css background: linear-gradient(90deg, #38e4ff 0.0%, #39e6ff 3.2%, #3ee9ff 6.5%, #43ecff 9.7%, #48f0ff 12.9%, #4cf4ff 16.1%, #4cf7ff 19.4%, #48fbff 22.6%, #43fdfe 25.8%, #45fefd 29.0%, #48fffa 32.3%, #4afff8 35.5%, #4cfff5 38.7%, #4dfef2 41.9%, #4ffef0 45.2%, #4ffeed 48.4%, #50feea 51.6%, #50fee7 54.8%, #50ffe3 58.1%, #50ffe0 61.3%, #52ffdc 64.5%, #54ffd8 67.7%, #55ffd5 71.0%, #56ffd1 74.2%, #56ffce 77.4%, #55ffcb 80.6%, #53ffc8 83.9%, #51ffc5 87.1%, #4fffc2 90.3%, #4dffc0 93.5%, #4bffbd 96.8%, #49ffbb 100.0%); background: linear-gradient(90deg in oklch, oklch(84.65% 0.1364 210.94) 0.0%, oklch(85.16% 0.1366 209.72) 3.2%, oklch(85.90% 0.1358 208.09) 6.5%, oklch(86.77% 0.1349 206.13) 9.7%, oklch(87.72% 0.1342 203.98) 12.9%, oklch(88.65% 0.1343 201.75) 16.1%, oklch(89.50% 0.1357 199.55) 19.4%, oklch(90.19% 0.1390 197.51) 22.6%, oklch(90.64% 0.1420 195.72) 25.8%, oklch(90.89% 0.1421 194.11) 29.0%, oklch(90.99% 0.1419 192.60) 32.3%, oklch(90.99% 0.1415 191.15) 35.5%, oklch(90.91% 0.1412 189.73) 38.7%, oklch(90.79% 0.1410 188.31) 41.9%, oklch(90.67% 0.1411 186.85) 45.2%, oklch(90.57% 0.1415 185.32) 48.4%, oklch(90.54% 0.1425 183.68) 51.6%, oklch(90.51% 0.1438 181.90) 54.8%, oklch(90.47% 0.1455 180.02) 58.1%, oklch(90.42% 0.1474 178.11) 61.3%, oklch(90.37% 0.1484 176.21) 64.5%, oklch(90.31% 0.1496 174.37) 67.7%, oklch(90.24% 0.1512 172.66) 71.0%, oklch(90.17% 0.1529 171.13) 74.2%, oklch(90.09% 0.1550 169.79) 77.4%, oklch(89.99% 0.1575 168.54) 80.6%, oklch(89.87% 0.1603 167.39) 83.9%, oklch(89.75% 0.1633 166.35) 87.1%, oklch(89.63% 0.1662 165.42) 90.3%, oklch(89.52% 0.1689 164.61) 93.5%, oklch(89.43% 0.1712 163.93) 96.8%, oklch(89.37% 0.1730 163.39) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.846 | 0.136 | 210.9 | | 2 | 0.906 | 0.142 | 196.1 | | 3 | 0.906 | 0.142 | 184.5 | | 4 | 0.902 | 0.157 | 170.8 | | 5 | 0.894 | 0.178 | 163.4 | ## In these collections - [Ocean gradients](https://grabient.com/ocean-gradients) - [Coastal gradients](https://grabient.com/coastal-gradients) - [Beach gradients](https://grabient.com/beach-gradients) - [Teal gradients](https://grabient.com/teal-gradients) ## Other forms - [JSON](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.json?steps=32) - [PNG](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.png?steps=32) - [SVG](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.svg?steps=32) - [CSS](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.css?steps=32) - [ASE](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.ase?steps=32) - [GPL](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.gpl?steps=32) - [GRD](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.grd?steps=32) - [Design tokens](https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kW12OWczO-PMzvpyuT5ccC_A&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kW12OWczO-PMzvpyuT5ccC_A) - [Guide for agents](https://grabient.com/llms.txt)