# Tritone blue, teal and lavender linear gradient

Tritone blue, teal and lavender linear gradient with 7 colors: #215ae6, #00637b, #175d5f, #727b95, #b79db2, #8894c1, #0d8e8f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUhaC7t5g4NwPz9Ko6_A`
- Page: https://grabient.com/kUhaC7t5g4NwPz9Ko6_A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: cool
- Hues: wide
- Contrast of its darkest and lightest colors: 3 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 | `#215ae6` | `oklch(52.36% 0.2205 263.67)` | Veteran’s Day Blue | white, 5.7 to 1 |
| 2 | `#00637b` | `oklch(46.24% 0.0858 222.55)` | Jamaican Dream | white, 6.8 to 1 |
| 3 | `#175d5f` | `oklch(43.70% 0.0661 198.15)` | Emerald Pool | white, 7.6 to 1 |
| 4 | `#727b95` | `oklch(58.39% 0.0413 269.68)` | Smokey Denim | black, 4.9 to 1 |
| 5 | `#b79db2` | `oklch(72.44% 0.0427 332.36)` | Pastel Purple | black, 8.4 to 1 |
| 6 | `#8894c1` | `oklch(67.35% 0.0688 272.59)` | Corfu Sky | black, 7 to 1 |
| 7 | `#0d8e8f` | `oklch(58.66% 0.0978 196.04)` | Forever Teal | black, 5.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #215ae6 0.0%, #00637b 16.7%, #175d5f 33.3%, #727b95 50.0%, #b79db2 66.7%, #8894c1 83.3%, #0d8e8f 100.0%);
background: linear-gradient(90deg in oklch, oklch(52.36% 0.2205 263.67) 0.0%, oklch(46.24% 0.0858 222.55) 16.7%, oklch(43.70% 0.0661 198.15) 33.3%, oklch(58.39% 0.0413 269.68) 50.0%, oklch(72.44% 0.0427 332.36) 66.7%, oklch(67.35% 0.0688 272.59) 83.3%, oklch(58.66% 0.0978 196.04) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.524 | 0.22 | 263.7 |
| 2 | 0.437 | 0.066 | 198.2 |
| 3 | 0.724 | 0.043 | 332.4 |
| 4 | 0.587 | 0.098 | 196 |

## Other forms

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