# Blue navy palette

The Blue navy palette brings together dark blue, blue, and light blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is light blue.

- Also called: Cool navy, blue and light blue angular gradient
- Seed: `kaNSq6qiG_byov1QHr84w4_cKcwKmmcDg`
- Page: https://grabient.com/kaNSq6qiG_byov1QHr84w4_cKcwKmmcDg?style=angularGradient&steps=32&angle=135
- Drawn as: angular gradient, 32 steps, 135 degrees
- Kinds: light center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.9 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 | `#091732` | `oklch(20.87% 0.0579 262.27)` | Liberty Blue | white, 17.8 to 1 |
| 2 | `#0a1a38` | `oklch(22.42% 0.0626 261.73)` | Naval Night | white, 17.2 to 1 |
| 3 | `#0c1f41` | `oklch(24.59% 0.0694 260.99)` | Dark Eclipse | white, 16.2 to 1 |
| 4 | `#0e254c` | `oklch(27.16% 0.0772 260.10)` | Dark Eclipse | white, 15 to 1 |
| 5 | `#112c57` | `oklch(29.91% 0.0849 259.15)` | Ambassador Blue | white, 13.7 to 1 |
| 6 | `#133362` | `oklch(32.64% 0.0914 258.19)` | Funnel Cloud | white, 12.4 to 1 |
| 7 | `#163a6d` | `oklch(35.28% 0.0968 257.26)` | Tardis Blue | white, 11.2 to 1 |
| 8 | `#194277` | `oklch(38.03% 0.1022 256.28)` | Assault | white, 10 to 1 |
| 9 | `#1c4a82` | `oklch(40.87% 0.1069 255.27)` | Dance Studio | white, 8.9 to 1 |
| 10 | `#20528d` | `oklch(43.76% 0.1103 254.22)` | Vegeta Blue | white, 7.8 to 1 |
| 11 | `#255b96` | `oklch(46.67% 0.1117 253.13)` | Beacon Blue | white, 6.9 to 1 |
| 12 | `#2d649f` | `oklch(49.58% 0.1105 251.97)` | Caledor Sky | white, 6.1 to 1 |
| 13 | `#366ea6` | `oklch(52.55% 0.1068 250.71)` | Mega Blue | white, 5.3 to 1 |
| 14 | `#4077ac` | `oklch(55.54% 0.1014 249.41)` | Blue Triumph | white, 4.7 to 1 |
| 15 | `#4c80b1` | `oklch(58.54% 0.0948 248.13)` | Seabrook | black, 5 to 1 |
| 16 | `#578ab7` | `oklch(61.52% 0.0876 246.95)` | Alpha Blue | black, 5.7 to 1 |
| 17 | `#6493bc` | `oklch(64.63% 0.0800 245.88)` | Blue Marble | black, 6.4 to 1 |
| 18 | `#759fc3` | `oklch(68.58% 0.0696 244.72)` | Key West Zenith | black, 7.5 to 1 |
| 19 | `#88acc9` | `oklch(72.71% 0.0580 243.59)` | Colorado Springs | black, 8.7 to 1 |
| 20 | `#98b6ce` | `oklch(76.14% 0.0476 242.69)` | Sea Mark | black, 9.8 to 1 |
| 21 | `#a2bbd0` | `oklch(78.01% 0.0404 242.20)` | Bush Viper | black, 10.5 to 1 |
| 22 | `#a1b9cd` | `oklch(77.44% 0.0388 242.29)` | Northern Pond | black, 10.3 to 1 |
| 23 | `#94afc5` | `oklch(74.14% 0.0440 243.02)` | Porcelain Vase | black, 9.2 to 1 |
| 24 | `#7f9fbb` | `oklch(68.95% 0.0535 244.21)` | Washed Denim | black, 7.6 to 1 |
| 25 | `#688dae` | `oklch(62.83% 0.0645 245.69)` | Scanda | black, 6 to 1 |
| 26 | `#527ba0` | `oklch(56.73% 0.0739 247.27)` | Biedermeier Blue | black, 4.6 to 1 |
| 27 | `#426b93` | `oklch(51.59% 0.0790 248.77)` | Queen Blue | white, 5.5 to 1 |
| 28 | `#355d85` | `oklch(46.71% 0.0798 250.46)` | Pelagic | white, 6.8 to 1 |
| 29 | `#2b4e76` | `oklch(41.74% 0.0781 252.36)` | Mykonos Reflection | white, 8.5 to 1 |
| 30 | `#224167` | `oklch(37.08% 0.0751 254.23)` | Elmer’s Echo | white, 10.4 to 1 |
| 31 | `#1b365a` | `oklch(33.14% 0.0721 255.85)` | Incremental Blue | white, 12.1 to 1 |
| 32 | `#162f51` | `oklch(30.31% 0.0703 256.98)` | Elite Blue | white, 13.5 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #091732 0.0%, #0a1a38 3.2%, #0c1f41 6.5%, #0e254c 9.7%, #112c57 12.9%, #133362 16.1%, #163a6d 19.4%, #194277 22.6%, #1c4a82 25.8%, #20528d 29.0%, #255b96 32.3%, #2d649f 35.5%, #366ea6 38.7%, #4077ac 41.9%, #4c80b1 45.2%, #578ab7 48.4%, #6493bc 51.6%, #759fc3 54.8%, #88acc9 58.1%, #98b6ce 61.3%, #a2bbd0 64.5%, #a1b9cd 67.7%, #94afc5 71.0%, #7f9fbb 74.2%, #688dae 77.4%, #527ba0 80.6%, #426b93 83.9%, #355d85 87.1%, #2b4e76 90.3%, #224167 93.5%, #1b365a 96.8%, #162f51 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(20.87% 0.0579 262.27) 0.0%, oklch(22.42% 0.0626 261.73) 3.2%, oklch(24.59% 0.0694 260.99) 6.5%, oklch(27.16% 0.0772 260.10) 9.7%, oklch(29.91% 0.0849 259.15) 12.9%, oklch(32.64% 0.0914 258.19) 16.1%, oklch(35.28% 0.0968 257.26) 19.4%, oklch(38.03% 0.1022 256.28) 22.6%, oklch(40.87% 0.1069 255.27) 25.8%, oklch(43.76% 0.1103 254.22) 29.0%, oklch(46.67% 0.1117 253.13) 32.3%, oklch(49.58% 0.1105 251.97) 35.5%, oklch(52.55% 0.1068 250.71) 38.7%, oklch(55.54% 0.1014 249.41) 41.9%, oklch(58.54% 0.0948 248.13) 45.2%, oklch(61.52% 0.0876 246.95) 48.4%, oklch(64.63% 0.0800 245.88) 51.6%, oklch(68.58% 0.0696 244.72) 54.8%, oklch(72.71% 0.0580 243.59) 58.1%, oklch(76.14% 0.0476 242.69) 61.3%, oklch(78.01% 0.0404 242.20) 64.5%, oklch(77.44% 0.0388 242.29) 67.7%, oklch(74.14% 0.0440 243.02) 71.0%, oklch(68.95% 0.0535 244.21) 74.2%, oklch(62.83% 0.0645 245.69) 77.4%, oklch(56.73% 0.0739 247.27) 80.6%, oklch(51.59% 0.0790 248.77) 83.9%, oklch(46.71% 0.0798 250.46) 87.1%, oklch(41.74% 0.0781 252.36) 90.3%, oklch(37.08% 0.0751 254.23) 93.5%, oklch(33.14% 0.0721 255.85) 96.8%, oklch(30.31% 0.0703 256.98) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.058 | 262.3 |
| 2 | 0.331 | 0.092 | 258 |
| 3 | 0.476 | 0.112 | 252.8 |
| 4 | 0.63 | 0.084 | 246.4 |
| 5 | 0.78 | 0.039 | 242.2 |
| 6 | 0.524 | 0.079 | 248.5 |
| 7 | 0.303 | 0.07 | 257 |

## In these collections

- [Navy](https://grabient.com/navy)

## Other forms

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