# Vivid analogous teal to green linear gradient

Vivid analogous teal to green linear gradient with 7 colors: #008c87, #008f83, #00917c, #009372, #009365, #009152, #009040. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSk3uHS0U9kjBvY`
- Page: https://grabient.com/kSk3uHS0U9kjBvY
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: even lightness, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1 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 | `#008c87` | `oklch(57.88% 0.1000 189.84)` | Greenish Blue | black, 5.1 to 1 |
| 2 | `#008f83` | `oklch(58.30% 0.1029 184.63)` | Philips Green | black, 5.2 to 1 |
| 3 | `#00917c` | `oklch(58.85% 0.1090 177.20)` | Aqua Waters | black, 5.3 to 1 |
| 4 | `#009372` | `oklch(59.06% 0.1172 169.76)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 5 | `#009365` | `oklch(58.56% 0.1278 162.32)` | Emerald Lake | black, 5.3 to 1 |
| 6 | `#009152` | `oklch(57.72% 0.1430 154.88)` | Moss | black, 5.1 to 1 |
| 7 | `#009040` | `oklch(57.09% 0.1585 149.68)` | Viper Green | black, 5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #008c87 0.0%, #008f83 16.7%, #00917c 33.3%, #009372 50.0%, #009365 66.7%, #009152 83.3%, #009040 100.0%);
background: linear-gradient(90deg in oklch, oklch(57.88% 0.1000 189.84) 0.0%, oklch(58.30% 0.1029 184.63) 16.7%, oklch(58.85% 0.1090 177.20) 33.3%, oklch(59.06% 0.1172 169.76) 50.0%, oklch(58.56% 0.1278 162.32) 66.7%, oklch(57.72% 0.1430 154.88) 83.3%, oklch(57.09% 0.1585 149.68) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.579 | 0.169 | 189.8 |
| 2 | 0.591 | 0.19 | 169.8 |
| 3 | 0.571 | 0.181 | 149.7 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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