# Midnight blue cyan gradient

Cool navy to light blue linear gradient with 32 colors: #081e4a, #09204e, #0a2354, #0b275c, #0d2c64, #0e316d, #0f3676, #103c7e, #114386, #114a8e, #125196, #14599e, #1561a6, #1569ae, #1572b5, #137bbc, #0d85c3, #028fc9, #0099cd, #00a4d2, #00aed6, #00b8d9, #0ec2dc, #23cadf, #34d2e1, #44d9e3, #53dfe5, #60e5e7, #6ceae9, #77eeeb, #7ff2ed, #85f5ee. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Cool navy to light blue linear gradient
- Seed: `kWPz-6sS0_ckwPhirjvcqW94`
- Page: https://grabient.com/kWPz-6sS0_ckwPhirjvcqW94?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 12.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 | `#081e4a` | `oklch(24.80% 0.0868 262.27)` | Oxford Blue | white, 16.2 to 1 |
| 2 | `#09204e` | `oklch(25.87% 0.0900 262.01)` | Subnautical | white, 15.7 to 1 |
| 3 | `#0a2354` | `oklch(27.25% 0.0945 261.76)` | Downriver | white, 15.1 to 1 |
| 4 | `#0b275c` | `oklch(28.90% 0.0998 261.47)` | Fibonacci Blue | white, 14.3 to 1 |
| 5 | `#0d2c64` | `oklch(30.75% 0.1056 261.09)` | Cool Black | white, 13.4 to 1 |
| 6 | `#0e316d` | `oklch(32.76% 0.1114 260.57)` | Atlantic Navy | white, 12.5 to 1 |
| 7 | `#0f3676` | `oklch(34.85% 0.1168 259.86)` | Azure Dragon | white, 11.5 to 1 |
| 8 | `#103c7e` | `oklch(36.99% 0.1214 258.92)` | Bracing Blue | white, 10.5 to 1 |
| 9 | `#114386` | `oklch(39.11% 0.1247 257.71)` | Pacific Depths | white, 9.6 to 1 |
| 10 | `#114a8e` | `oklch(41.33% 0.1271 256.35)` | Iron Blue | white, 8.8 to 1 |
| 11 | `#125196` | `oklch(43.66% 0.1289 254.86)` | Medium Electric Blue | white, 7.9 to 1 |
| 12 | `#14599e` | `oklch(46.09% 0.1302 253.18)` | Sonic Blue | white, 7.1 to 1 |
| 13 | `#1561a6` | `oklch(48.58% 0.1311 251.29)` | Directoire Blue | white, 6.3 to 1 |
| 14 | `#1569ae` | `oklch(51.12% 0.1317 249.12)` | Barbados Blue | white, 5.7 to 1 |
| 15 | `#1572b5` | `oklch(53.67% 0.1320 246.63)` | Cobalt Glaze | white, 5 to 1 |
| 16 | `#137bbc` | `oklch(56.22% 0.1322 243.77)` | Deep Cerulean | black, 4.6 to 1 |
| 17 | `#0d85c3` | `oklch(58.76% 0.1324 240.44)` | Water Raceway | black, 5.1 to 1 |
| 18 | `#028fc9` | `oklch(61.41% 0.1324 236.36)` | Parrotfish Blue | black, 5.7 to 1 |
| 19 | `#0099cd` | `oklch(64.14% 0.1304 231.72)` | Tomb Blue | black, 6.4 to 1 |
| 20 | `#00a4d2` | `oklch(66.89% 0.1288 226.73)` | Charybdis | black, 7.2 to 1 |
| 21 | `#00aed6` | `oklch(69.61% 0.1283 221.65)` | Battery Charged Blue | black, 8 to 1 |
| 22 | `#00b8d9` | `oklch(72.24% 0.1288 216.70)` | Maldives | black, 8.8 to 1 |
| 23 | `#0ec2dc` | `oklch(74.73% 0.1288 212.13)` | Caribbean Blue | black, 9.7 to 1 |
| 24 | `#23cadf` | `oklch(77.02% 0.1272 208.18)` | Picnic Day Sky | black, 10.5 to 1 |
| 25 | `#34d2e1` | `oklch(79.13% 0.1251 204.90)` | Aztec Turquoise | black, 11.4 to 1 |
| 26 | `#44d9e3` | `oklch(81.16% 0.1222 201.95)` | Neon Nazar | black, 12.2 to 1 |
| 27 | `#53dfe5` | `oklch(83.09% 0.1188 199.30)` | Neon Nazar | black, 13 to 1 |
| 28 | `#60e5e7` | `oklch(84.90% 0.1152 196.95)` | Near Moon | black, 13.8 to 1 |
| 29 | `#6ceae9` | `oklch(86.54% 0.1115 194.90)` | Blue Crystal Landscape | black, 14.5 to 1 |
| 30 | `#77eeeb` | `oklch(87.99% 0.1082 193.13)` | Dead Sea | black, 15.2 to 1 |
| 31 | `#7ff2ed` | `oklch(89.20% 0.1054 191.63)` | Bath Water | black, 15.8 to 1 |
| 32 | `#85f5ee` | `oklch(90.16% 0.1033 190.41)` | Turquoise Pearl | black, 16.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #081e4a 0.0%, #09204e 3.2%, #0a2354 6.5%, #0b275c 9.7%, #0d2c64 12.9%, #0e316d 16.1%, #0f3676 19.4%, #103c7e 22.6%, #114386 25.8%, #114a8e 29.0%, #125196 32.3%, #14599e 35.5%, #1561a6 38.7%, #1569ae 41.9%, #1572b5 45.2%, #137bbc 48.4%, #0d85c3 51.6%, #028fc9 54.8%, #0099cd 58.1%, #00a4d2 61.3%, #00aed6 64.5%, #00b8d9 67.7%, #0ec2dc 71.0%, #23cadf 74.2%, #34d2e1 77.4%, #44d9e3 80.6%, #53dfe5 83.9%, #60e5e7 87.1%, #6ceae9 90.3%, #77eeeb 93.5%, #7ff2ed 96.8%, #85f5ee 100.0%);
background: linear-gradient(180deg in oklch, oklch(24.80% 0.0868 262.27) 0.0%, oklch(25.87% 0.0900 262.01) 3.2%, oklch(27.25% 0.0945 261.76) 6.5%, oklch(28.90% 0.0998 261.47) 9.7%, oklch(30.75% 0.1056 261.09) 12.9%, oklch(32.76% 0.1114 260.57) 16.1%, oklch(34.85% 0.1168 259.86) 19.4%, oklch(36.99% 0.1214 258.92) 22.6%, oklch(39.11% 0.1247 257.71) 25.8%, oklch(41.33% 0.1271 256.35) 29.0%, oklch(43.66% 0.1289 254.86) 32.3%, oklch(46.09% 0.1302 253.18) 35.5%, oklch(48.58% 0.1311 251.29) 38.7%, oklch(51.12% 0.1317 249.12) 41.9%, oklch(53.67% 0.1320 246.63) 45.2%, oklch(56.22% 0.1322 243.77) 48.4%, oklch(58.76% 0.1324 240.44) 51.6%, oklch(61.41% 0.1324 236.36) 54.8%, oklch(64.14% 0.1304 231.72) 58.1%, oklch(66.89% 0.1288 226.73) 61.3%, oklch(69.61% 0.1283 221.65) 64.5%, oklch(72.24% 0.1288 216.70) 67.7%, oklch(74.73% 0.1288 212.13) 71.0%, oklch(77.02% 0.1272 208.18) 74.2%, oklch(79.13% 0.1251 204.90) 77.4%, oklch(81.16% 0.1222 201.95) 80.6%, oklch(83.09% 0.1188 199.30) 83.9%, oklch(84.90% 0.1152 196.95) 87.1%, oklch(86.54% 0.1115 194.90) 90.3%, oklch(87.99% 0.1082 193.13) 93.5%, oklch(89.20% 0.1054 191.63) 96.8%, oklch(90.16% 0.1033 190.41) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.248 | 0.087 | 262.3 |
| 2 | 0.386 | 0.124 | 258 |
| 3 | 0.575 | 0.132 | 242.2 |
| 4 | 0.776 | 0.127 | 207.3 |
| 5 | 0.902 | 0.103 | 190.4 |

## In these collections

- [Phone wallpaper gradients](https://grabient.com/phone-wallpaper-gradients)

## Other forms

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