# Vivid duotone navy to cyan linear gradient

Vivid duotone navy to cyan linear gradient with 32 colors: #00104a, #000f50, #000064, #01006b, #020371, #000e78, #002175, #002d7c, #003984, #00468d, #065392, #056099, #006d9e, #007ba3, #0089a7, #0096ac, #0ba1b1, #0cadb6, #05b9bb, #00c3bf, #00cec3, #02d7c6, #0ee1ca, #15eace, #1bf2d3, #20f8d7, #27fdda, #37ffdd, #43ffe0, #40ffe3, #3dffe6, #40fee7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaNmy7Iz3ADksPjQp7tY7I9HE6PvytkCA`
- Page: https://grabient.com/kaNmy7Iz3ADksPjQp7tY7I9HE6PvytkCA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 14.1 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 | `#00104a` | `oklch(21.28% 0.1095 263.20)` | Kantor Blue | white, 17.9 to 1 |
| 2 | `#000f50` | `oklch(21.93% 0.1178 263.55)` | Interstellar Blue | white, 17.7 to 1 |
| 3 | `#000064` | `oklch(22.78% 0.1578 264.05)` | Alone in the Dark | white, 17.7 to 1 |
| 4 | `#01006b` | `oklch(23.85% 0.1643 264.66)` | Alone in the Dark | white, 17.3 to 1 |
| 5 | `#020371` | `oklch(25.27% 0.1691 264.84)` | Deep Blue | white, 16.7 to 1 |
| 6 | `#000e78` | `oklch(27.19% 0.1699 264.23)` | Major Tom | white, 15.7 to 1 |
| 7 | `#002175` | `oklch(29.73% 0.1482 262.89)` | Long-Haul Flight | white, 14.2 to 1 |
| 8 | `#002d7c` | `oklch(32.85% 0.1420 261.00)` | Below the Surface | white, 12.6 to 1 |
| 9 | `#003984` | `oklch(36.37% 0.1377 258.50)` | Magnus Blue | white, 10.9 to 1 |
| 10 | `#00468d` | `oklch(40.06% 0.1328 255.20)` | Congress Blue | white, 9.3 to 1 |
| 11 | `#065392` | `oklch(43.71% 0.1235 250.90)` | Ocean | white, 7.8 to 1 |
| 12 | `#056099` | `oklch(47.24% 0.1176 245.27)` | Hyper Blue | white, 6.7 to 1 |
| 13 | `#006d9e` | `oklch(50.89% 0.1127 237.92)` | Disarm | white, 5.6 to 1 |
| 14 | `#007ba3` | `oklch(54.59% 0.1083 229.58)` | Bleu Ciel | white, 4.8 to 1 |
| 15 | `#0089a7` | `oklch(58.24% 0.1069 221.14)` | Capri Breeze | black, 5.1 to 1 |
| 16 | `#0096ac` | `oklch(61.73% 0.1082 213.44)` | Aquarium Diver | black, 5.9 to 1 |
| 17 | `#0ba1b1` | `oklch(64.99% 0.1101 207.13)` | Breaking Wave | black, 6.7 to 1 |
| 18 | `#0cadb6` | `oklch(68.12% 0.1144 201.52)` | Placid Sea | black, 7.6 to 1 |
| 19 | `#05b9bb` | `oklch(71.11% 0.1206 196.46)` | Caicos Turquoise | black, 8.6 to 1 |
| 20 | `#00c3bf` | `oklch(73.97% 0.1270 191.97)` | Cala Benirrás Blue | black, 9.6 to 1 |
| 21 | `#00cec3` | `oklch(76.66% 0.1333 188.08)` | Exquisite Turquoise | black, 10.5 to 1 |
| 22 | `#02d7c6` | `oklch(79.17% 0.1395 184.81)` | Turquoise Panic | black, 11.5 to 1 |
| 23 | `#0ee1ca` | `oklch(81.63% 0.1448 182.18)` | Ice Climber | black, 12.6 to 1 |
| 24 | `#15eace` | `oklch(83.97% 0.1501 180.16)` | Fake Jade | black, 13.6 to 1 |
| 25 | `#1bf2d3` | `oklch(86.08% 0.1547 178.71)` | Frozen Boubble | black, 14.6 to 1 |
| 26 | `#20f8d7` | `oklch(87.85% 0.1582 177.78)` | Lamiaceae | black, 15.4 to 1 |
| 27 | `#27fdda` | `oklch(89.16% 0.1600 177.34)` | Lamiaceae | black, 16.1 to 1 |
| 28 | `#37ffdd` | `oklch(89.90% 0.1567 177.74)` | Aurichalcite | black, 16.5 to 1 |
| 29 | `#43ffe0` | `oklch(90.20% 0.1515 178.89)` | Aurichalcite | black, 16.6 to 1 |
| 30 | `#40ffe3` | `oklch(90.22% 0.1513 180.37)` | Aurichalcite | black, 16.6 to 1 |
| 31 | `#3dffe6` | `oklch(90.15% 0.1508 181.76)` | Vibrant Mint | black, 16.5 to 1 |
| 32 | `#40fee7` | `oklch(90.16% 0.1488 182.66)` | Ice Temple | black, 16.5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #00104a 0.0%, #000f50 3.2%, #000064 6.5%, #01006b 9.7%, #020371 12.9%, #000e78 16.1%, #002175 19.4%, #002d7c 22.6%, #003984 25.8%, #00468d 29.0%, #065392 32.3%, #056099 35.5%, #006d9e 38.7%, #007ba3 41.9%, #0089a7 45.2%, #0096ac 48.4%, #0ba1b1 51.6%, #0cadb6 54.8%, #05b9bb 58.1%, #00c3bf 61.3%, #00cec3 64.5%, #02d7c6 67.7%, #0ee1ca 71.0%, #15eace 74.2%, #1bf2d3 77.4%, #20f8d7 80.6%, #27fdda 83.9%, #37ffdd 87.1%, #43ffe0 90.3%, #40ffe3 93.5%, #3dffe6 96.8%, #40fee7 100.0%);
background: linear-gradient(135deg in oklch, oklch(21.28% 0.1095 263.20) 0.0%, oklch(21.93% 0.1178 263.55) 3.2%, oklch(22.78% 0.1578 264.05) 6.5%, oklch(23.85% 0.1643 264.66) 9.7%, oklch(25.27% 0.1691 264.84) 12.9%, oklch(27.19% 0.1699 264.23) 16.1%, oklch(29.73% 0.1482 262.89) 19.4%, oklch(32.85% 0.1420 261.00) 22.6%, oklch(36.37% 0.1377 258.50) 25.8%, oklch(40.06% 0.1328 255.20) 29.0%, oklch(43.71% 0.1235 250.90) 32.3%, oklch(47.24% 0.1176 245.27) 35.5%, oklch(50.89% 0.1127 237.92) 38.7%, oklch(54.59% 0.1083 229.58) 41.9%, oklch(58.24% 0.1069 221.14) 45.2%, oklch(61.73% 0.1082 213.44) 48.4%, oklch(64.99% 0.1101 207.13) 51.6%, oklch(68.12% 0.1144 201.52) 54.8%, oklch(71.11% 0.1206 196.46) 58.1%, oklch(73.97% 0.1270 191.97) 61.3%, oklch(76.66% 0.1333 188.08) 64.5%, oklch(79.17% 0.1395 184.81) 67.7%, oklch(81.63% 0.1448 182.18) 71.0%, oklch(83.97% 0.1501 180.16) 74.2%, oklch(86.08% 0.1547 178.71) 77.4%, oklch(87.85% 0.1582 177.78) 80.6%, oklch(89.16% 0.1600 177.34) 83.9%, oklch(89.90% 0.1567 177.74) 87.1%, oklch(90.20% 0.1515 178.89) 90.3%, oklch(90.22% 0.1513 180.37) 93.5%, oklch(90.15% 0.1508 181.76) 96.8%, oklch(90.16% 0.1488 182.66) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.149 | 263 |
| 2 | 0.276 | 0.169 | 264 |
| 3 | 0.449 | 0.121 | 249.2 |
| 4 | 0.634 | 0.109 | 210.1 |
| 5 | 0.783 | 0.138 | 185.8 |
| 6 | 0.89 | 0.16 | 177.4 |
| 7 | 0.902 | 0.149 | 182.7 |

## In these collections

- [Cyan gradients](https://grabient.com/cyan-gradients)

## Other forms

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