# Navy teal cool diagonal

Analogous teal, navy and gray linear gradient with 32 colors: #0a554f, #004f4e, #00454a, #003a45, #002f3f, #00243a, #021b34, #05152f, #06132e, #081431, #0a1a38, #0c2141, #0d2a4c, #0c3355, #0a3b5d, #084061, #084061, #063b5b, #043252, #022847, #011f3c, #021833, #03142e, #06162e, #0f1f36, #202f46, #35445b, #4f5e75, #6a7a90, #8595aa, #9dacc1, #adbcd0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous teal, navy and gray linear gradient
- Seed: `kWZzGEmJVI62cvWak0H5Iw_g`
- Page: https://grabient.com/kWZzGEmJVI62cvWak0H5Iw_g?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark center, vivid, dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.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 | `#0a554f` | `oklch(40.55% 0.0675 186.33)` | Cape Verde | white, 8.6 to 1 |
| 2 | `#004f4e` | `oklch(38.58% 0.0661 193.13)` | Antique Turquoise | white, 9.4 to 1 |
| 3 | `#00454a` | `oklch(35.65% 0.0607 202.98)` | Incubi Darkness | white, 10.7 to 1 |
| 4 | `#003a45` | `oklch(32.14% 0.0567 214.77)` | Natural Indigo | white, 12.3 to 1 |
| 5 | `#002f3f` | `oklch(28.44% 0.0551 227.39)` | Nordic Noir | white, 14.2 to 1 |
| 6 | `#00243a` | `oklch(24.92% 0.0568 239.71)` | Celestial Canvas | white, 15.9 to 1 |
| 7 | `#021b34` | `oklch(21.95% 0.0582 250.31)` | Naval Night | white, 17.3 to 1 |
| 8 | `#05152f` | `oklch(19.95% 0.0577 258.57)` | Squid’s Ink | white, 18.1 to 1 |
| 9 | `#06132e` | `oklch(19.27% 0.0581 263.18)` | Squid’s Ink | white, 18.4 to 1 |
| 10 | `#081431` | `oklch(20.16% 0.0600 264.11)` | Squid’s Ink | white, 18.1 to 1 |
| 11 | `#0a1a38` | `oklch(22.27% 0.0631 262.25)` | Naval Night | white, 17.2 to 1 |
| 12 | `#0c2141` | `oklch(25.16% 0.0668 258.48)` | Dark Eclipse | white, 15.9 to 1 |
| 13 | `#0d2a4c` | `oklch(28.38% 0.0707 253.68)` | Royal Blue Metallic | white, 14.4 to 1 |
| 14 | `#0c3355` | `oklch(31.49% 0.0743 248.71)` | Incremental Blue | white, 12.9 to 1 |
| 15 | `#0a3b5d` | `oklch(34.04% 0.0770 244.44)` | Poseidon | white, 11.6 to 1 |
| 16 | `#084061` | `oklch(35.58% 0.0785 241.76)` | Neptune’s Wrath | white, 10.9 to 1 |
| 17 | `#084061` | `oklch(35.61% 0.0782 241.34)` | Neptune’s Wrath | white, 10.9 to 1 |
| 18 | `#063b5b` | `oklch(33.81% 0.0763 242.46)` | Poseidon | white, 11.7 to 1 |
| 19 | `#043252` | `oklch(30.75% 0.0733 244.63)` | Beyond the Stars | white, 13.2 to 1 |
| 20 | `#022847` | `oklch(27.11% 0.0695 247.45)` | Rhapsody in Blue | white, 14.9 to 1 |
| 21 | `#011f3c` | `oklch(23.57% 0.0652 250.57)` | Midnight Mirage | white, 16.6 to 1 |
| 22 | `#021833` | `oklch(20.80% 0.0609 253.61)` | Oxford by Night | white, 17.8 to 1 |
| 23 | `#03142e` | `oklch(19.47% 0.0567 256.18)` | Squid’s Ink | white, 18.3 to 1 |
| 24 | `#06162e` | `oklch(20.26% 0.0531 257.93)` | Squid’s Ink | white, 18 to 1 |
| 25 | `#0f1f36` | `oklch(23.86% 0.0501 258.66)` | Trapped Darkness | white, 16.5 to 1 |
| 26 | `#202f46` | `oklch(30.22% 0.0472 258.77)` | Manganese Black | white, 13.5 to 1 |
| 27 | `#35445b` | `oklch(38.50% 0.0442 258.42)` | Pickled Bluewood | white, 9.8 to 1 |
| 28 | `#4f5e75` | `oklch(47.86% 0.0414 257.76)` | Vintage Indigo | white, 6.5 to 1 |
| 29 | `#6a7a90` | `oklch(57.45% 0.0388 256.94)` | Noble Blue | black, 4.7 to 1 |
| 30 | `#8595aa` | `oklch(66.43% 0.0365 256.11)` | Norwegian Night | black, 6.8 to 1 |
| 31 | `#9dacc1` | `oklch(73.94% 0.0346 255.42)` | Soaring Eagle | black, 9 to 1 |
| 32 | `#adbcd0` | `oklch(79.13% 0.0331 255.02)` | Sailor Boy | black, 10.9 to 1 |

## CSS

```css
background: linear-gradient(225deg, #0a554f 0.0%, #004f4e 3.2%, #00454a 6.5%, #003a45 9.7%, #002f3f 12.9%, #00243a 16.1%, #021b34 19.4%, #05152f 22.6%, #06132e 25.8%, #081431 29.0%, #0a1a38 32.3%, #0c2141 35.5%, #0d2a4c 38.7%, #0c3355 41.9%, #0a3b5d 45.2%, #084061 48.4%, #084061 51.6%, #063b5b 54.8%, #043252 58.1%, #022847 61.3%, #011f3c 64.5%, #021833 67.7%, #03142e 71.0%, #06162e 74.2%, #0f1f36 77.4%, #202f46 80.6%, #35445b 83.9%, #4f5e75 87.1%, #6a7a90 90.3%, #8595aa 93.5%, #9dacc1 96.8%, #adbcd0 100.0%);
background: linear-gradient(225deg in oklch, oklch(40.55% 0.0675 186.33) 0.0%, oklch(38.58% 0.0661 193.13) 3.2%, oklch(35.65% 0.0607 202.98) 6.5%, oklch(32.14% 0.0567 214.77) 9.7%, oklch(28.44% 0.0551 227.39) 12.9%, oklch(24.92% 0.0568 239.71) 16.1%, oklch(21.95% 0.0582 250.31) 19.4%, oklch(19.95% 0.0577 258.57) 22.6%, oklch(19.27% 0.0581 263.18) 25.8%, oklch(20.16% 0.0600 264.11) 29.0%, oklch(22.27% 0.0631 262.25) 32.3%, oklch(25.16% 0.0668 258.48) 35.5%, oklch(28.38% 0.0707 253.68) 38.7%, oklch(31.49% 0.0743 248.71) 41.9%, oklch(34.04% 0.0770 244.44) 45.2%, oklch(35.58% 0.0785 241.76) 48.4%, oklch(35.61% 0.0782 241.34) 51.6%, oklch(33.81% 0.0763 242.46) 54.8%, oklch(30.75% 0.0733 244.63) 58.1%, oklch(27.11% 0.0695 247.45) 61.3%, oklch(23.57% 0.0652 250.57) 64.5%, oklch(20.80% 0.0609 253.61) 67.7%, oklch(19.47% 0.0567 256.18) 71.0%, oklch(20.26% 0.0531 257.93) 74.2%, oklch(23.86% 0.0501 258.66) 77.4%, oklch(30.22% 0.0472 258.77) 80.6%, oklch(38.50% 0.0442 258.42) 83.9%, oklch(47.86% 0.0414 257.76) 87.1%, oklch(57.45% 0.0388 256.94) 90.3%, oklch(66.43% 0.0365 256.11) 93.5%, oklch(73.94% 0.0346 255.42) 96.8%, oklch(79.13% 0.0331 255.02) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.406 | 0.068 | 186.3 |
| 2 | 0.193 | 0.058 | 262.4 |
| 3 | 0.358 | 0.079 | 241.3 |
| 4 | 0.209 | 0.052 | 258.2 |
| 5 | 0.791 | 0.033 | 255 |

## In these collections

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

## Other forms

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