# Navy and teal color palette

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

- Also called: Cool blue and light blue linear swatches
- Seed: `kUY264yS29t-kPBnFz4g`
- Page: https://grabient.com/kUY264yS29t-kPBnFz4g?style=linearSwatches&steps=21&angle=315
- Drawn as: linear swatches, 21 steps, 315 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.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 | `#023e94` | `oklch(38.98% 0.1516 259.45)` | Amalfitan Azure | white, 9.8 to 1 |
| 2 | `#004598` | `oklch(40.76% 0.1491 257.76)` | Fright Night | white, 9.1 to 1 |
| 3 | `#004e9d` | `oklch(43.20% 0.1454 255.61)` | Freshwater Lake | white, 8.1 to 1 |
| 4 | `#0158a4` | `oklch(46.09% 0.1416 252.95)` | Princess Blue | white, 7.1 to 1 |
| 5 | `#0563ab` | `oklch(49.25% 0.1371 249.94)` | Cobalt Stone | white, 6.2 to 1 |
| 6 | `#0c6fb2` | `oklch(52.48% 0.1326 246.60)` | Daphne | white, 5.3 to 1 |
| 7 | `#147ab8` | `oklch(55.58% 0.1281 242.98)` | Star Command Blue | white, 4.6 to 1 |
| 8 | `#1a84bd` | `oklch(58.40% 0.1241 239.08)` | Ibiza Blue | black, 5 to 1 |
| 9 | `#1f8ec1` | `oklch(61.26% 0.1203 234.47)` | Parrotfish Blue | black, 5.7 to 1 |
| 10 | `#2699c5` | `oklch(64.21% 0.1166 229.27)` | Isle of Capri | black, 6.4 to 1 |
| 11 | `#2fa4c9` | `oklch(67.13% 0.1129 223.79)` | Sardinia Beaches | black, 7.2 to 1 |
| 12 | `#3aaecb` | `oklch(69.90% 0.1091 218.36)` | River Blue | black, 8.1 to 1 |
| 13 | `#46b7cd` | `oklch(72.42% 0.1051 213.29)` | Teal Moiré | black, 8.9 to 1 |
| 14 | `#52becf` | `oklch(74.58% 0.1007 208.92)` | Skink Blue | black, 9.6 to 1 |
| 15 | `#5ec4cf` | `oklch(76.29% 0.0959 205.40)` | Arctic Ocean | black, 10.2 to 1 |
| 16 | `#69c8cf` | `oklch(77.64% 0.0901 202.36)` | Paradise Sky | black, 10.7 to 1 |
| 17 | `#74cace` | `oklch(78.69% 0.0839 199.75)` | Tropical Splash | black, 11.1 to 1 |
| 18 | `#7dccce` | `oklch(79.50% 0.0776 197.53)` | Aqua Belt | black, 11.3 to 1 |
| 19 | `#85cdcd` | `oklch(80.14% 0.0718 195.66)` | Aqua Splash | black, 11.6 to 1 |
| 20 | `#8ccecc` | `oklch(80.65% 0.0669 194.12)` | Aaquatic Wonderland | black, 11.8 to 1 |
| 21 | `#91cfcc` | `oklch(81.10% 0.0634 192.88)` | Lake | black, 11.9 to 1 |

## CSS

```css
background: linear-gradient(315deg, #023e94 0.000% 4.762%, #004598 4.762% 9.524%, #004e9d 9.524% 14.286%, #0158a4 14.286% 19.048%, #0563ab 19.048% 23.810%, #0c6fb2 23.810% 28.571%, #147ab8 28.571% 33.333%, #1a84bd 33.333% 38.095%, #1f8ec1 38.095% 42.857%, #2699c5 42.857% 47.619%, #2fa4c9 47.619% 52.381%, #3aaecb 52.381% 57.143%, #46b7cd 57.143% 61.905%, #52becf 61.905% 66.667%, #5ec4cf 66.667% 71.429%, #69c8cf 71.429% 76.190%, #74cace 76.190% 80.952%, #7dccce 80.952% 85.714%, #85cdcd 85.714% 90.476%, #8ccecc 90.476% 95.238%, #91cfcc 95.238% 100.000%);
background: linear-gradient(315deg, oklch(38.98% 0.1516 259.45) 0.000% 4.762%, oklch(40.76% 0.1491 257.76) 4.762% 9.524%, oklch(43.20% 0.1454 255.61) 9.524% 14.286%, oklch(46.09% 0.1416 252.95) 14.286% 19.048%, oklch(49.25% 0.1371 249.94) 19.048% 23.810%, oklch(52.48% 0.1326 246.60) 23.810% 28.571%, oklch(55.58% 0.1281 242.98) 28.571% 33.333%, oklch(58.40% 0.1241 239.08) 33.333% 38.095%, oklch(61.26% 0.1203 234.47) 38.095% 42.857%, oklch(64.21% 0.1166 229.27) 42.857% 47.619%, oklch(67.13% 0.1129 223.79) 47.619% 52.381%, oklch(69.90% 0.1091 218.36) 52.381% 57.143%, oklch(72.42% 0.1051 213.29) 57.143% 61.905%, oklch(74.58% 0.1007 208.92) 61.905% 66.667%, oklch(76.29% 0.0959 205.40) 66.667% 71.429%, oklch(77.64% 0.0901 202.36) 71.429% 76.190%, oklch(78.69% 0.0839 199.75) 76.190% 80.952%, oklch(79.50% 0.0776 197.53) 80.952% 85.714%, oklch(80.14% 0.0718 195.66) 85.714% 90.476%, oklch(80.65% 0.0669 194.12) 90.476% 95.238%, oklch(81.10% 0.0634 192.88) 95.238% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.39 | 0.152 | 259.5 |
| 2 | 0.575 | 0.125 | 240.4 |
| 3 | 0.752 | 0.099 | 207.7 |
| 4 | 0.811 | 0.063 | 192.9 |

## In these collections

- [Coastal gradients](https://grabient.com/coastal-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)
- [Sky](https://grabient.com/sky)

## Other forms

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