# Vivid monochrome cyan and teal linear swatches

Vivid monochrome cyan and teal linear swatches with 5 colors: #38e4ff, #43fdff, #50feeb, #56ffd0, #49ffbb. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW12OWczO-PMzvpyuT5ccC_A`
- Page: https://grabient.com/kW12OWczO-PMzvpyuT5ccC_A?style=linearSwatches&steps=5&angle=315
- Drawn as: linear swatches, 5 steps, 315 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 | `#43fdff` | `oklch(90.55% 0.1419 196.14)` | Bright Cyan | black, 16.6 to 1 |
| 3 | `#50feeb` | `oklch(90.55% 0.1419 184.52)` | Icy Life | black, 16.7 to 1 |
| 4 | `#56ffd0` | `oklch(90.15% 0.1534 170.78)` | Rare Wind | black, 16.6 to 1 |
| 5 | `#49ffbb` | `oklch(89.37% 0.1730 163.39)` | Greenish Cyan | black, 16.3 to 1 |

## CSS

```css
background: linear-gradient(315deg, #38e4ff 0.000% 20.000%, #43fdff 20.000% 40.000%, #50feeb 40.000% 60.000%, #56ffd0 60.000% 80.000%, #49ffbb 80.000% 100.000%);
background: linear-gradient(315deg, oklch(84.65% 0.1364 210.94) 0.000% 20.000%, oklch(90.55% 0.1419 196.14) 20.000% 40.000%, oklch(90.55% 0.1419 184.52) 40.000% 60.000%, oklch(90.15% 0.1534 170.78) 60.000% 80.000%, oklch(89.37% 0.1730 163.39) 80.000% 100.000%);
```

## 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)
- [Teal gradients](https://grabient.com/teal-gradients)
- [Beach gradients](https://grabient.com/beach-gradients)
- [Coastal gradients](https://grabient.com/coastal-gradients)

## Other forms

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