# Navy, green and teal linear gradient

Navy, green and teal linear gradient with 7 colors: #0e3b4b, #004d2e, #146919, #178f37, #30b96b, #4ee5a6, #92ffcf. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYVCihsKW2r-3P5Ru0B5jlBPU6QE`
- Page: https://grabient.com/kYVCihsKW2r-3P5Ru0B5jlBPU6QE
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, vivid
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 9.9 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 | `#0e3b4b` | `oklch(33.07% 0.0551 227.11)` | Subterranean River | white, 12 to 1 |
| 2 | `#004d2e` | `oklch(36.90% 0.0856 158.46)` | Troll Green | white, 10 to 1 |
| 3 | `#146919` | `oklch(45.64% 0.1383 143.47)` | Avagddu Green | white, 6.8 to 1 |
| 4 | `#178f37` | `oklch(56.82% 0.1604 146.99)` | Viper Green | black, 4.9 to 1 |
| 5 | `#30b96b` | `oklch(69.57% 0.1617 153.29)` | Turtle Warrior | black, 8.2 to 1 |
| 6 | `#4ee5a6` | `oklch(82.67% 0.1571 161.53)` | Mega Teal | black, 13 to 1 |
| 7 | `#92ffcf` | `oklch(92.12% 0.1225 163.71)` | A State of Mint | black, 17.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0e3b4b 0.0%, #004d2e 16.7%, #146919 33.3%, #178f37 50.0%, #30b96b 66.7%, #4ee5a6 83.3%, #92ffcf 100.0%);
background: linear-gradient(90deg in oklch, oklch(33.07% 0.0551 227.11) 0.0%, oklch(36.90% 0.0856 158.46) 16.7%, oklch(45.64% 0.1383 143.47) 33.3%, oklch(56.82% 0.1604 146.99) 50.0%, oklch(69.57% 0.1617 153.29) 66.7%, oklch(82.67% 0.1571 161.53) 83.3%, oklch(92.12% 0.1225 163.71) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.331 | 0.055 | 227.1 |
| 2 | 0.382 | 0.103 | 148.9 |
| 3 | 0.5 | 0.152 | 145.7 |
| 4 | 0.642 | 0.163 | 150 |
| 5 | 0.803 | 0.157 | 160.5 |
| 6 | 0.921 | 0.16 | 163.7 |

## Other forms

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