# Navy, teal, blue and purple linear gradient

Navy, teal, blue and purple linear gradient with 32 colors: #021022, #021328, #031930, #031f3b, #032746, #033053, #013a5f, #00446b, #005176, #005e82, #006d8e, #007b9a, #0089a4, #0097af, #05a8b8, #19b9c1, #29c9c8, #30d6cf, #25ded6, #00dede, #00d4e4, #00c2e8, #00aced, #0892ff, #4e78ff, #6d63fe, #8854f9, #a249f2, #bc41e8, #d33bdd, #e635d0, #f32fc5. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYKyCzq58_EwnPJoMz0TFBKFTfx0`
- Page: https://grabient.com/kYKyCzq58_EwnPJoMz0TFBKFTfx0?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 11.4 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 | `#021022` | `oklch(16.93% 0.0441 252.42)` | Kuretake Black Manga | white, 19.1 to 1 |
| 2 | `#021328` | `oklch(18.65% 0.0486 251.88)` | Kuretake Black Manga | white, 18.5 to 1 |
| 3 | `#031930` | `oklch(20.94% 0.0550 251.33)` | Oxford by Night | white, 17.7 to 1 |
| 4 | `#031f3b` | `oklch(23.70% 0.0626 250.60)` | Midnight Mirage | white, 16.5 to 1 |
| 5 | `#032746` | `oklch(26.79% 0.0705 249.51)` | Rhapsody in Blue | white, 15.1 to 1 |
| 6 | `#033053` | `oklch(30.12% 0.0780 247.90)` | Indigo Black | white, 13.5 to 1 |
| 7 | `#013a5f` | `oklch(33.56% 0.0844 245.59)` | Poseidon | white, 11.9 to 1 |
| 8 | `#00446b` | `oklch(37.18% 0.0889 242.41)` | Lush Aqua | white, 10.2 to 1 |
| 9 | `#005176` | `oklch(41.19% 0.0916 238.21)` | Pirate’s Haven | white, 8.6 to 1 |
| 10 | `#005e82` | `oklch(45.45% 0.0943 233.37)` | Royal Blood | white, 7.1 to 1 |
| 11 | `#006d8e` | `oklch(49.82% 0.0974 228.22)` | Copacabana | white, 5.8 to 1 |
| 12 | `#007b9a` | `oklch(54.14% 0.1009 223.08)` | Sea Sight | white, 4.8 to 1 |
| 13 | `#0089a4` | `oklch(58.28% 0.1049 218.27)` | Capri Breeze | black, 5.1 to 1 |
| 14 | `#0097af` | `oklch(62.30% 0.1093 213.52)` | Aquarium Diver | black, 6 to 1 |
| 15 | `#05a8b8` | `oklch(66.87% 0.1141 207.20)` | Bluebird | black, 7.2 to 1 |
| 16 | `#19b9c1` | `oklch(71.59% 0.1182 200.39)` | Lago Blue | black, 8.7 to 1 |
| 17 | `#29c9c8` | `oklch(75.94% 0.1228 194.39)` | Mermaid Net | black, 10.2 to 1 |
| 18 | `#30d6cf` | `oklch(79.42% 0.1284 190.55)` | Turquoise Panic | black, 11.6 to 1 |
| 19 | `#25ded6` | `oklch(81.51% 0.1355 190.18)` | Fish Boy | black, 12.4 to 1 |
| 20 | `#00dede` | `oklch(81.66% 0.1394 194.65)` | Fish Boy | black, 12.5 to 1 |
| 21 | `#00d4e4` | `oklch(79.33% 0.1354 204.54)` | Aztec Turquoise | black, 11.5 to 1 |
| 22 | `#00c2e8` | `oklch(75.24% 0.1355 218.40)` | Blue Raspberry | black, 9.9 to 1 |
| 23 | `#00aced` | `oklch(70.32% 0.1483 234.57)` | Vivid Cerulean | black, 8.1 to 1 |
| 24 | `#0892ff` | `oklch(65.46% 0.1901 251.34)` | Clear Chill | black, 6.5 to 1 |
| 25 | `#4e78ff` | `oklch(61.60% 0.2065 267.08)` | Lightish Blue | black, 5.4 to 1 |
| 26 | `#6d63fe` | `oklch(59.63% 0.2224 280.18)` | Blue Genie | black, 4.8 to 1 |
| 27 | `#8854f9` | `oklch(59.43% 0.2317 292.26)` | Purple Honeycreeper | black, 4.6 to 1 |
| 28 | `#a249f2` | `oklch(60.37% 0.2401 304.16)` | Aconite Violet | black, 4.7 to 1 |
| 29 | `#bc41e8` | `oklch(61.99% 0.2475 315.39)` | Ultraviolet Onsible | black, 5 to 1 |
| 30 | `#d33bdd` | `oklch(63.86% 0.2539 325.45)` | Demonic Purple | black, 5.4 to 1 |
| 31 | `#e635d0` | `oklch(65.52% 0.2591 333.87)` | Leo Royal Fuchsia | black, 5.7 to 1 |
| 32 | `#f32fc5` | `oklch(66.54% 0.2632 340.13)` | Kriss Me Not Fuchsia | black, 6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #021022 0.0%, #021328 3.2%, #031930 6.5%, #031f3b 9.7%, #032746 12.9%, #033053 16.1%, #013a5f 19.4%, #00446b 22.6%, #005176 25.8%, #005e82 29.0%, #006d8e 32.3%, #007b9a 35.5%, #0089a4 38.7%, #0097af 41.9%, #05a8b8 45.2%, #19b9c1 48.4%, #29c9c8 51.6%, #30d6cf 54.8%, #25ded6 58.1%, #00dede 61.3%, #00d4e4 64.5%, #00c2e8 67.7%, #00aced 71.0%, #0892ff 74.2%, #4e78ff 77.4%, #6d63fe 80.6%, #8854f9 83.9%, #a249f2 87.1%, #bc41e8 90.3%, #d33bdd 93.5%, #e635d0 96.8%, #f32fc5 100.0%);
background: linear-gradient(135deg in oklch, oklch(16.93% 0.0441 252.42) 0.0%, oklch(18.65% 0.0486 251.88) 3.2%, oklch(20.94% 0.0550 251.33) 6.5%, oklch(23.70% 0.0626 250.60) 9.7%, oklch(26.79% 0.0705 249.51) 12.9%, oklch(30.12% 0.0780 247.90) 16.1%, oklch(33.56% 0.0844 245.59) 19.4%, oklch(37.18% 0.0889 242.41) 22.6%, oklch(41.19% 0.0916 238.21) 25.8%, oklch(45.45% 0.0943 233.37) 29.0%, oklch(49.82% 0.0974 228.22) 32.3%, oklch(54.14% 0.1009 223.08) 35.5%, oklch(58.28% 0.1049 218.27) 38.7%, oklch(62.30% 0.1093 213.52) 41.9%, oklch(66.87% 0.1141 207.20) 45.2%, oklch(71.59% 0.1182 200.39) 48.4%, oklch(75.94% 0.1228 194.39) 51.6%, oklch(79.42% 0.1284 190.55) 54.8%, oklch(81.51% 0.1355 190.18) 58.1%, oklch(81.66% 0.1394 194.65) 61.3%, oklch(79.33% 0.1354 204.54) 64.5%, oklch(75.24% 0.1355 218.40) 67.7%, oklch(70.32% 0.1483 234.57) 71.0%, oklch(65.46% 0.1901 251.34) 74.2%, oklch(61.60% 0.2065 267.08) 77.4%, oklch(59.63% 0.2224 280.18) 80.6%, oklch(59.43% 0.2317 292.26) 83.9%, oklch(60.37% 0.2401 304.16) 87.1%, oklch(61.99% 0.2475 315.39) 90.3%, oklch(63.86% 0.2539 325.45) 93.5%, oklch(65.52% 0.2591 333.87) 96.8%, oklch(66.54% 0.2632 340.13) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.169 | 0.044 | 252.4 |
| 2 | 0.343 | 0.085 | 245 |
| 3 | 0.598 | 0.107 | 216.5 |
| 4 | 0.819 | 0.141 | 192.2 |
| 5 | 0.598 | 0.22 | 277.8 |
| 6 | 0.665 | 0.263 | 340.1 |

## In these collections

- [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients)

## Other forms

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