# Tritone navy, teal and purple linear swatches

Tritone navy, teal and purple linear swatches with 8 colors: #0d2548, #082c41, #0f4946, #186d5a, #38806f, #5f7489, #8a569c, #bd34a7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA`
- Page: https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA?style=linearSwatches&steps=8
- Drawn as: linear swatches, 8 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.2 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 | `#0d2548` | `oklch(26.77% 0.0717 258.05)` | Dark Eclipse | white, 15.2 to 1 |
| 2 | `#082c41` | `oklch(27.95% 0.0551 239.03)` | NATO Blue | white, 14.5 to 1 |
| 3 | `#0f4946` | `oklch(37.01% 0.0579 188.30)` | Deep Into the Jungle | white, 10.1 to 1 |
| 4 | `#186d5a` | `oklch(48.03% 0.0841 173.51)` | Teal Dark Green | white, 6.2 to 1 |
| 5 | `#38806f` | `oklch(54.72% 0.0772 175.62)` | Copper Mineral Green | white, 4.7 to 1 |
| 6 | `#5f7489` | `oklch(55.12% 0.0413 248.54)` | Lost Atlantis | white, 4.8 to 1 |
| 7 | `#8a569c` | `oklch(53.94% 0.1199 317.22)` | Highlighter Lavender | white, 5.3 to 1 |
| 8 | `#bd34a7` | `oklch(57.09% 0.2108 335.19)` | Byzantine | white, 4.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0d2548 0.000% 12.500%, #082c41 12.500% 25.000%, #0f4946 25.000% 37.500%, #186d5a 37.500% 50.000%, #38806f 50.000% 62.500%, #5f7489 62.500% 75.000%, #8a569c 75.000% 87.500%, #bd34a7 87.500% 100.000%);
background: linear-gradient(90deg, oklch(26.77% 0.0717 258.05) 0.000% 12.500%, oklch(27.95% 0.0551 239.03) 12.500% 25.000%, oklch(37.01% 0.0579 188.30) 25.000% 37.500%, oklch(48.03% 0.0841 173.51) 37.500% 50.000%, oklch(54.72% 0.0772 175.62) 50.000% 62.500%, oklch(55.12% 0.0413 248.54) 62.500% 75.000%, oklch(53.94% 0.1199 317.22) 75.000% 87.500%, oklch(57.09% 0.2108 335.19) 87.500% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.268 | 0.072 | 258 |
| 2 | 0.28 | 0.055 | 239 |
| 3 | 0.37 | 0.058 | 188.3 |
| 4 | 0.48 | 0.084 | 173.5 |
| 5 | 0.547 | 0.077 | 175.6 |
| 6 | 0.551 | 0.041 | 248.5 |
| 7 | 0.539 | 0.12 | 317.2 |
| 8 | 0.571 | 0.211 | 335.2 |

## In these collections

- [Oil slick colors](https://grabient.com/oil-slick-colors)
- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)

## Other forms

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