# Analogous navy, teal and light blue linear gradient

Analogous navy, teal and light blue linear gradient with 32 colors: #072f39, #09323b, #0a363f, #0c3b42, #0e4047, #11464b, #144c50, #185355, #1d5959, #22605e, #276663, #2c6c67, #32736c, #377972, #3d8077, #43877d, #498e83, #4f9589, #569c8f, #5da395, #64aa9b, #6bb0a1, #73b8a8, #7cbfb0, #86c7b7, #8fcfbf, #99d6c7, #a2decf, #abe4d6, #b2eadc, #b9f0e2, #bef4e6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUSCGbPJe8lkbPr1lT_A`
- Page: https://grabient.com/kUSCGbPJe8lkbPr1lT_A?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark to light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.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 | `#072f39` | `oklch(28.35% 0.0455 217.97)` | Black Chasm | white, 14.2 to 1 |
| 2 | `#09323b` | `oklch(29.44% 0.0466 216.26)` | Artist Blue | white, 13.7 to 1 |
| 3 | `#0a363f` | `oklch(30.82% 0.0481 213.97)` | Firmament Blue | white, 13 to 1 |
| 4 | `#0c3b42` | `oklch(32.44% 0.0500 211.23)` | Ghostlands Coal | white, 12.2 to 1 |
| 5 | `#0e4047` | `oklch(34.27% 0.0520 208.17)` | Sunken Harbour | white, 11.3 to 1 |
| 6 | `#11464b` | `oklch(36.25% 0.0541 204.92)` | Incubi Darkness | white, 10.5 to 1 |
| 7 | `#144c50` | `oklch(38.34% 0.0564 201.59)` | Port Malmesbury | white, 9.6 to 1 |
| 8 | `#185355` | `oklch(40.50% 0.0586 198.32)` | Ramsons | white, 8.7 to 1 |
| 9 | `#1d5959` | `oklch(42.69% 0.0607 195.23)` | Blue Emerald | white, 7.9 to 1 |
| 10 | `#22605e` | `oklch(44.85% 0.0626 192.45)` | Verdant Forest | white, 7.2 to 1 |
| 11 | `#276663` | `oklch(46.96% 0.0643 190.10)` | Alliance | white, 6.6 to 1 |
| 12 | `#2c6c67` | `oklch(49.00% 0.0657 188.23)` | North Sea | white, 6 to 1 |
| 13 | `#32736c` | `oklch(51.08% 0.0672 186.61)` | Imperial Dynasty | white, 5.5 to 1 |
| 14 | `#377972` | `oklch(53.21% 0.0686 185.20)` | Myrtle Green | white, 5 to 1 |
| 15 | `#3d8077` | `oklch(55.37% 0.0700 183.97)` | Copper Mineral Green | white, 4.6 to 1 |
| 16 | `#43877d` | `oklch(57.56% 0.0712 182.91)` | Carlisle | black, 4.9 to 1 |
| 17 | `#498e83` | `oklch(59.77% 0.0724 181.99)` | Lochinvar | black, 5.4 to 1 |
| 18 | `#4f9589` | `oklch(61.99% 0.0733 181.19)` | Martian Cerulean | black, 5.9 to 1 |
| 19 | `#569c8f` | `oklch(64.21% 0.0740 180.48)` | Petrol Green | black, 6.5 to 1 |
| 20 | `#5da395` | `oklch(66.42% 0.0744 179.84)` | Polished Pine | black, 7.1 to 1 |
| 21 | `#64aa9b` | `oklch(68.62% 0.0745 179.25)` | Calmness | black, 7.7 to 1 |
| 22 | `#6bb0a1` | `oklch(70.81% 0.0743 178.69)` | Turquoise Fantasies | black, 8.3 to 1 |
| 23 | `#73b8a8` | `oklch(73.14% 0.0734 178.26)` | Turtle Lake | black, 9.1 to 1 |
| 24 | `#7cbfb0` | `oklch(75.59% 0.0721 177.97)` | Mintage | black, 9.9 to 1 |
| 25 | `#86c7b7` | `oklch(78.11% 0.0704 177.79)` | Aquastone | black, 10.8 to 1 |
| 26 | `#8fcfbf` | `oklch(80.64% 0.0685 177.70)` | Wintermint | black, 11.8 to 1 |
| 27 | `#99d6c7` | `oklch(83.11% 0.0664 177.68)` | Aqua Glow | black, 12.8 to 1 |
| 28 | `#a2decf` | `oklch(85.46% 0.0643 177.71)` | Sparkling Mint | black, 13.8 to 1 |
| 29 | `#abe4d6` | `oklch(87.65% 0.0622 177.76)` | Ice Cube | black, 14.8 to 1 |
| 30 | `#b2eadc` | `oklch(89.59% 0.0604 177.81)` | Gentle Giant | black, 15.7 to 1 |
| 31 | `#b9f0e2` | `oklch(91.23% 0.0589 177.83)` | Fresh Breeze | black, 16.5 to 1 |
| 32 | `#bef4e6` | `oklch(92.52% 0.0579 177.81)` | Shallow End | black, 17.2 to 1 |

## CSS

```css
background: linear-gradient(225deg, #072f39 0.0%, #09323b 3.2%, #0a363f 6.5%, #0c3b42 9.7%, #0e4047 12.9%, #11464b 16.1%, #144c50 19.4%, #185355 22.6%, #1d5959 25.8%, #22605e 29.0%, #276663 32.3%, #2c6c67 35.5%, #32736c 38.7%, #377972 41.9%, #3d8077 45.2%, #43877d 48.4%, #498e83 51.6%, #4f9589 54.8%, #569c8f 58.1%, #5da395 61.3%, #64aa9b 64.5%, #6bb0a1 67.7%, #73b8a8 71.0%, #7cbfb0 74.2%, #86c7b7 77.4%, #8fcfbf 80.6%, #99d6c7 83.9%, #a2decf 87.1%, #abe4d6 90.3%, #b2eadc 93.5%, #b9f0e2 96.8%, #bef4e6 100.0%);
background: linear-gradient(225deg in oklch, oklch(28.35% 0.0455 217.97) 0.0%, oklch(29.44% 0.0466 216.26) 3.2%, oklch(30.82% 0.0481 213.97) 6.5%, oklch(32.44% 0.0500 211.23) 9.7%, oklch(34.27% 0.0520 208.17) 12.9%, oklch(36.25% 0.0541 204.92) 16.1%, oklch(38.34% 0.0564 201.59) 19.4%, oklch(40.50% 0.0586 198.32) 22.6%, oklch(42.69% 0.0607 195.23) 25.8%, oklch(44.85% 0.0626 192.45) 29.0%, oklch(46.96% 0.0643 190.10) 32.3%, oklch(49.00% 0.0657 188.23) 35.5%, oklch(51.08% 0.0672 186.61) 38.7%, oklch(53.21% 0.0686 185.20) 41.9%, oklch(55.37% 0.0700 183.97) 45.2%, oklch(57.56% 0.0712 182.91) 48.4%, oklch(59.77% 0.0724 181.99) 51.6%, oklch(61.99% 0.0733 181.19) 54.8%, oklch(64.21% 0.0740 180.48) 58.1%, oklch(66.42% 0.0744 179.84) 61.3%, oklch(68.62% 0.0745 179.25) 64.5%, oklch(70.81% 0.0743 178.69) 67.7%, oklch(73.14% 0.0734 178.26) 71.0%, oklch(75.59% 0.0721 177.97) 74.2%, oklch(78.11% 0.0704 177.79) 77.4%, oklch(80.64% 0.0685 177.70) 80.6%, oklch(83.11% 0.0664 177.68) 83.9%, oklch(85.46% 0.0643 177.71) 87.1%, oklch(87.65% 0.0622 177.76) 90.3%, oklch(89.59% 0.0604 177.81) 93.5%, oklch(91.23% 0.0589 177.83) 96.8%, oklch(92.52% 0.0579 177.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.045 | 218 |
| 2 | 0.476 | 0.065 | 189.4 |
| 3 | 0.701 | 0.074 | 178.9 |
| 4 | 0.925 | 0.058 | 177.8 |

## In these collections

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

## Other forms

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