# Analogous navy to teal linear gradient

Analogous navy to teal linear gradient with 32 colors: #0e3146, #0f3348, #0f354a, #0f374d, #0f3b4f, #0f3e52, #0f4155, #0f4558, #0f485c, #104c5e, #104f61, #105264, #115566, #125869, #125b6b, #135e6e, #146071, #156373, #166676, #176978, #196c7b, #1b6f7d, #1d7280, #207582, #237885, #267b88, #2a7e8a, #2d818d, #2f848f, #328691, #348893, #368a95. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUTCiqsxi9z8cvtKnb9A`
- Page: https://grabient.com/kUTCiqsxi9z8cvtKnb9A?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#0e3146` | `oklch(29.92% 0.0551 239.77)` | Halite Blue | white, 13.5 to 1 |
| 2 | `#0f3348` | `oklch(30.51% 0.0558 238.70)` | Halite Blue | white, 13.2 to 1 |
| 3 | `#0f354a` | `oklch(31.27% 0.0568 237.29)` | Sea of Stars | white, 12.9 to 1 |
| 4 | `#0f374d` | `oklch(32.17% 0.0579 235.61)` | Sea of Stars | white, 12.4 to 1 |
| 5 | `#0f3b4f` | `oklch(33.18% 0.0591 233.73)` | Gibraltar Sea | white, 12 to 1 |
| 6 | `#0f3e52` | `oklch(34.26% 0.0604 231.72)` | Duskwood | white, 11.4 to 1 |
| 7 | `#0f4155` | `oklch(35.40% 0.0618 229.65)` | Capital Blue | white, 10.9 to 1 |
| 8 | `#0f4558` | `oklch(36.55% 0.0632 227.60)` | Sultan’s Silk | white, 10.4 to 1 |
| 9 | `#0f485c` | `oklch(37.70% 0.0646 225.64)` | Sultan’s Silk | white, 9.9 to 1 |
| 10 | `#104c5e` | `oklch(38.80% 0.0659 223.84)` | Teal Dark Blue | white, 9.4 to 1 |
| 11 | `#104f61` | `oklch(39.83% 0.0671 222.26)` | Raging Thunderstorm | white, 9 to 1 |
| 12 | `#105264` | `oklch(40.79% 0.0683 220.94)` | Rainy Morning | white, 8.7 to 1 |
| 13 | `#115566` | `oklch(41.73% 0.0695 219.74)` | Plunge | white, 8.3 to 1 |
| 14 | `#125869` | `oklch(42.66% 0.0707 218.64)` | Oceanside | white, 8 to 1 |
| 15 | `#125b6b` | `oklch(43.58% 0.0719 217.63)` | Connor’s Lakefront | white, 7.7 to 1 |
| 16 | `#135e6e` | `oklch(44.50% 0.0731 216.70)` | Galapagos | white, 7.3 to 1 |
| 17 | `#146071` | `oklch(45.41% 0.0742 215.83)` | Nocturnal Sea | white, 7.1 to 1 |
| 18 | `#156373` | `oklch(46.31% 0.0753 215.01)` | Blue Enchantment | white, 6.8 to 1 |
| 19 | `#166676` | `oklch(47.22% 0.0763 214.24)` | Bold Bolection | white, 6.5 to 1 |
| 20 | `#176978` | `oklch(48.11% 0.0772 213.49)` | Jester Blue | white, 6.3 to 1 |
| 21 | `#196c7b` | `oklch(49.01% 0.0781 212.77)` | Teal Fury | white, 6 to 1 |
| 22 | `#1b6f7d` | `oklch(49.91% 0.0788 212.05)` | Billabong | white, 5.8 to 1 |
| 23 | `#1d7280` | `oklch(50.86% 0.0793 211.36)` | Night Scape | white, 5.5 to 1 |
| 24 | `#207582` | `oklch(51.86% 0.0798 210.71)` | Blue Kelp | white, 5.3 to 1 |
| 25 | `#237885` | `oklch(52.88% 0.0801 210.09)` | Blue Kelp | white, 5.1 to 1 |
| 26 | `#267b88` | `oklch(53.89% 0.0804 209.51)` | Panorama | white, 4.9 to 1 |
| 27 | `#2a7e8a` | `oklch(54.89% 0.0806 208.97)` | Sea Swimmer | white, 4.7 to 1 |
| 28 | `#2d818d` | `oklch(55.83% 0.0808 208.47)` | Sea Bed | black, 4.6 to 1 |
| 29 | `#2f848f` | `oklch(56.71% 0.0809 208.03)` | Sea Bed | black, 4.8 to 1 |
| 30 | `#328691` | `oklch(57.48% 0.0811 207.63)` | Precious Stone | black, 4.9 to 1 |
| 31 | `#348893` | `oklch(58.14% 0.0812 207.29)` | Precious Stone | black, 5.1 to 1 |
| 32 | `#368a95` | `oklch(58.66% 0.0813 207.01)` | Seachange | black, 5.2 to 1 |

## CSS

```css
background: linear-gradient(225deg, #0e3146 0.0%, #0f3348 3.2%, #0f354a 6.5%, #0f374d 9.7%, #0f3b4f 12.9%, #0f3e52 16.1%, #0f4155 19.4%, #0f4558 22.6%, #0f485c 25.8%, #104c5e 29.0%, #104f61 32.3%, #105264 35.5%, #115566 38.7%, #125869 41.9%, #125b6b 45.2%, #135e6e 48.4%, #146071 51.6%, #156373 54.8%, #166676 58.1%, #176978 61.3%, #196c7b 64.5%, #1b6f7d 67.7%, #1d7280 71.0%, #207582 74.2%, #237885 77.4%, #267b88 80.6%, #2a7e8a 83.9%, #2d818d 87.1%, #2f848f 90.3%, #328691 93.5%, #348893 96.8%, #368a95 100.0%);
background: linear-gradient(225deg in oklch, oklch(29.92% 0.0551 239.77) 0.0%, oklch(30.51% 0.0558 238.70) 3.2%, oklch(31.27% 0.0568 237.29) 6.5%, oklch(32.17% 0.0579 235.61) 9.7%, oklch(33.18% 0.0591 233.73) 12.9%, oklch(34.26% 0.0604 231.72) 16.1%, oklch(35.40% 0.0618 229.65) 19.4%, oklch(36.55% 0.0632 227.60) 22.6%, oklch(37.70% 0.0646 225.64) 25.8%, oklch(38.80% 0.0659 223.84) 29.0%, oklch(39.83% 0.0671 222.26) 32.3%, oklch(40.79% 0.0683 220.94) 35.5%, oklch(41.73% 0.0695 219.74) 38.7%, oklch(42.66% 0.0707 218.64) 41.9%, oklch(43.58% 0.0719 217.63) 45.2%, oklch(44.50% 0.0731 216.70) 48.4%, oklch(45.41% 0.0742 215.83) 51.6%, oklch(46.31% 0.0753 215.01) 54.8%, oklch(47.22% 0.0763 214.24) 58.1%, oklch(48.11% 0.0772 213.49) 61.3%, oklch(49.01% 0.0781 212.77) 64.5%, oklch(49.91% 0.0788 212.05) 67.7%, oklch(50.86% 0.0793 211.36) 71.0%, oklch(51.86% 0.0798 210.71) 74.2%, oklch(52.88% 0.0801 210.09) 77.4%, oklch(53.89% 0.0804 209.51) 80.6%, oklch(54.89% 0.0806 208.97) 83.9%, oklch(55.83% 0.0808 208.47) 87.1%, oklch(56.71% 0.0809 208.03) 90.3%, oklch(57.48% 0.0811 207.63) 93.5%, oklch(58.14% 0.0812 207.29) 96.8%, oklch(58.66% 0.0813 207.01) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.299 | 0.055 | 239.8 |
| 2 | 0.402 | 0.068 | 221.8 |
| 3 | 0.496 | 0.079 | 212.3 |
| 4 | 0.587 | 0.081 | 207 |

## In these collections

- [Cool blue](https://grabient.com/cool-blue)
- [Blue gradients](https://grabient.com/blue-gradients)

## Other forms

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