# Gray, light blue, teal and green linear gradient

Gray, light blue, teal and green linear gradient with 7 colors: #386964, #b9d7c6, #6ea591, #006f46, #44895c, #a3c0b7, #037c59. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYeyeFcA88cedwc8LrzZYtDEInvu`
- Page: https://grabient.com/kYeyeFcA88cedwc8LrzZYtDEInvu
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#386964` | `oklch(48.43% 0.0537 187.03)` | Seiheki Green | white, 6.2 to 1 |
| 2 | `#b9d7c6` | `oklch(85.25% 0.0405 160.09)` | Cool Spring | black, 13.6 to 1 |
| 3 | `#6ea591` | `oklch(67.89% 0.0655 169.46)` | Harmony in Green | black, 7.4 to 1 |
| 4 | `#006f46` | `oklch(47.74% 0.1091 159.40)` | So-Sari | white, 6.2 to 1 |
| 5 | `#44895c` | `oklch(57.29% 0.0997 153.06)` | Onion Seedling | black, 4.9 to 1 |
| 6 | `#a3c0b7` | `oklch(78.45% 0.0341 173.80)` | Prized Celadon | black, 10.8 to 1 |
| 7 | `#037c59` | `oklch(51.97% 0.1089 164.84)` | Sharp Green | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #386964 0.0%, #b9d7c6 16.7%, #6ea591 33.3%, #006f46 50.0%, #44895c 66.7%, #a3c0b7 83.3%, #037c59 100.0%);
background: linear-gradient(90deg in oklch, oklch(48.43% 0.0537 187.03) 0.0%, oklch(85.25% 0.0405 160.09) 16.7%, oklch(67.89% 0.0655 169.46) 33.3%, oklch(47.74% 0.1091 159.40) 50.0%, oklch(57.29% 0.0997 153.06) 66.7%, oklch(78.45% 0.0341 173.80) 83.3%, oklch(51.97% 0.1089 164.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.484 | 0.054 | 187 |
| 2 | 0.882 | 0.041 | 157.4 |
| 3 | 0.563 | 0.081 | 173.3 |
| 4 | 0.472 | 0.128 | 146.9 |
| 5 | 0.799 | 0.03 | 173.3 |
| 6 | 0.52 | 0.109 | 164.8 |

## In these collections

- [Green swatches](https://grabient.com/green-swatches)

## Other forms

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