# Teal into violet depths

Cool navy, teal and blue linear gradient with 48 colors: #031c27, #031e29, #03212c, #042430, #042834, #052c38, #05313c, #063641, #073a45, #083f4a, #09444e, #0a4852, #0b4d56, #0b515a, #0c565d, #0d5a61, #0e5f64, #0f6468, #10686b, #126d6e, #137072, #157475, #167778, #17797a, #187a7d, #1a7b80, #1c7b83, #207a85, #247987, #287789, #2c758a, #31728b, #356f8b, #386c8b, #3b698a, #3d678a, #3f6489, #416088, #425c86, #445884, #455382, #464e7f, #48497c, #494578, #4a4175, #4a3d72, #4b3a6f, #4b376c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Cool navy, teal and blue linear gradient
- Seed: `kWNhyjsJa9kMevm_GsXMSDGI`
- Page: https://grabient.com/kWNhyjsJa9kMevm_GsXMSDGI?steps=48
- Drawn as: linear gradient, 48 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 3.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 | `#031c27` | `oklch(21.26% 0.0386 229.92)` | Oxford by Night | white, 17.5 to 1 |
| 2 | `#031e29` | `oklch(22.11% 0.0397 228.90)` | Oxford by Night | white, 17.1 to 1 |
| 3 | `#03212c` | `oklch(23.18% 0.0412 227.59)` | Midnight Dreams | white, 16.6 to 1 |
| 4 | `#042430` | `oklch(24.44% 0.0429 226.04)` | Daintree | white, 16.1 to 1 |
| 5 | `#042834` | `oklch(25.86% 0.0449 224.29)` | Daintree | white, 15.4 to 1 |
| 6 | `#052c38` | `oklch(27.40% 0.0470 222.40)` | Black Chasm | white, 14.7 to 1 |
| 7 | `#05313c` | `oklch(29.02% 0.0492 220.42)` | Artist Blue | white, 13.9 to 1 |
| 8 | `#063641` | `oklch(30.69% 0.0515 218.41)` | Natural Indigo | white, 13.1 to 1 |
| 9 | `#073a45` | `oklch(32.37% 0.0538 216.40)` | Ghostlands Coal | white, 12.2 to 1 |
| 10 | `#083f4a` | `oklch(34.03% 0.0561 214.46)` | Ghostlands Coal | white, 11.5 to 1 |
| 11 | `#09444e` | `oklch(35.64% 0.0584 212.62)` | Cold and Dark | white, 10.7 to 1 |
| 12 | `#0a4852` | `oklch(37.14% 0.0605 210.96)` | Midnight Green | white, 10.1 to 1 |
| 13 | `#0b4d56` | `oklch(38.53% 0.0625 209.48)` | Watercolour Blue | white, 9.5 to 1 |
| 14 | `#0b515a` | `oklch(39.93% 0.0646 207.87)` | Blue Period | white, 8.9 to 1 |
| 15 | `#0c565d` | `oklch(41.39% 0.0668 206.03)` | Uncharted | white, 8.4 to 1 |
| 16 | `#0d5a61` | `oklch(42.88% 0.0691 204.08)` | Blue Emerald | white, 7.8 to 1 |
| 17 | `#0e5f64` | `oklch(44.37% 0.0715 202.11)` | Beau Vert | white, 7.3 to 1 |
| 18 | `#0f6468` | `oklch(45.84% 0.0738 200.23)` | Caribbean Swim | white, 6.9 to 1 |
| 19 | `#10686b` | `oklch(47.25% 0.0760 198.54)` | Aqua Obscura | white, 6.5 to 1 |
| 20 | `#126d6e` | `oklch(48.58% 0.0781 197.14)` | Caribbean Current | white, 6.1 to 1 |
| 21 | `#137072` | `oklch(49.79% 0.0800 196.13)` | Marine Wonder | white, 5.8 to 1 |
| 22 | `#157475` | `oklch(50.87% 0.0816 195.62)` | Skobeloff | white, 5.5 to 1 |
| 23 | `#167778` | `oklch(51.77% 0.0829 195.70)` | Prismarine | white, 5.3 to 1 |
| 24 | `#17797a` | `oklch(52.48% 0.0838 196.48)` | Tobernite | white, 5.1 to 1 |
| 25 | `#187a7d` | `oklch(52.97% 0.0842 198.06)` | Tobernite | white, 5 to 1 |
| 26 | `#1a7b80` | `oklch(53.27% 0.0841 200.45)` | Macquarie | white, 5 to 1 |
| 27 | `#1c7b83` | `oklch(53.39% 0.0834 203.56)` | Cote D’Azur | white, 5 to 1 |
| 28 | `#207a85` | `oklch(53.36% 0.0823 207.28)` | Blue Kelp | white, 5 to 1 |
| 29 | `#247987` | `oklch(53.20% 0.0810 211.50)` | Biscay Bay | white, 5 to 1 |
| 30 | `#287789` | `oklch(52.91% 0.0795 216.10)` | Thousand Herb | white, 5.1 to 1 |
| 31 | `#2c758a` | `oklch(52.53% 0.0779 220.98)` | Thousand Herb | white, 5.2 to 1 |
| 32 | `#31728b` | `oklch(52.07% 0.0764 226.03)` | Bengal Blue | white, 5.3 to 1 |
| 33 | `#356f8b` | `oklch(51.54% 0.0750 231.14)` | Astral | white, 5.5 to 1 |
| 34 | `#386c8b` | `oklch(50.96% 0.0739 236.20)` | Rainy Lake | white, 5.6 to 1 |
| 35 | `#3b698a` | `oklch(50.37% 0.0732 241.10)` | Team Spirit | white, 5.8 to 1 |
| 36 | `#3d678a` | `oklch(49.76% 0.0730 245.73)` | French Mirage Blue | white, 6 to 1 |
| 37 | `#3f6489` | `oklch(49.10% 0.0733 250.21)` | Winter Palace | white, 6.2 to 1 |
| 38 | `#416088` | `oklch(48.29% 0.0742 255.03)` | Functional Blue | white, 6.4 to 1 |
| 39 | `#425c86` | `oklch(47.34% 0.0754 260.09)` | Anchor Point | white, 6.7 to 1 |
| 40 | `#445884` | `oklch(46.29% 0.0768 265.29)` | True Navy | white, 7 to 1 |
| 41 | `#455382` | `oklch(45.18% 0.0785 270.53)` | Blue Jewel | white, 7.4 to 1 |
| 42 | `#464e7f` | `oklch(44.04% 0.0804 275.71)` | Altar of Heaven | white, 7.8 to 1 |
| 43 | `#48497c` | `oklch(42.91% 0.0823 280.73)` | Highlands Twilight | white, 8.3 to 1 |
| 44 | `#494578` | `oklch(41.82% 0.0841 285.47)` | Dramatist | white, 8.7 to 1 |
| 45 | `#4a4175` | `oklch(40.81% 0.0858 289.84)` | Deep Wisteria | white, 9.1 to 1 |
| 46 | `#4a3d72` | `oklch(39.91% 0.0874 293.73)` | Opera Blue | white, 9.5 to 1 |
| 47 | `#4b3a6f` | `oklch(39.15% 0.0887 297.04)` | Meteorite | white, 9.8 to 1 |
| 48 | `#4b376c` | `oklch(38.58% 0.0896 299.67)` | Petunia | white, 10.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #031c27 0.0%, #031e29 2.1%, #03212c 4.3%, #042430 6.4%, #042834 8.5%, #052c38 10.6%, #05313c 12.8%, #063641 14.9%, #073a45 17.0%, #083f4a 19.1%, #09444e 21.3%, #0a4852 23.4%, #0b4d56 25.5%, #0b515a 27.7%, #0c565d 29.8%, #0d5a61 31.9%, #0e5f64 34.0%, #0f6468 36.2%, #10686b 38.3%, #126d6e 40.4%, #137072 42.6%, #157475 44.7%, #167778 46.8%, #17797a 48.9%, #187a7d 51.1%, #1a7b80 53.2%, #1c7b83 55.3%, #207a85 57.4%, #247987 59.6%, #287789 61.7%, #2c758a 63.8%, #31728b 66.0%, #356f8b 68.1%, #386c8b 70.2%, #3b698a 72.3%, #3d678a 74.5%, #3f6489 76.6%, #416088 78.7%, #425c86 80.9%, #445884 83.0%, #455382 85.1%, #464e7f 87.2%, #48497c 89.4%, #494578 91.5%, #4a4175 93.6%, #4a3d72 95.7%, #4b3a6f 97.9%, #4b376c 100.0%);
background: linear-gradient(90deg in oklch, oklch(21.26% 0.0386 229.92) 0.0%, oklch(22.11% 0.0397 228.90) 2.1%, oklch(23.18% 0.0412 227.59) 4.3%, oklch(24.44% 0.0429 226.04) 6.4%, oklch(25.86% 0.0449 224.29) 8.5%, oklch(27.40% 0.0470 222.40) 10.6%, oklch(29.02% 0.0492 220.42) 12.8%, oklch(30.69% 0.0515 218.41) 14.9%, oklch(32.37% 0.0538 216.40) 17.0%, oklch(34.03% 0.0561 214.46) 19.1%, oklch(35.64% 0.0584 212.62) 21.3%, oklch(37.14% 0.0605 210.96) 23.4%, oklch(38.53% 0.0625 209.48) 25.5%, oklch(39.93% 0.0646 207.87) 27.7%, oklch(41.39% 0.0668 206.03) 29.8%, oklch(42.88% 0.0691 204.08) 31.9%, oklch(44.37% 0.0715 202.11) 34.0%, oklch(45.84% 0.0738 200.23) 36.2%, oklch(47.25% 0.0760 198.54) 38.3%, oklch(48.58% 0.0781 197.14) 40.4%, oklch(49.79% 0.0800 196.13) 42.6%, oklch(50.87% 0.0816 195.62) 44.7%, oklch(51.77% 0.0829 195.70) 46.8%, oklch(52.48% 0.0838 196.48) 48.9%, oklch(52.97% 0.0842 198.06) 51.1%, oklch(53.27% 0.0841 200.45) 53.2%, oklch(53.39% 0.0834 203.56) 55.3%, oklch(53.36% 0.0823 207.28) 57.4%, oklch(53.20% 0.0810 211.50) 59.6%, oklch(52.91% 0.0795 216.10) 61.7%, oklch(52.53% 0.0779 220.98) 63.8%, oklch(52.07% 0.0764 226.03) 66.0%, oklch(51.54% 0.0750 231.14) 68.1%, oklch(50.96% 0.0739 236.20) 70.2%, oklch(50.37% 0.0732 241.10) 72.3%, oklch(49.76% 0.0730 245.73) 74.5%, oklch(49.10% 0.0733 250.21) 76.6%, oklch(48.29% 0.0742 255.03) 78.7%, oklch(47.34% 0.0754 260.09) 80.9%, oklch(46.29% 0.0768 265.29) 83.0%, oklch(45.18% 0.0785 270.53) 85.1%, oklch(44.04% 0.0804 275.71) 87.2%, oklch(42.91% 0.0823 280.73) 89.4%, oklch(41.82% 0.0841 285.47) 91.5%, oklch(40.81% 0.0858 289.84) 93.6%, oklch(39.91% 0.0874 293.73) 95.7%, oklch(39.15% 0.0887 297.04) 97.9%, oklch(38.58% 0.0896 299.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.039 | 229.9 |
| 2 | 0.382 | 0.062 | 209.8 |
| 3 | 0.528 | 0.084 | 197.2 |
| 4 | 0.496 | 0.073 | 246.8 |
| 5 | 0.386 | 0.09 | 299.7 |

## In these collections

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

## Other forms

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