# Navy, deep teal and mint color palette

The Navy, deep teal and mint color palette brings together dark blue, blue, teal, green, and pale green. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is pale green.

- Also called: Tritone navy, teal and light green linear swatches
- Seed: `kWKyy1qy89kjBupgxTw86S-4`
- Page: https://grabient.com/kWKyy1qy89kjBupgxTw86S-4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 15.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 | `#000e27` | `oklch(16.96% 0.0575 255.81)` | Void | white, 19.1 to 1 |
| 2 | `#003d57` | `oklch(33.87% 0.0721 235.24)` | Maniac Mansion | white, 11.6 to 1 |
| 3 | `#008a84` | `oklch(57.09% 0.0987 189.71)` | Navigate | black, 4.9 to 1 |
| 4 | `#00d284` | `oklch(75.99% 0.1777 158.01)` | Seaweed | black, 10.5 to 1 |
| 5 | `#b1f4bd` | `oklch(90.94% 0.1006 149.56)` | Spring Slumber Green | black, 16.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #000e27 0.000% 20.000%, #003d57 20.000% 40.000%, #008a84 40.000% 60.000%, #00d284 60.000% 80.000%, #b1f4bd 80.000% 100.000%);
background: linear-gradient(90deg, oklch(16.96% 0.0575 255.81) 0.000% 20.000%, oklch(33.87% 0.0721 235.24) 20.000% 40.000%, oklch(57.09% 0.0987 189.71) 40.000% 60.000%, oklch(75.99% 0.1777 158.01) 60.000% 80.000%, oklch(90.94% 0.1006 149.56) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.169 | 0.061 | 255.2 |
| 2 | 0.339 | 0.13 | 235.2 |
| 3 | 0.571 | 0.181 | 189.7 |
| 4 | 0.76 | 0.19 | 158 |
| 5 | 0.909 | 0.101 | 149.6 |

## In these collections

- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)
- [Aurora swatches](https://grabient.com/aurora-swatches)

## Other forms

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