# Vivid analogous cyan to green linear gradient

Vivid analogous cyan to green linear gradient with 7 colors: #0bf8f2, #01f5de, #0fe4c2, #00caa3, #00bd81, #00c364, #00d544. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW4W6IbLi-d80vzZPT4YNU-o`
- Page: https://grabient.com/kW4W6IbLi-d80vzZPT4YNU-o
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.8 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 | `#0bf8f2` | `oklch(88.58% 0.1516 191.25)` | Bright Aqua | black, 15.7 to 1 |
| 2 | `#01f5de` | `oklch(87.15% 0.1553 182.80)` | Bright Aqua | black, 15.1 to 1 |
| 3 | `#0fe4c2` | `oklch(82.23% 0.1519 176.34)` | Celestial Green | black, 12.9 to 1 |
| 4 | `#00caa3` | `oklch(74.80% 0.1447 172.23)` | Jadeite | black, 9.9 to 1 |
| 5 | `#00bd81` | `oklch(70.65% 0.1558 161.62)` | Slime Girl | black, 8.6 to 1 |
| 6 | `#00c364` | `oklch(71.48% 0.1878 152.07)` | Algal Fuel | black, 8.9 to 1 |
| 7 | `#00d544` | `oklch(75.99% 0.2335 145.81)` | Malachite | black, 10.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0bf8f2 0.0%, #01f5de 16.7%, #0fe4c2 33.3%, #00caa3 50.0%, #00bd81 66.7%, #00c364 83.3%, #00d544 100.0%);
background: linear-gradient(90deg in oklch, oklch(88.58% 0.1516 191.25) 0.0%, oklch(87.15% 0.1553 182.80) 16.7%, oklch(82.23% 0.1519 176.34) 33.3%, oklch(74.80% 0.1447 172.23) 50.0%, oklch(70.65% 0.1558 161.62) 66.7%, oklch(71.48% 0.1878 152.07) 83.3%, oklch(75.99% 0.2335 145.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.886 | 0.152 | 191.3 |
| 2 | 0.854 | 0.156 | 178.6 |
| 3 | 0.748 | 0.145 | 172.2 |
| 4 | 0.701 | 0.168 | 156.4 |
| 5 | 0.76 | 0.234 | 145.8 |

## Other forms

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