# Analogous navy, teal and light blue linear swatches

Analogous navy, teal and light blue linear swatches with 32 colors: #093340, #093644, #093b49, #09414f, #074756, #064e5d, #045665, #025d6c, #016574, #016d7b, #057482, #0b7b88, #11828e, #178994, #1d909a, #2496a0, #2c9da6, #34a4ac, #3cabb1, #46b1b7, #50b8bd, #5bbec2, #67c4c7, #75cacd, #84d0d3, #93d6d8, #a1dbde, #afe1e3, #bbe5e7, #c6eaeb, #cfedef, #d6f0f1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUTCSfQiA-N2iPt3CkAA`
- Page: https://grabient.com/kUTCSfQiA-N2iPt3CkAA?style=linearSwatches&steps=32&angle=135
- Drawn as: linear swatches, 32 steps, 135 degrees
- Kinds: dark to light, vivid, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 11.3 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 | `#093340` | `oklch(29.92% 0.0496 223.59)` | Nordic Noir | white, 13.5 to 1 |
| 2 | `#093644` | `oklch(31.19% 0.0520 222.72)` | Firmament Blue | white, 12.8 to 1 |
| 3 | `#093b49` | `oklch(32.81% 0.0551 221.58)` | Ghostlands Coal | white, 12.1 to 1 |
| 4 | `#09414f` | `oklch(34.72% 0.0590 220.22)` | Cold and Dark | white, 11.2 to 1 |
| 5 | `#074756` | `oklch(36.87% 0.0633 218.70)` | Sultan’s Silk | white, 10.2 to 1 |
| 6 | `#064e5d` | `oklch(39.19% 0.0678 217.07)` | Teal Dark Blue | white, 9.3 to 1 |
| 7 | `#045665` | `oklch(41.63% 0.0724 215.39)` | Abyssal Waters | white, 8.3 to 1 |
| 8 | `#025d6c` | `oklch(44.11% 0.0768 213.70)` | Hero | white, 7.5 to 1 |
| 9 | `#016574` | `oklch(46.58% 0.0810 212.07)` | Green Spool | white, 6.7 to 1 |
| 10 | `#016d7b` | `oklch(48.98% 0.0845 210.56)` | Carnival Night | white, 6 to 1 |
| 11 | `#057482` | `oklch(51.25% 0.0874 209.20)` | Deep Current | white, 5.4 to 1 |
| 12 | `#0b7b88` | `oklch(53.38% 0.0896 208.02)` | Biscay Bay | white, 5 to 1 |
| 13 | `#11828e` | `oklch(55.50% 0.0917 206.85)` | True Teal | black, 4.5 to 1 |
| 14 | `#178994` | `oklch(57.62% 0.0937 205.71)` | Zuni | black, 5 to 1 |
| 15 | `#1d909a` | `oklch(59.75% 0.0955 204.61)` | Peacock Feather | black, 5.4 to 1 |
| 16 | `#2496a0` | `oklch(61.86% 0.0969 203.55)` | Aqua Lake | black, 5.9 to 1 |
| 17 | `#2c9da6` | `oklch(63.97% 0.0979 202.57)` | Cancer Seagreen Scarab | black, 6.5 to 1 |
| 18 | `#34a4ac` | `oklch(66.07% 0.0984 201.67)` | Teal Essence | black, 7 to 1 |
| 19 | `#3cabb1` | `oklch(68.16% 0.0982 200.86)` | Pluto | black, 7.6 to 1 |
| 20 | `#46b1b7` | `oklch(70.22% 0.0972 200.17)` | Thalassa | black, 8.2 to 1 |
| 21 | `#50b8bd` | `oklch(72.27% 0.0954 199.59)` | Sussie | black, 8.8 to 1 |
| 22 | `#5bbec2` | `oklch(74.30% 0.0926 199.16)` | Pharaoh’s Seas | black, 9.5 to 1 |
| 23 | `#67c4c7` | `oklch(76.44% 0.0882 198.92)` | Luna Moona | black, 10.2 to 1 |
| 24 | `#75cacd` | `oklch(78.66% 0.0823 198.83)` | Tropical Splash | black, 11 to 1 |
| 25 | `#84d0d3` | `oklch(80.92% 0.0753 198.88)` | Aqua Splash | black, 11.9 to 1 |
| 26 | `#93d6d8` | `oklch(83.18% 0.0677 199.04)` | Mini Blue | black, 12.8 to 1 |
| 27 | `#a1dbde` | `oklch(85.37% 0.0596 199.26)` | Ice Pack | black, 13.7 to 1 |
| 28 | `#afe1e3` | `oklch(87.46% 0.0516 199.53)` | Opal | black, 14.6 to 1 |
| 29 | `#bbe5e7` | `oklch(89.39% 0.0441 199.80)` | Soaring Sky | black, 15.5 to 1 |
| 30 | `#c6eaeb` | `oklch(91.10% 0.0373 200.05)` | Silent Breeze | black, 16.3 to 1 |
| 31 | `#cfedef` | `oklch(92.56% 0.0317 200.24)` | Blue Emulsion | black, 17 to 1 |
| 32 | `#d6f0f1` | `oklch(93.70% 0.0276 200.35)` | Lakeside Mist | black, 17.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #093340 0.000% 3.125%, #093644 3.125% 6.250%, #093b49 6.250% 9.375%, #09414f 9.375% 12.500%, #074756 12.500% 15.625%, #064e5d 15.625% 18.750%, #045665 18.750% 21.875%, #025d6c 21.875% 25.000%, #016574 25.000% 28.125%, #016d7b 28.125% 31.250%, #057482 31.250% 34.375%, #0b7b88 34.375% 37.500%, #11828e 37.500% 40.625%, #178994 40.625% 43.750%, #1d909a 43.750% 46.875%, #2496a0 46.875% 50.000%, #2c9da6 50.000% 53.125%, #34a4ac 53.125% 56.250%, #3cabb1 56.250% 59.375%, #46b1b7 59.375% 62.500%, #50b8bd 62.500% 65.625%, #5bbec2 65.625% 68.750%, #67c4c7 68.750% 71.875%, #75cacd 71.875% 75.000%, #84d0d3 75.000% 78.125%, #93d6d8 78.125% 81.250%, #a1dbde 81.250% 84.375%, #afe1e3 84.375% 87.500%, #bbe5e7 87.500% 90.625%, #c6eaeb 90.625% 93.750%, #cfedef 93.750% 96.875%, #d6f0f1 96.875% 100.000%);
background: linear-gradient(135deg, oklch(29.92% 0.0496 223.59) 0.000% 3.125%, oklch(31.19% 0.0520 222.72) 3.125% 6.250%, oklch(32.81% 0.0551 221.58) 6.250% 9.375%, oklch(34.72% 0.0590 220.22) 9.375% 12.500%, oklch(36.87% 0.0633 218.70) 12.500% 15.625%, oklch(39.19% 0.0678 217.07) 15.625% 18.750%, oklch(41.63% 0.0724 215.39) 18.750% 21.875%, oklch(44.11% 0.0768 213.70) 21.875% 25.000%, oklch(46.58% 0.0810 212.07) 25.000% 28.125%, oklch(48.98% 0.0845 210.56) 28.125% 31.250%, oklch(51.25% 0.0874 209.20) 31.250% 34.375%, oklch(53.38% 0.0896 208.02) 34.375% 37.500%, oklch(55.50% 0.0917 206.85) 37.500% 40.625%, oklch(57.62% 0.0937 205.71) 40.625% 43.750%, oklch(59.75% 0.0955 204.61) 43.750% 46.875%, oklch(61.86% 0.0969 203.55) 46.875% 50.000%, oklch(63.97% 0.0979 202.57) 50.000% 53.125%, oklch(66.07% 0.0984 201.67) 53.125% 56.250%, oklch(68.16% 0.0982 200.86) 56.250% 59.375%, oklch(70.22% 0.0972 200.17) 59.375% 62.500%, oklch(72.27% 0.0954 199.59) 62.500% 65.625%, oklch(74.30% 0.0926 199.16) 65.625% 68.750%, oklch(76.44% 0.0882 198.92) 68.750% 71.875%, oklch(78.66% 0.0823 198.83) 71.875% 75.000%, oklch(80.92% 0.0753 198.88) 75.000% 78.125%, oklch(83.18% 0.0677 199.04) 78.125% 81.250%, oklch(85.37% 0.0596 199.26) 81.250% 84.375%, oklch(87.46% 0.0516 199.53) 84.375% 87.500%, oklch(89.39% 0.0441 199.80) 87.500% 90.625%, oklch(91.10% 0.0373 200.05) 90.625% 93.750%, oklch(92.56% 0.0317 200.24) 93.750% 96.875%, oklch(93.70% 0.0276 200.35) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.299 | 0.05 | 223.6 |
| 2 | 0.52 | 0.088 | 208.8 |
| 3 | 0.736 | 0.094 | 199.3 |
| 4 | 0.937 | 0.028 | 200.3 |

## In these collections

- [Sequential data gradients](https://grabient.com/sequential-data-gradients)

## Other forms

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