# Blue elevation palette

The Blue elevation palette brings together dark blue, blue, pale blue, and off-white. The colors span a broad lightness range, combining restrained 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 off-white.

- Also called: Monochrome navy to light blue radial gradient
- Seed: `kUSCqysg6_PCKPv1hb3A`
- Page: https://grabient.com/kUSCqysg6_PCKPv1hb3A?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark to light, muted, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 12 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 | `#112b45` | `oklch(28.35% 0.0579 251.02)` | Midnight Ocean | white, 14.4 to 1 |
| 2 | `#132c46` | `oklch(28.82% 0.0568 250.66)` | Crow Black Blue | white, 14.1 to 1 |
| 3 | `#142d46` | `oklch(29.21% 0.0555 250.22)` | Crow Black Blue | white, 13.9 to 1 |
| 4 | `#162e47` | `oklch(29.60% 0.0538 249.70)` | Crow Black Blue | white, 13.7 to 1 |
| 5 | `#183047` | `oklch(30.06% 0.0520 249.12)` | NATO Blue | white, 13.5 to 1 |
| 6 | `#1a3148` | `oklch(30.66% 0.0500 248.48)` | NATO Blue | white, 13.2 to 1 |
| 7 | `#1d3449` | `oklch(31.48% 0.0480 247.81)` | Blue Whale | white, 12.8 to 1 |
| 8 | `#20364b` | `oklch(32.60% 0.0460 247.10)` | In the Navy | white, 12.3 to 1 |
| 9 | `#253a4e` | `oklch(34.08% 0.0440 246.38)` | Cool Air of Debonair | white, 11.6 to 1 |
| 10 | `#2a3f52` | `oklch(36.00% 0.0421 245.64)` | Snap-Shot | white, 10.8 to 1 |
| 11 | `#314658` | `oklch(38.43% 0.0405 244.91)` | Blue Wing Teal | white, 9.7 to 1 |
| 12 | `#3a4e60` | `oklch(41.56% 0.0390 244.21)` | Cello | white, 8.5 to 1 |
| 13 | `#455a6b` | `oklch(45.64% 0.0376 243.54)` | Infinite Deep Sea | white, 7.1 to 1 |
| 14 | `#536778` | `oklch(50.48% 0.0364 242.88)` | Payne’s Grey | white, 5.8 to 1 |
| 15 | `#627787` | `oklch(55.85% 0.0352 242.22)` | Space Convoy | white, 4.6 to 1 |
| 16 | `#738898` | `oklch(61.53% 0.0340 241.53)` | Skipper | black, 5.6 to 1 |
| 17 | `#8599a9` | `oklch(67.30% 0.0329 240.80)` | Silver Storm | black, 7.1 to 1 |
| 18 | `#96abba` | `oklch(72.91% 0.0317 240.01)` | Cool Customer | black, 8.8 to 1 |
| 19 | `#a7bbca` | `oklch(78.16% 0.0306 239.13)` | Glacier Mist | black, 10.6 to 1 |
| 20 | `#b6cad8` | `oklch(82.80% 0.0295 238.15)` | Powder Soft Blue | black, 12.4 to 1 |
| 21 | `#c2d6e4` | `oklch(86.61% 0.0283 237.04)` | Light Ridge Light | black, 14 to 1 |
| 22 | `#ccdfec` | `oklch(89.40% 0.0272 235.78)` | CO₂ | black, 15.3 to 1 |
| 23 | `#d3e6f1` | `oklch(91.34% 0.0259 234.24)` | Pattens Blue | black, 16.3 to 1 |
| 24 | `#d7eaf4` | `oklch(92.61% 0.0245 232.45)` | Spacious Skies | black, 16.9 to 1 |
| 25 | `#daecf6` | `oklch(93.34% 0.0231 230.50)` | Ice Fishing | black, 17.3 to 1 |
| 26 | `#dcedf6` | `oklch(93.64% 0.0217 228.44)` | Ice Fishing | black, 17.5 to 1 |
| 27 | `#dcedf4` | `oklch(93.60% 0.0204 226.37)` | Ice Fishing | black, 17.4 to 1 |
| 28 | `#dcecf3` | `oklch(93.36% 0.0191 224.34)` | Ice Fishing | black, 17.3 to 1 |
| 29 | `#dcebf1` | `oklch(93.02% 0.0179 222.44)` | Frost Wind | black, 17.1 to 1 |
| 30 | `#dbeaef` | `oklch(92.69% 0.0168 220.75)` | Tibetan Sky | black, 17 to 1 |
| 31 | `#dbe9ed` | `oklch(92.49% 0.0159 219.33)` | Sidewalk Chalk Blue | black, 16.8 to 1 |
| 32 | `#dce9ed` | `oklch(92.52% 0.0152 218.26)` | Sidewalk Chalk Blue | black, 16.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #112b45 0.0%, #132c46 3.2%, #142d46 6.5%, #162e47 9.7%, #183047 12.9%, #1a3148 16.1%, #1d3449 19.4%, #20364b 22.6%, #253a4e 25.8%, #2a3f52 29.0%, #314658 32.3%, #3a4e60 35.5%, #455a6b 38.7%, #536778 41.9%, #627787 45.2%, #738898 48.4%, #8599a9 51.6%, #96abba 54.8%, #a7bbca 58.1%, #b6cad8 61.3%, #c2d6e4 64.5%, #ccdfec 67.7%, #d3e6f1 71.0%, #d7eaf4 74.2%, #daecf6 77.4%, #dcedf6 80.6%, #dcedf4 83.9%, #dcecf3 87.1%, #dcebf1 90.3%, #dbeaef 93.5%, #dbe9ed 96.8%, #dce9ed 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(28.35% 0.0579 251.02) 0.0%, oklch(28.82% 0.0568 250.66) 3.2%, oklch(29.21% 0.0555 250.22) 6.5%, oklch(29.60% 0.0538 249.70) 9.7%, oklch(30.06% 0.0520 249.12) 12.9%, oklch(30.66% 0.0500 248.48) 16.1%, oklch(31.48% 0.0480 247.81) 19.4%, oklch(32.60% 0.0460 247.10) 22.6%, oklch(34.08% 0.0440 246.38) 25.8%, oklch(36.00% 0.0421 245.64) 29.0%, oklch(38.43% 0.0405 244.91) 32.3%, oklch(41.56% 0.0390 244.21) 35.5%, oklch(45.64% 0.0376 243.54) 38.7%, oklch(50.48% 0.0364 242.88) 41.9%, oklch(55.85% 0.0352 242.22) 45.2%, oklch(61.53% 0.0340 241.53) 48.4%, oklch(67.30% 0.0329 240.80) 51.6%, oklch(72.91% 0.0317 240.01) 54.8%, oklch(78.16% 0.0306 239.13) 58.1%, oklch(82.80% 0.0295 238.15) 61.3%, oklch(86.61% 0.0283 237.04) 64.5%, oklch(89.40% 0.0272 235.78) 67.7%, oklch(91.34% 0.0259 234.24) 71.0%, oklch(92.61% 0.0245 232.45) 74.2%, oklch(93.34% 0.0231 230.50) 77.4%, oklch(93.64% 0.0217 228.44) 80.6%, oklch(93.60% 0.0204 226.37) 83.9%, oklch(93.36% 0.0191 224.34) 87.1%, oklch(93.02% 0.0179 222.44) 90.3%, oklch(92.69% 0.0168 220.75) 93.5%, oklch(92.49% 0.0159 219.33) 96.8%, oklch(92.52% 0.0152 218.26) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.058 | 251 |
| 2 | 0.394 | 0.04 | 244.7 |
| 3 | 0.886 | 0.028 | 236.2 |
| 4 | 0.925 | 0.015 | 218.3 |

## In these collections

- [Elevation gradients](https://grabient.com/elevation-gradients)

## Other forms

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