# Cool navy, blue and cyan linear swatches

Cool navy, blue and cyan linear swatches with 32 colors: #0c0632, #0e0638, #100740, #11074a, #130855, #150961, #160b6c, #170f78, #171384, #171890, #151f9d, #1226aa, #0e2eb6, #0837c1, #0740cd, #0a49d8, #0e53e2, #0e5eec, #0769f4, #0077f7, #0085f7, #0093f7, #00a0f9, #00acfa, #06b8fb, #19c4fa, #1ccff9, #1edbf7, #27e6f4, #35f0ef, #46f7ea, #54fde6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYLDzHojg_DPOPvJ0D84LU8fKzOm`
- Page: https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm?style=linearSwatches&steps=32
- Drawn as: linear swatches, 32 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.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 | `#0c0632` | `oklch(17.32% 0.0827 280.55)` | Cosmic Void | white, 19.2 to 1 |
| 2 | `#0e0638` | `oklch(18.26% 0.0903 279.78)` | Congressional Navy | white, 19 to 1 |
| 3 | `#100740` | `oklch(19.52% 0.1009 278.75)` | Floppy Disk | white, 18.6 to 1 |
| 4 | `#11074a` | `oklch(21.02% 0.1134 277.51)` | Silent Twilight | white, 18.1 to 1 |
| 5 | `#130855` | `oklch(22.72% 0.1268 276.15)` | Scoop of Dark Matter | white, 17.6 to 1 |
| 6 | `#150961` | `oklch(24.53% 0.1401 274.76)` | Underground Stream | white, 16.9 to 1 |
| 7 | `#160b6c` | `oklch(26.40% 0.1521 273.41)` | Dying Storm Blue | white, 16.1 to 1 |
| 8 | `#170f78` | `oklch(28.31% 0.1631 272.10)` | Prunelle | white, 15.2 to 1 |
| 9 | `#171384` | `oklch(30.35% 0.1744 270.71)` | Galactic Cruise | white, 14.3 to 1 |
| 10 | `#171890` | `oklch(32.50% 0.1855 269.29)` | Royal | white, 13.3 to 1 |
| 11 | `#151f9d` | `oklch(34.76% 0.1960 267.86)` | Deepsea Kraken | white, 12.2 to 1 |
| 12 | `#1226aa` | `oklch(37.11% 0.2052 266.48)` | City Hunter Blue | white, 11.1 to 1 |
| 13 | `#0e2eb6` | `oklch(39.55% 0.2126 265.18)` | Blue Screen of Death | white, 10.1 to 1 |
| 14 | `#0837c1` | `oklch(42.08% 0.2180 264.10)` | Blue Screen of Death | white, 9 to 1 |
| 15 | `#0740cd` | `oklch(44.75% 0.2223 263.48)` | Third Eye Chakra | white, 8 to 1 |
| 16 | `#0a49d8` | `oklch(47.52% 0.2252 263.07)` | Merchant Marine Blue | white, 7.1 to 1 |
| 17 | `#0e53e2` | `oklch(50.37% 0.2266 262.55)` | Frosted Blueberries | white, 6.2 to 1 |
| 18 | `#0e5eec` | `oklch(53.26% 0.2261 261.59)` | Azul | white, 5.4 to 1 |
| 19 | `#0769f4` | `oklch(56.15% 0.2233 259.88)` | Epic Blue | white, 4.8 to 1 |
| 20 | `#0077f7` | `oklch(59.03% 0.2108 257.15)` | Blue Darknut | black, 4.9 to 1 |
| 21 | `#0085f7` | `oklch(61.99% 0.1947 253.59)` | Bubble Bobble P2 | black, 5.6 to 1 |
| 22 | `#0093f7` | `oklch(65.01% 0.1811 249.38)` | Starfleet Blue | black, 6.4 to 1 |
| 23 | `#00a0f9` | `oklch(68.03% 0.1698 244.59)` | Fresh Blue of Bel Air | black, 7.3 to 1 |
| 24 | `#00acfa` | `oklch(70.99% 0.1607 239.30)` | Krishna Blue | black, 8.3 to 1 |
| 25 | `#06b8fb` | `oklch(73.83% 0.1529 233.58)` | Blue Bolt | black, 9.2 to 1 |
| 26 | `#19c4fa` | `oklch(76.51% 0.1448 227.50)` | Shovel Knight | black, 10.2 to 1 |
| 27 | `#1ccff9` | `oklch(79.19% 0.1406 220.13)` | Tropical Turquoise | black, 11.3 to 1 |
| 28 | `#1edbf7` | `oklch(81.88% 0.1388 211.63)` | Vaporwave Blue | black, 12.5 to 1 |
| 29 | `#27e6f4` | `oklch(84.45% 0.1387 202.79)` | Whimsical Blue | black, 13.6 to 1 |
| 30 | `#35f0ef` | `oklch(86.77% 0.1395 194.42)` | Aqua Cyan | black, 14.8 to 1 |
| 31 | `#46f7ea` | `oklch(88.72% 0.1404 187.32)` | Bright Aqua | black, 15.7 to 1 |
| 32 | `#54fde6` | `oklch(90.16% 0.1406 182.27)` | Icy Life | black, 16.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0c0632 0.000% 3.125%, #0e0638 3.125% 6.250%, #100740 6.250% 9.375%, #11074a 9.375% 12.500%, #130855 12.500% 15.625%, #150961 15.625% 18.750%, #160b6c 18.750% 21.875%, #170f78 21.875% 25.000%, #171384 25.000% 28.125%, #171890 28.125% 31.250%, #151f9d 31.250% 34.375%, #1226aa 34.375% 37.500%, #0e2eb6 37.500% 40.625%, #0837c1 40.625% 43.750%, #0740cd 43.750% 46.875%, #0a49d8 46.875% 50.000%, #0e53e2 50.000% 53.125%, #0e5eec 53.125% 56.250%, #0769f4 56.250% 59.375%, #0077f7 59.375% 62.500%, #0085f7 62.500% 65.625%, #0093f7 65.625% 68.750%, #00a0f9 68.750% 71.875%, #00acfa 71.875% 75.000%, #06b8fb 75.000% 78.125%, #19c4fa 78.125% 81.250%, #1ccff9 81.250% 84.375%, #1edbf7 84.375% 87.500%, #27e6f4 87.500% 90.625%, #35f0ef 90.625% 93.750%, #46f7ea 93.750% 96.875%, #54fde6 96.875% 100.000%);
background: linear-gradient(90deg, oklch(17.32% 0.0827 280.55) 0.000% 3.125%, oklch(18.26% 0.0903 279.78) 3.125% 6.250%, oklch(19.52% 0.1009 278.75) 6.250% 9.375%, oklch(21.02% 0.1134 277.51) 9.375% 12.500%, oklch(22.72% 0.1268 276.15) 12.500% 15.625%, oklch(24.53% 0.1401 274.76) 15.625% 18.750%, oklch(26.40% 0.1521 273.41) 18.750% 21.875%, oklch(28.31% 0.1631 272.10) 21.875% 25.000%, oklch(30.35% 0.1744 270.71) 25.000% 28.125%, oklch(32.50% 0.1855 269.29) 28.125% 31.250%, oklch(34.76% 0.1960 267.86) 31.250% 34.375%, oklch(37.11% 0.2052 266.48) 34.375% 37.500%, oklch(39.55% 0.2126 265.18) 37.500% 40.625%, oklch(42.08% 0.2180 264.10) 40.625% 43.750%, oklch(44.75% 0.2223 263.48) 43.750% 46.875%, oklch(47.52% 0.2252 263.07) 46.875% 50.000%, oklch(50.37% 0.2266 262.55) 50.000% 53.125%, oklch(53.26% 0.2261 261.59) 53.125% 56.250%, oklch(56.15% 0.2233 259.88) 56.250% 59.375%, oklch(59.03% 0.2108 257.15) 59.375% 62.500%, oklch(61.99% 0.1947 253.59) 62.500% 65.625%, oklch(65.01% 0.1811 249.38) 65.625% 68.750%, oklch(68.03% 0.1698 244.59) 68.750% 71.875%, oklch(70.99% 0.1607 239.30) 71.875% 75.000%, oklch(73.83% 0.1529 233.58) 75.000% 78.125%, oklch(76.51% 0.1448 227.50) 78.125% 81.250%, oklch(79.19% 0.1406 220.13) 81.250% 84.375%, oklch(81.88% 0.1388 211.63) 84.375% 87.500%, oklch(84.45% 0.1387 202.79) 87.500% 90.625%, oklch(86.77% 0.1395 194.42) 90.625% 93.750%, oklch(88.72% 0.1404 187.32) 93.750% 96.875%, oklch(90.16% 0.1406 182.27) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.173 | 0.083 | 280.5 |
| 2 | 0.268 | 0.154 | 273.1 |
| 3 | 0.406 | 0.215 | 264.7 |
| 4 | 0.579 | 0.22 | 258.4 |
| 5 | 0.76 | 0.146 | 228.8 |
| 6 | 0.902 | 0.141 | 182.3 |

## In these collections

- [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients)
- [Neon gradients](https://grabient.com/neon-gradients)
- [Cool gradients](https://grabient.com/cool-gradients)

## Other forms

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