# Tritone blue, teal and brown linear gradient

Tritone blue, teal and brown linear gradient with 7 colors: #325a82, #437694, #5a949a, #81a78f, #a2ab76, #be9c56, #c9873e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWdDqxyxi81gTuDbnzj1iu8A`
- Page: https://grabient.com/kWdDqxyxi81gTuDbnzj1iu8A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.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 | `#325a82` | `oklch(45.67% 0.0799 249.61)` | Dark Blue | white, 7.1 to 1 |
| 2 | `#437694` | `oklch(54.33% 0.0722 235.87)` | Harbour Blue | white, 4.9 to 1 |
| 3 | `#5a949a` | `oklch(62.98% 0.0613 204.01)` | Clear Brook | black, 6.1 to 1 |
| 4 | `#81a78f` | `oklch(69.29% 0.0537 157.67)` | Catnip | black, 7.8 to 1 |
| 5 | `#a2ab76` | `oklch(71.93% 0.0730 116.03)` | Siamese Green | black, 8.5 to 1 |
| 6 | `#be9c56` | `oklch(70.97% 0.0980 84.40)` | Fallow | black, 8.1 to 1 |
| 7 | `#c9873e` | `oklch(67.72% 0.1199 65.73)` | Gold Coast | black, 7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #325a82 0.0%, #437694 16.7%, #5a949a 33.3%, #81a78f 50.0%, #a2ab76 66.7%, #be9c56 83.3%, #c9873e 100.0%);
background: linear-gradient(90deg in oklch, oklch(45.67% 0.0799 249.61) 0.0%, oklch(54.33% 0.0722 235.87) 16.7%, oklch(62.98% 0.0613 204.01) 33.3%, oklch(69.29% 0.0537 157.67) 50.0%, oklch(71.93% 0.0730 116.03) 66.7%, oklch(70.97% 0.0980 84.40) 83.3%, oklch(67.72% 0.1199 65.73) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.457 | 0.08 | 249.6 |
| 2 | 0.591 | 0.068 | 223.2 |
| 3 | 0.693 | 0.054 | 157.7 |
| 4 | 0.72 | 0.085 | 98.5 |
| 5 | 0.677 | 0.12 | 65.7 |

## In these collections

- [Library card nostalgia](https://grabient.com/library-card-nostalgia)

## Other forms

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