# Teal and navy ocean palette

The Teal and navy ocean palette brings together pale teal, light teal, teal, blue, and dark blue. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is pale teal.

- Also called: Analogous light blue, teal and navy radial gradient
- Seed: `kY7DF-6yhAdyrwNFocJMRzCx0VQc`
- Page: https://grabient.com/kY7DF-6yhAdyrwNFocJMRzCx0VQc?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: light to dark, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 14.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 | `#b7f7e7` | `oklch(92.91% 0.0675 177.89)` | Shallow End | black, 17.4 to 1 |
| 2 | `#b0f5e5` | `oklch(92.04% 0.0723 178.30)` | Pale King’s Blue | black, 17 to 1 |
| 3 | `#a6f3e2` | `oklch(90.86% 0.0793 178.83)` | Mint Tea | black, 16.5 to 1 |
| 4 | `#9af0de` | `oklch(89.45% 0.0874 179.47)` | Oasis Stream | black, 15.8 to 1 |
| 5 | `#8cecda` | `oklch(87.88% 0.0958 180.21)` | Tiffany Blue | black, 15.1 to 1 |
| 6 | `#7de8d6` | `oklch(86.23% 0.1034 181.04)` | Turquoise Chalk | black, 14.4 to 1 |
| 7 | `#70e4d2` | `oklch(84.58% 0.1093 181.93)` | Turquoise Chalk | black, 13.6 to 1 |
| 8 | `#64dfce` | `oklch(82.96% 0.1134 182.83)` | Jazzy Jade | black, 13 to 1 |
| 9 | `#58daca` | `oklch(81.34% 0.1166 183.65)` | Jazzy Jade | black, 12.3 to 1 |
| 10 | `#4dd5c6` | `oklch(79.66% 0.1189 184.53)` | Turquoise Panic | black, 11.6 to 1 |
| 11 | `#42d0c2` | `oklch(77.87% 0.1204 185.58)` | Bianchi Green | black, 10.9 to 1 |
| 12 | `#36c9bd` | `oklch(75.92% 0.1209 186.92)` | Swimmers Pool | black, 10.2 to 1 |
| 13 | `#29c2b9` | `oklch(73.77% 0.1204 188.67)` | Swimmers Pool | black, 9.5 to 1 |
| 14 | `#1cbab4` | `oklch(71.34% 0.1186 190.94)` | Super Rare Jade | black, 8.7 to 1 |
| 15 | `#11b0ae` | `oklch(68.59% 0.1151 193.69)` | Laguna Green | black, 7.8 to 1 |
| 16 | `#0ba5a8` | `oklch(65.61% 0.1103 196.82)` | Wax Crayon Blue | black, 6.9 to 1 |
| 17 | `#0b9aa1` | `oklch(62.52% 0.1048 200.23)` | Island Dream | black, 6.1 to 1 |
| 18 | `#0c8f99` | `oklch(59.42% 0.0994 203.80)` | Splashy | black, 5.4 to 1 |
| 19 | `#0d8592` | `oklch(56.43% 0.0946 207.43)` | Painted Sea | black, 4.7 to 1 |
| 20 | `#0a7b8b` | `oklch(53.63% 0.0911 211.06)` | Biscay Bay | white, 4.9 to 1 |
| 21 | `#077285` | `oklch(50.94% 0.0884 214.96)` | Glamour Green | white, 5.5 to 1 |
| 22 | `#04697f` | `oklch(48.31% 0.0863 219.08)` | Pilot Blue | white, 6.2 to 1 |
| 23 | `#03617a` | `oklch(45.74% 0.0845 223.26)` | Jamaican Dream | white, 7 to 1 |
| 24 | `#035973` | `oklch(43.18% 0.0826 227.33)` | Octagon Ocean | white, 7.8 to 1 |
| 25 | `#04506d` | `oklch(40.63% 0.0806 231.15)` | Gemstone Blue | white, 8.8 to 1 |
| 26 | `#054866` | `oklch(38.06% 0.0780 234.55)` | Stegadon Scale Green | white, 9.8 to 1 |
| 27 | `#05405d` | `oklch(35.27% 0.0747 237.74)` | Maniac Mansion | white, 11 to 1 |
| 28 | `#053754` | `oklch(32.33% 0.0709 240.79)` | Incremental Blue | white, 12.4 to 1 |
| 29 | `#052f4b` | `oklch(29.42% 0.0670 243.61)` | Crow Black Blue | white, 13.8 to 1 |
| 30 | `#042842` | `oklch(26.74% 0.0633 246.11)` | Murky Depths | white, 15.1 to 1 |
| 31 | `#04223b` | `oklch(24.48% 0.0601 248.18)` | Celestial Canvas | white, 16.2 to 1 |
| 32 | `#031e36` | `oklch(22.83% 0.0579 249.75)` | Cyanophobia | white, 16.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #b7f7e7 0.0%, #b0f5e5 3.2%, #a6f3e2 6.5%, #9af0de 9.7%, #8cecda 12.9%, #7de8d6 16.1%, #70e4d2 19.4%, #64dfce 22.6%, #58daca 25.8%, #4dd5c6 29.0%, #42d0c2 32.3%, #36c9bd 35.5%, #29c2b9 38.7%, #1cbab4 41.9%, #11b0ae 45.2%, #0ba5a8 48.4%, #0b9aa1 51.6%, #0c8f99 54.8%, #0d8592 58.1%, #0a7b8b 61.3%, #077285 64.5%, #04697f 67.7%, #03617a 71.0%, #035973 74.2%, #04506d 77.4%, #054866 80.6%, #05405d 83.9%, #053754 87.1%, #052f4b 90.3%, #042842 93.5%, #04223b 96.8%, #031e36 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(92.91% 0.0675 177.89) 0.0%, oklch(92.04% 0.0723 178.30) 3.2%, oklch(90.86% 0.0793 178.83) 6.5%, oklch(89.45% 0.0874 179.47) 9.7%, oklch(87.88% 0.0958 180.21) 12.9%, oklch(86.23% 0.1034 181.04) 16.1%, oklch(84.58% 0.1093 181.93) 19.4%, oklch(82.96% 0.1134 182.83) 22.6%, oklch(81.34% 0.1166 183.65) 25.8%, oklch(79.66% 0.1189 184.53) 29.0%, oklch(77.87% 0.1204 185.58) 32.3%, oklch(75.92% 0.1209 186.92) 35.5%, oklch(73.77% 0.1204 188.67) 38.7%, oklch(71.34% 0.1186 190.94) 41.9%, oklch(68.59% 0.1151 193.69) 45.2%, oklch(65.61% 0.1103 196.82) 48.4%, oklch(62.52% 0.1048 200.23) 51.6%, oklch(59.42% 0.0994 203.80) 54.8%, oklch(56.43% 0.0946 207.43) 58.1%, oklch(53.63% 0.0911 211.06) 61.3%, oklch(50.94% 0.0884 214.96) 64.5%, oklch(48.31% 0.0863 219.08) 67.7%, oklch(45.74% 0.0845 223.26) 71.0%, oklch(43.18% 0.0826 227.33) 74.2%, oklch(40.63% 0.0806 231.15) 77.4%, oklch(38.06% 0.0780 234.55) 80.6%, oklch(35.27% 0.0747 237.74) 83.9%, oklch(32.33% 0.0709 240.79) 87.1%, oklch(29.42% 0.0670 243.61) 90.3%, oklch(26.74% 0.0633 246.11) 93.5%, oklch(24.48% 0.0601 248.18) 96.8%, oklch(22.83% 0.0579 249.75) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.929 | 0.068 | 177.9 |
| 2 | 0.843 | 0.11 | 182.1 |
| 3 | 0.728 | 0.12 | 189.5 |
| 4 | 0.547 | 0.092 | 209.6 |
| 5 | 0.386 | 0.079 | 233.9 |
| 6 | 0.228 | 0.058 | 249.7 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)

## Other forms

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