# Vivid navy, blue, cyan and light blue linear gradient

Vivid navy, blue, cyan and light blue linear gradient with 32 colors: #00004a, #010054, #010162, #010371, #020882, #021193, #021aa3, #0224b2, #042fc1, #073ad0, #0b46df, #0e52eb, #0c5ff6, #066bfd, #0c78ff, #1685ff, #1e90ff, #2a9cfd, #33a7fd, #38b2fe, #3abfff, #41ccff, #49d9ff, #51e4ff, #5aeeff, #65f5ff, #70faff, #7afdff, #84feff, #8cfeff, #92feff, #97ffff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYL2C8LM0_8bVv5buD3ca27HclPy`
- Page: https://grabient.com/kYL2C8LM0_8bVv5buD3ca27HclPy?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.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 | `#00004a` | `oklch(18.57% 0.1282 264.40)` | Endless Galaxy | white, 19 to 1 |
| 2 | `#010054` | `oklch(20.24% 0.1398 264.43)` | Alucard’s Night | white, 18.5 to 1 |
| 3 | `#010162` | `oklch(22.48% 0.1541 264.49)` | Alone in the Dark | white, 17.8 to 1 |
| 4 | `#010371` | `oklch(25.20% 0.1692 264.57)` | Dark Royalty | white, 16.7 to 1 |
| 5 | `#020882` | `oklch(28.21% 0.1848 264.61)` | Navy Blue | white, 15.4 to 1 |
| 6 | `#021193` | `oklch(31.34% 0.1991 264.57)` | Cadmium Blue | white, 13.9 to 1 |
| 7 | `#021aa3` | `oklch(34.44% 0.2104 264.42)` | Dark Galaxy | white, 12.4 to 1 |
| 8 | `#0224b2` | `oklch(37.52% 0.2188 264.23)` | Underwater Falling | white, 11 to 1 |
| 9 | `#042fc1` | `oklch(40.81% 0.2263 264.13)` | Blue Screen of Death | white, 9.6 to 1 |
| 10 | `#073ad0` | `oklch(44.24% 0.2325 263.99)` | Sapphire Glitter | white, 8.3 to 1 |
| 11 | `#0b46df` | `oklch(47.69% 0.2368 263.65)` | Merchant Marine Blue | white, 7.1 to 1 |
| 12 | `#0e52eb` | `oklch(51.08% 0.2385 262.98)` | Opulent Blue | white, 6.1 to 1 |
| 13 | `#0c5ff6` | `oklch(54.29% 0.2372 261.83)` | Kyanite | white, 5.2 to 1 |
| 14 | `#066bfd` | `oklch(57.26% 0.2317 260.15)` | Heroic Blue | white, 4.6 to 1 |
| 15 | `#0c78ff` | `oklch(60.04% 0.2187 258.19)` | Hadfield Blue | black, 5.1 to 1 |
| 16 | `#1685ff` | `oklch(62.68% 0.2037 255.90)` | Bubble Bobble P2 | black, 5.8 to 1 |
| 17 | `#1e90ff` | `oklch(65.26% 0.1898 253.17)` | Clear Chill | black, 6.5 to 1 |
| 18 | `#2a9cfd` | `oklch(67.82% 0.1742 249.89)` | Brilliant Azure | black, 7.2 to 1 |
| 19 | `#33a7fd` | `oklch(70.43% 0.1606 245.96)` | Xed | black, 8 to 1 |
| 20 | `#38b2fe` | `oklch(73.17% 0.1510 241.17)` | Adamantine Blue | black, 8.9 to 1 |
| 21 | `#3abfff` | `oklch(76.16% 0.1437 234.81)` | Megaman | black, 10 to 1 |
| 22 | `#41ccff` | `oklch(79.29% 0.1357 227.37)` | Thor’s Thunder | black, 11.3 to 1 |
| 23 | `#49d9ff` | `oklch(82.38% 0.1303 219.56)` | Berta Blue | black, 12.6 to 1 |
| 24 | `#51e4ff` | `oklch(85.27% 0.1272 212.13)` | Shimmering Expanse Cyan | black, 13.9 to 1 |
| 25 | `#5aeeff` | `oklch(87.76% 0.1257 205.80)` | Bioluminescence | black, 15.1 to 1 |
| 26 | `#65f5ff` | `oklch(89.71% 0.1237 201.29)` | Frozen Turquoise | black, 16.1 to 1 |
| 27 | `#70faff` | `oklch(91.09% 0.1201 198.50)` | Ancient Ice | black, 16.8 to 1 |
| 28 | `#7afdff` | `oklch(92.04% 0.1153 196.94)` | Ancient Ice | black, 17.2 to 1 |
| 29 | `#84feff` | `oklch(92.67% 0.1099 196.23)` | Glitter Shower | black, 17.5 to 1 |
| 30 | `#8cfeff` | `oklch(93.08% 0.1047 196.02)` | Glitter Shower | black, 17.7 to 1 |
| 31 | `#92feff` | `oklch(93.39% 0.1003 195.96)` | Glitchy Shader Blue | black, 17.9 to 1 |
| 32 | `#97ffff` | `oklch(93.70% 0.0970 195.68)` | Glitchy Shader Blue | black, 18 to 1 |

## CSS

```css
background: linear-gradient(180deg, #00004a 0.0%, #010054 3.2%, #010162 6.5%, #010371 9.7%, #020882 12.9%, #021193 16.1%, #021aa3 19.4%, #0224b2 22.6%, #042fc1 25.8%, #073ad0 29.0%, #0b46df 32.3%, #0e52eb 35.5%, #0c5ff6 38.7%, #066bfd 41.9%, #0c78ff 45.2%, #1685ff 48.4%, #1e90ff 51.6%, #2a9cfd 54.8%, #33a7fd 58.1%, #38b2fe 61.3%, #3abfff 64.5%, #41ccff 67.7%, #49d9ff 71.0%, #51e4ff 74.2%, #5aeeff 77.4%, #65f5ff 80.6%, #70faff 83.9%, #7afdff 87.1%, #84feff 90.3%, #8cfeff 93.5%, #92feff 96.8%, #97ffff 100.0%);
background: linear-gradient(180deg in oklch, oklch(18.57% 0.1282 264.40) 0.0%, oklch(20.24% 0.1398 264.43) 3.2%, oklch(22.48% 0.1541 264.49) 6.5%, oklch(25.20% 0.1692 264.57) 9.7%, oklch(28.21% 0.1848 264.61) 12.9%, oklch(31.34% 0.1991 264.57) 16.1%, oklch(34.44% 0.2104 264.42) 19.4%, oklch(37.52% 0.2188 264.23) 22.6%, oklch(40.81% 0.2263 264.13) 25.8%, oklch(44.24% 0.2325 263.99) 29.0%, oklch(47.69% 0.2368 263.65) 32.3%, oklch(51.08% 0.2385 262.98) 35.5%, oklch(54.29% 0.2372 261.83) 38.7%, oklch(57.26% 0.2317 260.15) 41.9%, oklch(60.04% 0.2187 258.19) 45.2%, oklch(62.68% 0.2037 255.90) 48.4%, oklch(65.26% 0.1898 253.17) 51.6%, oklch(67.82% 0.1742 249.89) 54.8%, oklch(70.43% 0.1606 245.96) 58.1%, oklch(73.17% 0.1510 241.17) 61.3%, oklch(76.16% 0.1437 234.81) 64.5%, oklch(79.29% 0.1357 227.37) 67.7%, oklch(82.38% 0.1303 219.56) 71.0%, oklch(85.27% 0.1272 212.13) 74.2%, oklch(87.76% 0.1257 205.80) 77.4%, oklch(89.71% 0.1237 201.29) 80.6%, oklch(91.09% 0.1201 198.50) 83.9%, oklch(92.04% 0.1153 196.94) 87.1%, oklch(92.67% 0.1099 196.23) 90.3%, oklch(93.08% 0.1047 196.02) 93.5%, oklch(93.39% 0.1003 195.96) 96.8%, oklch(93.70% 0.0970 195.68) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.185 | 0.132 | 264.4 |
| 2 | 0.35 | 0.212 | 264.4 |
| 3 | 0.555 | 0.236 | 261.2 |
| 4 | 0.72 | 0.154 | 243.2 |
| 5 | 0.894 | 0.125 | 202 |
| 6 | 0.937 | 0.102 | 195.7 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)
- [Navy and teal gradients](https://grabient.com/navy-and-teal-gradients)
- [Beach gradients](https://grabient.com/beach-gradients)
- [Coastal gradients](https://grabient.com/coastal-gradients)

## Other forms

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