# Navy and teal color palette

The Navy and teal color palette brings together dark blue, blue, teal, and green. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is green.

- Also called: Duotone navy to teal linear gradient
- Seed: `kWJE26nCfATAZvVFGznWCe9I`
- Page: https://grabient.com/kWJE26nCfATAZvVFGznWCe9I?steps=5&angle=135
- Drawn as: linear gradient, 5 steps, 135 degrees
- Kinds: dark to light, vivid, dark, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 7.6 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 | `#000527` | `oklch(14.22% 0.0721 263.06)` | Illicit Darkness | white, 19.9 to 1 |
| 2 | `#04114c` | `oklch(22.05% 0.1089 265.44)` | Kantor Blue | white, 17.6 to 1 |
| 3 | `#1b4664` | `oklch(37.80% 0.0703 243.24)` | Dark Slate Blue | white, 10 to 1 |
| 4 | `#317d7a` | `oklch(54.33% 0.0744 191.46)` | Zirconia Teal | white, 4.8 to 1 |
| 5 | `#4bb290` | `oklch(69.29% 0.1089 168.21)` | Green Blue | black, 8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #000527 0.0%, #04114c 25.0%, #1b4664 50.0%, #317d7a 75.0%, #4bb290 100.0%);
background: linear-gradient(135deg in oklch, oklch(14.22% 0.0721 263.06) 0.0%, oklch(22.05% 0.1089 265.44) 25.0%, oklch(37.80% 0.0703 243.24) 50.0%, oklch(54.33% 0.0744 191.46) 75.0%, oklch(69.29% 0.1089 168.21) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.142 | 0.106 | 262.3 |
| 2 | 0.22 | 0.109 | 265.4 |
| 3 | 0.378 | 0.07 | 243.2 |
| 4 | 0.543 | 0.074 | 191.5 |
| 5 | 0.693 | 0.109 | 168.2 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)
- [Navy and teal gradients](https://grabient.com/navy-and-teal-gradients)

## Other forms

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