# Cobalt beyond the Ice

The Blue cool blue palette brings together off-white, dark blue, and blue. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Gray, navy, light blue and blue linear gradient
- Seed: `kU_AiMGhPHWSlvK8PMOA`
- Page: https://grabient.com/kU_AiMGhPHWSlvK8PMOA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 17.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 | `#f4ffff` | `oklch(99.21% 0.0110 196.87)` | Sparkling Snow | black, 20.6 to 1 |
| 2 | `#e2eeef` | `oklch(94.12% 0.0134 200.83)` | Bashful | black, 17.7 to 1 |
| 3 | `#c8d7d9` | `oklch(86.85% 0.0165 206.38)` | Little Boy Blu | black, 14.1 to 1 |
| 4 | `#aabbbf` | `oklch(78.00% 0.0201 213.10)` | Grey Wool | black, 10.5 to 1 |
| 5 | `#899da3` | `oklch(68.15% 0.0241 220.60)` | Shale Grey | black, 7.3 to 1 |
| 6 | `#697e88` | `oklch(57.89% 0.0285 228.45)` | Risk-Reward | black, 4.9 to 1 |
| 7 | `#4b606e` | `oklch(47.80% 0.0332 236.24)` | Trekking Blue | white, 6.5 to 1 |
| 8 | `#324657` | `oklch(38.48% 0.0379 243.56)` | Aristocratic Blue | white, 9.7 to 1 |
| 9 | `#1e3144` | `oklch(30.51% 0.0428 249.99)` | Imperial Primer | white, 13.3 to 1 |
| 10 | `#102137` | `oklch(24.48% 0.0476 255.12)` | Fog of War | white, 16.2 to 1 |
| 11 | `#081830` | `oklch(20.98% 0.0522 258.54)` | Liberty Blue | white, 17.7 to 1 |
| 12 | `#071631` | `oklch(20.55% 0.0567 259.87)` | Liberty Blue | white, 17.9 to 1 |
| 13 | `#0a1c39` | `oklch(23.13% 0.0612 259.25)` | Naval Night | white, 16.8 to 1 |
| 14 | `#122949` | `oklch(28.09% 0.0657 257.08)` | Rurikon Blue | white, 14.5 to 1 |
| 15 | `#1e3b5e` | `oklch(34.82% 0.0703 253.75)` | Navy Peony | white, 11.3 to 1 |
| 16 | `#2c5276` | `oklch(42.70% 0.0749 249.66)` | Midnight Sonata | white, 8.1 to 1 |
| 17 | `#3d6b91` | `oklch(51.11% 0.0796 245.23)` | Rainy Lake | white, 5.6 to 1 |
| 18 | `#4d85ac` | `oklch(59.42% 0.0844 240.85)` | Cornwall | black, 5.2 to 1 |
| 19 | `#5c9ec5` | `oklch(67.03% 0.0894 236.93)` | Gulf Stream Blue | black, 7.1 to 1 |
| 20 | `#68b3db` | `oklch(73.31% 0.0945 233.86)` | Milky Waves | black, 9 to 1 |
| 21 | `#70c2eb` | `oklch(77.64% 0.0997 232.05)` | Bff Blue | black, 10.5 to 1 |
| 22 | `#70c8f4` | `oklch(79.46% 0.1052 231.87)` | Nevermind Nirvana | black, 11.2 to 1 |
| 23 | `#6bc7f7` | `oklch(79.22% 0.1113 233.08)` | Blue Mana | black, 11.1 to 1 |
| 24 | `#61c1f6` | `oklch(77.43% 0.1180 235.34)` | Blue Mana | black, 10.4 to 1 |
| 25 | `#55b7f2` | `oklch(74.43% 0.1250 238.41)` | Hello Summer | black, 9.4 to 1 |
| 26 | `#48a9eb` | `oklch(70.53% 0.1322 242.06)` | Cerulean | black, 8.1 to 1 |
| 27 | `#3c99e2` | `oklch(66.09% 0.1393 246.03)` | Flax Flower Blue | black, 6.8 to 1 |
| 28 | `#3188d8` | `oklch(61.43% 0.1462 250.09)` | Blue Cola | black, 5.6 to 1 |
| 29 | `#2a78ce` | `oklch(56.88% 0.1526 254.00)` | Fading Night | black, 4.6 to 1 |
| 30 | `#2568c4` | `oklch(52.78% 0.1582 257.51)` | Mimesia Blue | white, 5.4 to 1 |
| 31 | `#235cbc` | `oklch(49.45% 0.1630 260.39)` | Amnesia Blue | white, 6.2 to 1 |
| 32 | `#2354b7` | `oklch(47.24% 0.1667 262.39)` | Cerulean Blue | white, 6.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f4ffff 0.0%, #e2eeef 3.2%, #c8d7d9 6.5%, #aabbbf 9.7%, #899da3 12.9%, #697e88 16.1%, #4b606e 19.4%, #324657 22.6%, #1e3144 25.8%, #102137 29.0%, #081830 32.3%, #071631 35.5%, #0a1c39 38.7%, #122949 41.9%, #1e3b5e 45.2%, #2c5276 48.4%, #3d6b91 51.6%, #4d85ac 54.8%, #5c9ec5 58.1%, #68b3db 61.3%, #70c2eb 64.5%, #70c8f4 67.7%, #6bc7f7 71.0%, #61c1f6 74.2%, #55b7f2 77.4%, #48a9eb 80.6%, #3c99e2 83.9%, #3188d8 87.1%, #2a78ce 90.3%, #2568c4 93.5%, #235cbc 96.8%, #2354b7 100.0%);
background: linear-gradient(135deg in oklch, oklch(99.21% 0.0110 196.87) 0.0%, oklch(94.12% 0.0134 200.83) 3.2%, oklch(86.85% 0.0165 206.38) 6.5%, oklch(78.00% 0.0201 213.10) 9.7%, oklch(68.15% 0.0241 220.60) 12.9%, oklch(57.89% 0.0285 228.45) 16.1%, oklch(47.80% 0.0332 236.24) 19.4%, oklch(38.48% 0.0379 243.56) 22.6%, oklch(30.51% 0.0428 249.99) 25.8%, oklch(24.48% 0.0476 255.12) 29.0%, oklch(20.98% 0.0522 258.54) 32.3%, oklch(20.55% 0.0567 259.87) 35.5%, oklch(23.13% 0.0612 259.25) 38.7%, oklch(28.09% 0.0657 257.08) 41.9%, oklch(34.82% 0.0703 253.75) 45.2%, oklch(42.70% 0.0749 249.66) 48.4%, oklch(51.11% 0.0796 245.23) 51.6%, oklch(59.42% 0.0844 240.85) 54.8%, oklch(67.03% 0.0894 236.93) 58.1%, oklch(73.31% 0.0945 233.86) 61.3%, oklch(77.64% 0.0997 232.05) 64.5%, oklch(79.46% 0.1052 231.87) 67.7%, oklch(79.22% 0.1113 233.08) 71.0%, oklch(77.43% 0.1180 235.34) 74.2%, oklch(74.43% 0.1250 238.41) 77.4%, oklch(70.53% 0.1322 242.06) 80.6%, oklch(66.09% 0.1393 246.03) 83.9%, oklch(61.43% 0.1462 250.09) 87.1%, oklch(56.88% 0.1526 254.00) 90.3%, oklch(52.78% 0.1582 257.51) 93.5%, oklch(49.45% 0.1630 260.39) 96.8%, oklch(47.24% 0.1667 262.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.992 | 0.011 | 196.9 |
| 2 | 0.205 | 0.054 | 259.2 |
| 3 | 0.791 | 0.103 | 231.7 |
| 4 | 0.472 | 0.167 | 262.4 |

## In these collections

- [Cool blue](https://grabient.com/cool-blue)

## Other forms

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