# Seamless cool navy and blue angular gradient

Seamless cool navy and blue angular gradient with 32 colors: #08345a, #053457, #023352, #01334e, #00334b, #01364b, #023c50, #034458, #044e63, #05596f, #05647a, #056e85, #037893, #0283a1, #018dae, #0195ba, #009ac2, #009dc8, #019fcc, #029ece, #039ccd, #0498ca, #0291c3, #0087b8, #007dac, #0072a0, #006994, #005e88, #01537a, #02486d, #023f61, #023959. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaUTuxqBc9zyfPpQK0B0a7Ar8nQIqHECg`
- Page: https://grabient.com/kaUTuxqBc9zyfPpQK0B0a7Ar8nQIqHECg?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, cool, monochrome, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.3 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 | `#08345a` | `oklch(31.89% 0.0813 249.61)` | Incremental Blue | white, 12.7 to 1 |
| 2 | `#053457` | `oklch(31.59% 0.0784 247.17)` | Night Dive | white, 12.8 to 1 |
| 3 | `#023352` | `oklch(31.01% 0.0738 243.67)` | Beyond the Stars | white, 13 to 1 |
| 4 | `#01334e` | `oklch(30.51% 0.0690 239.65)` | Dark Denim Blue | white, 13.2 to 1 |
| 5 | `#00334b` | `oklch(30.47% 0.0651 235.63)` | Cosmos Blue | white, 13.2 to 1 |
| 6 | `#01364b` | `oklch(31.26% 0.0634 232.14)` | Crowberry Blue | white, 12.8 to 1 |
| 7 | `#023c50` | `oklch(33.17% 0.0646 229.24)` | Duskwood | white, 11.9 to 1 |
| 8 | `#034458` | `oklch(36.03% 0.0678 226.41)` | Crab Nebula | white, 10.6 to 1 |
| 9 | `#044e63` | `oklch(39.48% 0.0725 223.84)` | Raging Thunderstorm | white, 9.2 to 1 |
| 10 | `#05596f` | `oklch(43.12% 0.0780 221.74)` | Deep Lagoon | white, 7.8 to 1 |
| 11 | `#05647a` | `oklch(46.59% 0.0836 220.31)` | Atlantis Myth | white, 6.7 to 1 |
| 12 | `#056e85` | `oklch(49.76% 0.0893 219.77)` | Amalfi | white, 5.8 to 1 |
| 13 | `#037893` | `oklch(53.15% 0.0961 220.14)` | Celestial | white, 5 to 1 |
| 14 | `#0283a1` | `oklch(56.52% 0.1033 221.11)` | Ahoy! Blue | black, 4.7 to 1 |
| 15 | `#018dae` | `oklch(59.59% 0.1103 222.39)` | Algiers Blue | black, 5.4 to 1 |
| 16 | `#0195ba` | `oklch(62.07% 0.1162 223.69)` | Blue Danube | black, 5.9 to 1 |
| 17 | `#009ac2` | `oklch(63.73% 0.1205 224.78)` | Sea Wonder | black, 6.3 to 1 |
| 18 | `#009dc8` | `oklch(64.84% 0.1239 225.97)` | Blue Ocean | black, 6.6 to 1 |
| 19 | `#019fcc` | `oklch(65.43% 0.1265 227.24)` | Blue Ocean | black, 6.8 to 1 |
| 20 | `#029ece` | `oklch(65.46% 0.1281 228.55)` | Structural Blue | black, 6.8 to 1 |
| 21 | `#039ccd` | `oklch(64.89% 0.1286 229.81)` | Structural Blue | black, 6.6 to 1 |
| 22 | `#0498ca` | `oklch(63.68% 0.1277 230.96)` | UV Light | black, 6.3 to 1 |
| 23 | `#0291c3` | `oklch(61.58% 0.1252 232.00)` | Dynamic Blue | black, 5.8 to 1 |
| 24 | `#0087b8` | `oklch(58.77% 0.1214 232.99)` | Mermaid Dreams | black, 5.1 to 1 |
| 25 | `#007dac` | `oklch(55.56% 0.1162 233.98)` | Neptune | white, 4.6 to 1 |
| 26 | `#0072a0` | `oklch(52.24% 0.1108 234.99)` | Cat’s Purr | white, 5.3 to 1 |
| 27 | `#006994` | `oklch(49.10% 0.1058 236.09)` | Sea Blue | white, 6.1 to 1 |
| 28 | `#005e88` | `oklch(45.68% 0.1003 237.39)` | Blue Flame | white, 7.1 to 1 |
| 29 | `#01537a` | `oklch(41.97% 0.0939 238.78)` | Ocean Spray | white, 8.3 to 1 |
| 30 | `#02486d` | `oklch(38.36% 0.0871 240.17)` | Broadwater Blue | white, 9.7 to 1 |
| 31 | `#023f61` | `oklch(35.26% 0.0813 241.37)` | Poseidon | white, 11 to 1 |
| 32 | `#023959` | `oklch(33.07% 0.0772 242.21)` | Gibraltar Sea | white, 12.1 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #08345a 0.0%, #053457 3.2%, #023352 6.5%, #01334e 9.7%, #00334b 12.9%, #01364b 16.1%, #023c50 19.4%, #034458 22.6%, #044e63 25.8%, #05596f 29.0%, #05647a 32.3%, #056e85 35.5%, #037893 38.7%, #0283a1 41.9%, #018dae 45.2%, #0195ba 48.4%, #009ac2 51.6%, #009dc8 54.8%, #019fcc 58.1%, #029ece 61.3%, #039ccd 64.5%, #0498ca 67.7%, #0291c3 71.0%, #0087b8 74.2%, #007dac 77.4%, #0072a0 80.6%, #006994 83.9%, #005e88 87.1%, #01537a 90.3%, #02486d 93.5%, #023f61 96.8%, #023959 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(31.89% 0.0813 249.61) 0.0%, oklch(31.59% 0.0784 247.17) 3.2%, oklch(31.01% 0.0738 243.67) 6.5%, oklch(30.51% 0.0690 239.65) 9.7%, oklch(30.47% 0.0651 235.63) 12.9%, oklch(31.26% 0.0634 232.14) 16.1%, oklch(33.17% 0.0646 229.24) 19.4%, oklch(36.03% 0.0678 226.41) 22.6%, oklch(39.48% 0.0725 223.84) 25.8%, oklch(43.12% 0.0780 221.74) 29.0%, oklch(46.59% 0.0836 220.31) 32.3%, oklch(49.76% 0.0893 219.77) 35.5%, oklch(53.15% 0.0961 220.14) 38.7%, oklch(56.52% 0.1033 221.11) 41.9%, oklch(59.59% 0.1103 222.39) 45.2%, oklch(62.07% 0.1162 223.69) 48.4%, oklch(63.73% 0.1205 224.78) 51.6%, oklch(64.84% 0.1239 225.97) 54.8%, oklch(65.43% 0.1265 227.24) 58.1%, oklch(65.46% 0.1281 228.55) 61.3%, oklch(64.89% 0.1286 229.81) 64.5%, oklch(63.68% 0.1277 230.96) 67.7%, oklch(61.58% 0.1252 232.00) 71.0%, oklch(58.77% 0.1214 232.99) 74.2%, oklch(55.56% 0.1162 233.98) 77.4%, oklch(52.24% 0.1108 234.99) 80.6%, oklch(49.10% 0.1058 236.09) 83.9%, oklch(45.68% 0.1003 237.39) 87.1%, oklch(41.97% 0.0939 238.78) 90.3%, oklch(38.36% 0.0871 240.17) 93.5%, oklch(35.26% 0.0813 241.37) 96.8%, oklch(33.07% 0.0772 242.21) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.081 | 249.6 |
| 2 | 0.315 | 0.063 | 231.6 |
| 3 | 0.476 | 0.085 | 220 |
| 4 | 0.63 | 0.119 | 224.2 |
| 5 | 0.642 | 0.128 | 230.6 |
| 6 | 0.496 | 0.107 | 235.9 |
| 7 | 0.331 | 0.077 | 242.2 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)

## Other forms

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