# Ice Blue into Indigo

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

- Also called: Monochrome light blue, navy and blue linear gradient
- Seed: `kU5BijUy9AyUhQu8P8Ig`
- Page: https://grabient.com/kU5BijUy9AyUhQu8P8Ig?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark center, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.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 | `#c8e2ef` | `oklch(89.76% 0.0331 229.22)` | Pale Frost | black, 15.5 to 1 |
| 2 | `#bfdeee` | `oklch(88.42% 0.0392 229.57)` | Tropical Pool | black, 14.9 to 1 |
| 3 | `#b4daed` | `oklch(86.75% 0.0477 229.91)` | Soap Bubble | black, 14.2 to 1 |
| 4 | `#a7d5ec` | `oklch(84.81% 0.0581 230.29)` | Light Deluxe Days | black, 13.3 to 1 |
| 5 | `#98cfeb` | `oklch(82.63% 0.0696 230.72)` | Light Bright Spark | black, 12.4 to 1 |
| 6 | `#87c9ea` | `oklch(80.24% 0.0817 231.24)` | Shimmer | black, 11.5 to 1 |
| 7 | `#75c1e8` | `oklch(77.67% 0.0937 231.87)` | Bright Spark | black, 10.5 to 1 |
| 8 | `#63b9e5` | `oklch(74.96% 0.1050 232.64)` | Malibu | black, 9.6 to 1 |
| 9 | `#50b1e2` | `oklch(72.15% 0.1150 233.58)` | Sail Away | black, 8.6 to 1 |
| 10 | `#3ea8dd` | `oklch(69.26% 0.1230 234.73)` | Thalassophile | black, 7.8 to 1 |
| 11 | `#2d9ed7` | `oklch(66.33% 0.1284 236.10)` | Blue Damselfly | black, 6.9 to 1 |
| 12 | `#2094cf` | `oklch(63.25% 0.1306 237.76)` | Splish Splash | black, 6.1 to 1 |
| 13 | `#1787c4` | `oklch(59.59% 0.1296 239.76)` | Azul Caribe | black, 5.3 to 1 |
| 14 | `#137ab6` | `oklch(55.50% 0.1261 242.04)` | Star Command Blue | white, 4.6 to 1 |
| 15 | `#126ca6` | `oklch(51.17% 0.1208 244.55)` | Bowen Blue | white, 5.6 to 1 |
| 16 | `#135e96` | `oklch(46.76% 0.1144 247.20)` | Lapis Jewel | white, 6.8 to 1 |
| 17 | `#135086` | `oklch(42.46% 0.1076 249.95)` | Lake Baikal | white, 8.2 to 1 |
| 18 | `#134477` | `oklch(38.45% 0.1011 252.72)` | Inoffensive Blue | white, 9.8 to 1 |
| 19 | `#123a6b` | `oklch(34.91% 0.0955 255.44)` | Ateneo Blue | white, 11.4 to 1 |
| 20 | `#113261` | `oklch(32.02% 0.0917 258.05)` | Funnel Cloud | white, 12.7 to 1 |
| 21 | `#102b5a` | `oklch(29.96% 0.0902 260.49)` | Ambassador Blue | white, 13.7 to 1 |
| 22 | `#112858` | `oklch(28.91% 0.0918 262.70)` | Fibonacci Blue | white, 14.3 to 1 |
| 23 | `#13275a` | `oklch(28.94% 0.0964 264.88)` | Fibonacci Blue | white, 14.3 to 1 |
| 24 | `#162860` | `oklch(29.90% 0.1033 267.08)` | Schiava Blue | white, 13.9 to 1 |
| 25 | `#1c2a6a` | `oklch(31.59% 0.1119 269.25)` | Schiava Blue | white, 13.1 to 1 |
| 26 | `#232e75` | `oklch(33.81% 0.1218 271.37)` | Blue Rose | white, 12.2 to 1 |
| 27 | `#2a3382` | `oklch(36.37% 0.1323 273.40)` | Migol Blue | white, 11.1 to 1 |
| 28 | `#333790` | `oklch(39.06% 0.1429 275.31)` | Perfect Dark | white, 10 to 1 |
| 29 | `#3b3c9d` | `oklch(41.69% 0.1531 277.06)` | Royal Wisteria | white, 9 to 1 |
| 30 | `#4341a9` | `oklch(44.06% 0.1622 278.61)` | Megadrive Screen | white, 8.2 to 1 |
| 31 | `#4a44b3` | `oklch(45.98% 0.1697 279.94)` | Megadrive Screen | white, 7.5 to 1 |
| 32 | `#4f46b9` | `oklch(47.24% 0.1750 281.00)` | Swiss Plum | white, 7.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #c8e2ef 0.0%, #bfdeee 3.2%, #b4daed 6.5%, #a7d5ec 9.7%, #98cfeb 12.9%, #87c9ea 16.1%, #75c1e8 19.4%, #63b9e5 22.6%, #50b1e2 25.8%, #3ea8dd 29.0%, #2d9ed7 32.3%, #2094cf 35.5%, #1787c4 38.7%, #137ab6 41.9%, #126ca6 45.2%, #135e96 48.4%, #135086 51.6%, #134477 54.8%, #123a6b 58.1%, #113261 61.3%, #102b5a 64.5%, #112858 67.7%, #13275a 71.0%, #162860 74.2%, #1c2a6a 77.4%, #232e75 80.6%, #2a3382 83.9%, #333790 87.1%, #3b3c9d 90.3%, #4341a9 93.5%, #4a44b3 96.8%, #4f46b9 100.0%);
background: linear-gradient(180deg in oklch, oklch(89.76% 0.0331 229.22) 0.0%, oklch(88.42% 0.0392 229.57) 3.2%, oklch(86.75% 0.0477 229.91) 6.5%, oklch(84.81% 0.0581 230.29) 9.7%, oklch(82.63% 0.0696 230.72) 12.9%, oklch(80.24% 0.0817 231.24) 16.1%, oklch(77.67% 0.0937 231.87) 19.4%, oklch(74.96% 0.1050 232.64) 22.6%, oklch(72.15% 0.1150 233.58) 25.8%, oklch(69.26% 0.1230 234.73) 29.0%, oklch(66.33% 0.1284 236.10) 32.3%, oklch(63.25% 0.1306 237.76) 35.5%, oklch(59.59% 0.1296 239.76) 38.7%, oklch(55.50% 0.1261 242.04) 41.9%, oklch(51.17% 0.1208 244.55) 45.2%, oklch(46.76% 0.1144 247.20) 48.4%, oklch(42.46% 0.1076 249.95) 51.6%, oklch(38.45% 0.1011 252.72) 54.8%, oklch(34.91% 0.0955 255.44) 58.1%, oklch(32.02% 0.0917 258.05) 61.3%, oklch(29.96% 0.0902 260.49) 64.5%, oklch(28.91% 0.0918 262.70) 67.7%, oklch(28.94% 0.0964 264.88) 71.0%, oklch(29.90% 0.1033 267.08) 74.2%, oklch(31.59% 0.1119 269.25) 77.4%, oklch(33.81% 0.1218 271.37) 80.6%, oklch(36.37% 0.1323 273.40) 83.9%, oklch(39.06% 0.1429 275.31) 87.1%, oklch(41.69% 0.1531 277.06) 90.3%, oklch(44.06% 0.1622 278.61) 93.5%, oklch(45.98% 0.1697 279.94) 96.8%, oklch(47.24% 0.1750 281.00) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.898 | 0.033 | 229.2 |
| 2 | 0.654 | 0.13 | 236.6 |
| 3 | 0.291 | 0.091 | 262 |
| 4 | 0.472 | 0.175 | 281 |

## In these collections

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

## Other forms

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