# Navy, teal and magenta vivid multicolor palette

The Navy, teal and magenta vivid multicolor palette brings together dark blue, teal, blue, purple, and magenta. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is magenta.

- Also called: Tritone navy, teal and purple linear swatches
- Seed: `kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA`
- Page: https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 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 | `#0a2743` | `oklch(26.84% 0.0615 250.16)` | Dark Eclipse | white, 15.1 to 1 |
| 3 | `#063041` | `oklch(28.98% 0.0542 231.99)` | Nordic Noir | white, 13.9 to 1 |
| 4 | `#074244` | `oklch(34.42% 0.0551 199.20)` | Warm Black | white, 11.2 to 1 |
| 5 | `#13554b` | `oklch(40.70% 0.0661 180.08)` | Castleton Green | white, 8.6 to 1 |
| 6 | `#156a58` | `oklch(47.26% 0.0830 174.03)` | Forest Rain | white, 6.4 to 1 |
| 7 | `#2c7961` | `oklch(52.04% 0.0845 169.08)` | Pinehurst | white, 5.2 to 1 |
| 8 | `#398072` | `oklch(54.98% 0.0748 179.23)` | Copper Mineral Green | white, 4.6 to 1 |
| 9 | `#547986` | `oklch(55.34% 0.0459 221.92)` | Ocean Current | white, 4.7 to 1 |
| 10 | `#637191` | `oklch(54.83% 0.0526 267.19)` | Ocean Night | white, 4.9 to 1 |
| 11 | `#805c9d` | `oklch(53.90% 0.1047 308.76)` | Sonic Plum | white, 5.3 to 1 |
| 12 | `#a3489f` | `oklch(55.10% 0.1615 329.22)` | Aged Purple | white, 5.2 to 1 |
| 13 | `#bd34a7` | `oklch(57.09% 0.2108 335.19)` | Byzantine | white, 4.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0d2548 0.000% 7.692%, #0a2743 7.692% 15.385%, #063041 15.385% 23.077%, #074244 23.077% 30.769%, #13554b 30.769% 38.462%, #156a58 38.462% 46.154%, #2c7961 46.154% 53.846%, #398072 53.846% 61.538%, #547986 61.538% 69.231%, #637191 69.231% 76.923%, #805c9d 76.923% 84.615%, #a3489f 84.615% 92.308%, #bd34a7 92.308% 100.000%);
background: linear-gradient(90deg, oklch(26.77% 0.0717 258.05) 0.000% 7.692%, oklch(26.84% 0.0615 250.16) 7.692% 15.385%, oklch(28.98% 0.0542 231.99) 15.385% 23.077%, oklch(34.42% 0.0551 199.20) 23.077% 30.769%, oklch(40.70% 0.0661 180.08) 30.769% 38.462%, oklch(47.26% 0.0830 174.03) 38.462% 46.154%, oklch(52.04% 0.0845 169.08) 46.154% 53.846%, oklch(54.98% 0.0748 179.23) 53.846% 61.538%, oklch(55.34% 0.0459 221.92) 61.538% 69.231%, oklch(54.83% 0.0526 267.19) 69.231% 76.923%, oklch(53.90% 0.1047 308.76) 76.923% 84.615%, oklch(55.10% 0.1615 329.22) 84.615% 92.308%, oklch(57.09% 0.2108 335.19) 92.308% 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=13)
- [PNG](https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA.png?style=linearSwatches&steps=13)
- [SVG](https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA.svg?style=linearSwatches&steps=13)
- [CSS](https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA.css?style=linearSwatches&steps=13)
- [ASE](https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA.ase?style=linearSwatches&steps=13)
- [GPL](https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA.gpl?style=linearSwatches&steps=13)
- [GRD](https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA.grd?style=linearSwatches&steps=13)
- [Design tokens](https://grabient.com/kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA.tokens.json?style=linearSwatches&steps=13)
- [Social card](https://grabient.com/api/og?seed=kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA&style=linearSwatches&steps=13)
- [Palettes like this one](https://grabient.com/palettes?q=kcRDS3o5Q9q8VOe9Hr4xZxAMYPSJEq8gSMzCA)
- [Guide for agents](https://grabient.com/llms.txt)