# Analogous navy to teal linear gradient

Analogous navy to teal linear gradient with 32 colors: #1c3353, #1c3555, #1c3758, #1d395b, #1d3c5f, #1d3f63, #1d4368, #1d476c, #1c4c70, #1c5175, #1b5779, #1b5d7d, #1b6480, #1c6b84, #1d7288, #1e798c, #1e8090, #1e8794, #1c8e98, #1b969d, #199da1, #18a5a4, #17aca8, #18b3ab, #1ab9af, #1bc0b3, #1cc6b7, #1bccbb, #1bd2c0, #1ad7c4, #19dbc7, #19dec9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWUS-2sp0-sUfvBYqr0ZzO_I`
- Page: https://grabient.com/kWUS-2sp0-sUfvBYqr0ZzO_I?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: 7.5 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 | `#1c3353` | `oklch(31.89% 0.0648 256.64)` | Elite Blue | white, 12.7 to 1 |
| 2 | `#1c3555` | `oklch(32.47% 0.0660 255.96)` | Incremental Blue | white, 12.4 to 1 |
| 3 | `#1c3758` | `oklch(33.20% 0.0678 255.21)` | Incremental Blue | white, 12.1 to 1 |
| 4 | `#1d395b` | `oklch(34.06% 0.0699 254.34)` | Navy Peony | white, 11.7 to 1 |
| 5 | `#1d3c5f` | `oklch(35.05% 0.0722 253.26)` | Navy Peony | white, 11.2 to 1 |
| 6 | `#1d3f63` | `oklch(36.16% 0.0745 251.89)` | Alpine Race | white, 10.7 to 1 |
| 7 | `#1d4368` | `oklch(37.38% 0.0768 250.17)` | Lucidity | white, 10.2 to 1 |
| 8 | `#1d476c` | `oklch(38.70% 0.0787 248.02)` | Terror From the Deep | white, 9.6 to 1 |
| 9 | `#1c4c70` | `oklch(40.13% 0.0803 245.35)` | Indigo Cloth | white, 9 to 1 |
| 10 | `#1c5175` | `oklch(41.73% 0.0812 241.96)` | Midnight Sonata | white, 8.4 to 1 |
| 11 | `#1b5779` | `oklch(43.48% 0.0818 237.93)` | 3AM in Shibuya | white, 7.8 to 1 |
| 12 | `#1b5d7d` | `oklch(45.36% 0.0822 233.47)` | Royal Blood | white, 7.1 to 1 |
| 13 | `#1b6480` | `oklch(47.32% 0.0826 228.78)` | Georgian Bay | white, 6.5 to 1 |
| 14 | `#1c6b84` | `oklch(49.34% 0.0831 224.04)` | Saxony Blue | white, 6 to 1 |
| 15 | `#1d7288` | `oklch(51.36% 0.0841 219.46)` | Glamour Green | white, 5.4 to 1 |
| 16 | `#1e798c` | `oklch(53.36% 0.0857 215.23)` | Bimini Blue | white, 5 to 1 |
| 17 | `#1e8090` | `oklch(55.31% 0.0881 211.47)` | Pagoda Blue | white, 4.6 to 1 |
| 18 | `#1e8794` | `oklch(57.31% 0.0913 207.81)` | River Fountain | black, 4.9 to 1 |
| 19 | `#1c8e98` | `oklch(59.36% 0.0951 204.21)` | Coral Coast | black, 5.4 to 1 |
| 20 | `#1b969d` | `oklch(61.43% 0.0992 200.76)` | Ocean Reef | black, 5.8 to 1 |
| 21 | `#199da1` | `oklch(63.48% 0.1036 197.50)` | Baltic | black, 6.4 to 1 |
| 22 | `#18a5a4` | `oklch(65.49% 0.1080 194.50)` | Royal Cloak | black, 6.9 to 1 |
| 23 | `#17aca8` | `oklch(67.42% 0.1123 191.82)` | Teal Me No Lies | black, 7.5 to 1 |
| 24 | `#18b3ab` | `oklch(69.25% 0.1162 189.52)` | Glass Jar Blue | black, 8 to 1 |
| 25 | `#1ab9af` | `oklch(70.99% 0.1198 187.66)` | Turquoise Topaz | black, 8.6 to 1 |
| 26 | `#1bc0b3` | `oklch(72.75% 0.1236 186.24)` | Amazonite | black, 9.1 to 1 |
| 27 | `#1cc6b7` | `oklch(74.49% 0.1273 185.17)` | Swimmers Pool | black, 9.8 to 1 |
| 28 | `#1bccbb` | `oklch(76.15% 0.1310 184.40)` | Exquisite Turquoise | black, 10.4 to 1 |
| 29 | `#1bd2c0` | `oklch(77.69% 0.1344 183.84)` | Bianchi Green | black, 10.9 to 1 |
| 30 | `#1ad7c4` | `oklch(79.06% 0.1374 183.41)` | Turquoise Panic | black, 11.5 to 1 |
| 31 | `#19dbc7` | `oklch(80.22% 0.1400 183.05)` | Mint Morning | black, 12 to 1 |
| 32 | `#19dec9` | `oklch(81.10% 0.1419 182.67)` | Mint Morning | black, 12.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #1c3353 0.0%, #1c3555 3.2%, #1c3758 6.5%, #1d395b 9.7%, #1d3c5f 12.9%, #1d3f63 16.1%, #1d4368 19.4%, #1d476c 22.6%, #1c4c70 25.8%, #1c5175 29.0%, #1b5779 32.3%, #1b5d7d 35.5%, #1b6480 38.7%, #1c6b84 41.9%, #1d7288 45.2%, #1e798c 48.4%, #1e8090 51.6%, #1e8794 54.8%, #1c8e98 58.1%, #1b969d 61.3%, #199da1 64.5%, #18a5a4 67.7%, #17aca8 71.0%, #18b3ab 74.2%, #1ab9af 77.4%, #1bc0b3 80.6%, #1cc6b7 83.9%, #1bccbb 87.1%, #1bd2c0 90.3%, #1ad7c4 93.5%, #19dbc7 96.8%, #19dec9 100.0%);
background: linear-gradient(135deg in oklch, oklch(31.89% 0.0648 256.64) 0.0%, oklch(32.47% 0.0660 255.96) 3.2%, oklch(33.20% 0.0678 255.21) 6.5%, oklch(34.06% 0.0699 254.34) 9.7%, oklch(35.05% 0.0722 253.26) 12.9%, oklch(36.16% 0.0745 251.89) 16.1%, oklch(37.38% 0.0768 250.17) 19.4%, oklch(38.70% 0.0787 248.02) 22.6%, oklch(40.13% 0.0803 245.35) 25.8%, oklch(41.73% 0.0812 241.96) 29.0%, oklch(43.48% 0.0818 237.93) 32.3%, oklch(45.36% 0.0822 233.47) 35.5%, oklch(47.32% 0.0826 228.78) 38.7%, oklch(49.34% 0.0831 224.04) 41.9%, oklch(51.36% 0.0841 219.46) 45.2%, oklch(53.36% 0.0857 215.23) 48.4%, oklch(55.31% 0.0881 211.47) 51.6%, oklch(57.31% 0.0913 207.81) 54.8%, oklch(59.36% 0.0951 204.21) 58.1%, oklch(61.43% 0.0992 200.76) 61.3%, oklch(63.48% 0.1036 197.50) 64.5%, oklch(65.49% 0.1080 194.50) 67.7%, oklch(67.42% 0.1123 191.82) 71.0%, oklch(69.25% 0.1162 189.52) 74.2%, oklch(70.99% 0.1198 187.66) 77.4%, oklch(72.75% 0.1236 186.24) 80.6%, oklch(74.49% 0.1273 185.17) 83.9%, oklch(76.15% 0.1310 184.40) 87.1%, oklch(77.69% 0.1344 183.84) 90.3%, oklch(79.06% 0.1374 183.41) 93.5%, oklch(80.22% 0.1400 183.05) 96.8%, oklch(81.10% 0.1419 182.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.065 | 256.6 |
| 2 | 0.398 | 0.08 | 246.1 |
| 3 | 0.543 | 0.087 | 213.3 |
| 4 | 0.697 | 0.117 | 189 |
| 5 | 0.811 | 0.142 | 182.7 |

## In these collections

- [Teal gradients](https://grabient.com/teal-gradients)
- [Linear gradients](https://grabient.com/linear-gradients)

## Other forms

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