# Navy and teal two color palette

The Navy and teal two color palette brings together dark blue and teal. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is teal.

- Also called: Analogous navy to teal linear gradient
- Seed: `kQPV614zo4w`
- Page: https://grabient.com/kQPV614zo4w?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#001e44` | `oklch(24.03% 0.0804 255.44)` | Midnight Mirage | white, 16.5 to 1 |
| 2 | `#002147` | `oklch(24.98% 0.0805 254.36)` | Oxford Blue | white, 16 to 1 |
| 3 | `#00244a` | `oklch(26.09% 0.0807 253.10)` | Oxford Blue | white, 15.5 to 1 |
| 4 | `#00284d` | `oklch(27.35% 0.0811 251.68)` | Dark Tyrian Blue | white, 14.9 to 1 |
| 5 | `#002c51` | `oklch(28.74% 0.0816 250.10)` | Indigo Black | white, 14.2 to 1 |
| 6 | `#003055` | `oklch(30.25% 0.0822 248.39)` | Indigo Black | white, 13.5 to 1 |
| 7 | `#00355a` | `oklch(31.88% 0.0830 246.55)` | Night Dive | white, 12.7 to 1 |
| 8 | `#003a5f` | `oklch(33.62% 0.0839 244.60)` | Poseidon | white, 11.8 to 1 |
| 9 | `#003f64` | `oklch(35.44% 0.0850 242.55)` | Dark Imperial Blue | white, 11 to 1 |
| 10 | `#004569` | `oklch(37.35% 0.0862 240.41)` | Lush Aqua | white, 10.1 to 1 |
| 11 | `#004b6f` | `oklch(39.33% 0.0875 238.19)` | Pompeii Blue | white, 9.3 to 1 |
| 12 | `#005275` | `oklch(41.37% 0.0889 235.91)` | Pirate’s Haven | white, 8.5 to 1 |
| 13 | `#00587b` | `oklch(43.45% 0.0904 233.57)` | Commandes | white, 7.8 to 1 |
| 14 | `#005f81` | `oklch(45.58% 0.0921 231.19)` | Adriatic Sea | white, 7.1 to 1 |
| 15 | `#006687` | `oklch(47.73% 0.0939 228.78)` | Bowerbird Blue | white, 6.4 to 1 |
| 16 | `#006d8d` | `oklch(49.90% 0.0957 226.35)` | Copacabana | white, 5.8 to 1 |
| 17 | `#007493` | `oklch(52.07% 0.0977 223.92)` | Blue Luxury | white, 5.3 to 1 |
| 18 | `#007c98` | `oklch(54.24% 0.0998 221.50)` | Mosaic Blue | white, 4.8 to 1 |
| 19 | `#00839e` | `oklch(56.40% 0.1020 219.09)` | Decore Splash | black, 4.7 to 1 |
| 20 | `#008aa4` | `oklch(58.52% 0.1043 216.71)` | Capri Breeze | black, 5.1 to 1 |
| 21 | `#0092a9` | `oklch(60.61% 0.1067 214.38)` | Cape Pond | black, 5.6 to 1 |
| 22 | `#0099ae` | `oklch(62.65% 0.1092 212.10)` | Aquarium Diver | black, 6.1 to 1 |
| 23 | `#00a0b3` | `oklch(64.63% 0.1117 209.89)` | Breaking Wave | black, 6.6 to 1 |
| 24 | `#00a7b8` | `oklch(66.53% 0.1143 207.76)` | Bluebird | black, 7.2 to 1 |
| 25 | `#00adbc` | `oklch(68.36% 0.1169 205.72)` | Placid Sea | black, 7.7 to 1 |
| 26 | `#00b4c0` | `oklch(70.10% 0.1195 203.78)` | Marrakech Mile | black, 8.2 to 1 |
| 27 | `#00bac4` | `oklch(71.73% 0.1220 201.96)` | Lago Blue | black, 8.7 to 1 |
| 28 | `#00bfc8` | `oklch(73.24% 0.1245 200.26)` | Panorama Blue | black, 9.3 to 1 |
| 29 | `#00c5cb` | `oklch(74.64% 0.1269 198.71)` | Turquoise Surf | black, 9.8 to 1 |
| 30 | `#00c9cd` | `oklch(75.89% 0.1291 197.30)` | Tilla Kari Mosque | black, 10.2 to 1 |
| 31 | `#00cdd0` | `oklch(77.00% 0.1312 196.06)` | Jade Glass | black, 10.6 to 1 |
| 32 | `#00d1d1` | `oklch(77.95% 0.1330 195.00)` | Jade Glass | black, 11 to 1 |

## CSS

```css
background: linear-gradient(135deg, #001e44 0.0%, #002147 3.2%, #00244a 6.5%, #00284d 9.7%, #002c51 12.9%, #003055 16.1%, #00355a 19.4%, #003a5f 22.6%, #003f64 25.8%, #004569 29.0%, #004b6f 32.3%, #005275 35.5%, #00587b 38.7%, #005f81 41.9%, #006687 45.2%, #006d8d 48.4%, #007493 51.6%, #007c98 54.8%, #00839e 58.1%, #008aa4 61.3%, #0092a9 64.5%, #0099ae 67.7%, #00a0b3 71.0%, #00a7b8 74.2%, #00adbc 77.4%, #00b4c0 80.6%, #00bac4 83.9%, #00bfc8 87.1%, #00c5cb 90.3%, #00c9cd 93.5%, #00cdd0 96.8%, #00d1d1 100.0%);
background: linear-gradient(135deg in oklch, oklch(24.03% 0.0804 255.44) 0.0%, oklch(24.98% 0.0805 254.36) 3.2%, oklch(26.09% 0.0807 253.10) 6.5%, oklch(27.35% 0.0811 251.68) 9.7%, oklch(28.74% 0.0816 250.10) 12.9%, oklch(30.25% 0.0822 248.39) 16.1%, oklch(31.88% 0.0830 246.55) 19.4%, oklch(33.62% 0.0839 244.60) 22.6%, oklch(35.44% 0.0850 242.55) 25.8%, oklch(37.35% 0.0862 240.41) 29.0%, oklch(39.33% 0.0875 238.19) 32.3%, oklch(41.37% 0.0889 235.91) 35.5%, oklch(43.45% 0.0904 233.57) 38.7%, oklch(45.58% 0.0921 231.19) 41.9%, oklch(47.73% 0.0939 228.78) 45.2%, oklch(49.90% 0.0957 226.35) 48.4%, oklch(52.07% 0.0977 223.92) 51.6%, oklch(54.24% 0.0998 221.50) 54.8%, oklch(56.40% 0.1020 219.09) 58.1%, oklch(58.52% 0.1043 216.71) 61.3%, oklch(60.61% 0.1067 214.38) 64.5%, oklch(62.65% 0.1092 212.10) 67.7%, oklch(64.63% 0.1117 209.89) 71.0%, oklch(66.53% 0.1143 207.76) 74.2%, oklch(68.36% 0.1169 205.72) 77.4%, oklch(70.10% 0.1195 203.78) 80.6%, oklch(71.73% 0.1220 201.96) 83.9%, oklch(73.24% 0.1245 200.26) 87.1%, oklch(74.64% 0.1269 198.71) 90.3%, oklch(75.89% 0.1291 197.30) 93.5%, oklch(77.00% 0.1312 196.06) 96.8%, oklch(77.95% 0.1330 195.00) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.13 | 255.2 |
| 2 | 0.78 | 0.16 | 195 |

## In these collections

- [Two color gradients](https://grabient.com/two-color-gradients)

## Other forms

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