# Tritone navy, teal and green linear gradient

Tritone navy, teal and green linear gradient with 7 colors: #051224, #194360, #2896b4, #3ed8db, #78dfb8, #a0c38b, #aaad7c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSLh62Zq0490YNc`
- Page: https://grabient.com/kSLh62Zq0490YNc
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, pastel, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 11.7 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 | `#051224` | `oklch(18.11% 0.0413 255.94)` | Kuretake Black Manga | white, 18.7 to 1 |
| 2 | `#194360` | `oklch(36.93% 0.0680 241.57)` | Forest Blues | white, 10.3 to 1 |
| 3 | `#2896b4` | `oklch(62.72% 0.1038 220.63)` | Pelorus | black, 6.1 to 1 |
| 4 | `#3ed8db` | `oklch(80.71% 0.1240 196.76)` | Fish Boy | black, 12 to 1 |
| 5 | `#78dfb8` | `oklch(83.13% 0.1130 167.01)` | Beryl | black, 13 to 1 |
| 6 | `#a0c38b` | `oklch(77.76% 0.0864 134.33)` | Cos | black, 10.6 to 1 |
| 7 | `#aaad7c` | `oklch(73.23% 0.0661 111.16)` | Stuffed Olive | black, 8.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #051224 0.0%, #194360 16.7%, #2896b4 33.3%, #3ed8db 50.0%, #78dfb8 66.7%, #a0c38b 83.3%, #aaad7c 100.0%);
background: linear-gradient(90deg in oklch, oklch(18.11% 0.0413 255.94) 0.0%, oklch(36.93% 0.0680 241.57) 16.7%, oklch(62.72% 0.1038 220.63) 33.3%, oklch(80.71% 0.1240 196.76) 50.0%, oklch(83.13% 0.1130 167.01) 66.7%, oklch(77.76% 0.0864 134.33) 83.3%, oklch(73.23% 0.0661 111.16) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.041 | 255.9 |
| 2 | 0.807 | 0.124 | 196.8 |
| 3 | 0.732 | 0.066 | 111.2 |

## In these collections

- [Turquoise](https://grabient.com/turquoise)

## Other forms

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