# Tritone navy, teal and tan linear swatches

Tritone navy, teal and tan linear swatches with 6 colors: #022e46, #004b52, #2a695e, #608767, #9ba374, #c5ba7a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWSS2psxe7EMYvHVFrqY569Q`
- Page: https://grabient.com/kWSS2psxe7EMYvHVFrqY569Q?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: dark to light, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 7.1 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 | `#022e46` | `oklch(28.74% 0.0620 238.36)` | Cosmos Blue | white, 14.1 to 1 |
| 2 | `#004b52` | `oklch(37.62% 0.0642 205.30)` | Midnight Green | white, 9.8 to 1 |
| 3 | `#2a695e` | `oklch(47.55% 0.0670 179.98)` | Galapagos Green | white, 6.4 to 1 |
| 4 | `#608767` | `oklch(58.44% 0.0646 149.41)` | Clouded Pine | black, 5.1 to 1 |
| 5 | `#9ba374` | `oklch(69.57% 0.0650 115.84)` | Cucuzza Verde | black, 7.8 to 1 |
| 6 | `#c5ba7a` | `oklch(78.35% 0.0841 99.92)` | Olive Marinade | black, 10.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #022e46 0.000% 16.667%, #004b52 16.667% 33.333%, #2a695e 33.333% 50.000%, #608767 50.000% 66.667%, #9ba374 66.667% 83.333%, #c5ba7a 83.333% 100.000%);
background: linear-gradient(90deg, oklch(28.74% 0.0620 238.36) 0.000% 16.667%, oklch(37.62% 0.0642 205.30) 16.667% 33.333%, oklch(47.55% 0.0670 179.98) 33.333% 50.000%, oklch(58.44% 0.0646 149.41) 50.000% 66.667%, oklch(69.57% 0.0650 115.84) 66.667% 83.333%, oklch(78.35% 0.0841 99.92) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.287 | 0.062 | 238.4 |
| 2 | 0.402 | 0.065 | 197.1 |
| 3 | 0.528 | 0.068 | 167.6 |
| 4 | 0.669 | 0.062 | 122.1 |
| 5 | 0.783 | 0.084 | 99.9 |

## Other forms

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