# Navy and teal analogous palette

The Navy and teal analogous palette brings together dark blue, blue, and teal. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and campaign graphics. Its darkest tone is dark blue, and its lightest tone is teal.

- Also called: Analogous navy and teal linear swatches
- Seed: `kWRy2urxq-zydPVKIr11aU9w`
- Page: https://grabient.com/kWRy2urxq-zydPVKIr11aU9w?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.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 | `#082b45` | `oklch(27.95% 0.0620 245.39)` | Midnight Ocean | white, 14.5 to 1 |
| 2 | `#0c4561` | `oklch(37.01% 0.0730 235.88)` | Forest Blues | white, 10.2 to 1 |
| 3 | `#0e6878` | `oklch(47.64% 0.0799 213.69)` | Teal With It | white, 6.4 to 1 |
| 4 | `#188d8a` | `oklch(58.27% 0.0951 192.55)` | Corfu Shallows | black, 5.1 to 1 |
| 5 | `#44ab92` | `oklch(67.32% 0.1020 174.59)` | Hole in One | black, 7.4 to 1 |

## CSS

```css
background: linear-gradient(135deg, #082b45 0.000% 20.000%, #0c4561 20.000% 40.000%, #0e6878 40.000% 60.000%, #188d8a 60.000% 80.000%, #44ab92 80.000% 100.000%);
background: linear-gradient(135deg, oklch(27.95% 0.0620 245.39) 0.000% 20.000%, oklch(37.01% 0.0730 235.88) 20.000% 40.000%, oklch(47.64% 0.0799 213.69) 40.000% 60.000%, oklch(58.27% 0.0951 192.55) 60.000% 80.000%, oklch(67.32% 0.1020 174.59) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.062 | 245.4 |
| 2 | 0.37 | 0.073 | 235.9 |
| 3 | 0.476 | 0.08 | 213.7 |
| 4 | 0.583 | 0.095 | 192.6 |
| 5 | 0.673 | 0.102 | 174.6 |

## In these collections

- [Analogous swatches](https://grabient.com/analogous-swatches)

## Other forms

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