# Glacier Blue Descent

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

- Also called: Monochrome light blue to blue linear gradient
- Seed: `kU5CC2aJo91eqwXDwsFg`
- Page: https://grabient.com/kU5CC2aJo91eqwXDwsFg?steps=6&angle=180
- Drawn as: linear gradient, 6 steps, 180 degrees
- Kinds: light to dark, pastel, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 4 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 | `#cbdffb` | `oklch(89.76% 0.0441 255.94)` | Arc Light | black, 15.4 to 1 |
| 2 | `#b2d6f5` | `oklch(86.06% 0.0580 243.81)` | Blue Rice | black, 13.8 to 1 |
| 3 | `#8dc6eb` | `oklch(80.02% 0.0793 238.55)` | Shimmer | black, 11.3 to 1 |
| 4 | `#6baae3` | `oklch(71.82% 0.1064 247.63)` | Greek Sea | black, 8.4 to 1 |
| 5 | `#4686dc` | `oklch(62.01% 0.1453 256.33)` | Blue Jay | black, 5.7 to 1 |
| 6 | `#3063d4` | `oklch(53.15% 0.1833 263.33)` | Janitor | white, 5.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #cbdffb 0.0%, #b2d6f5 20.0%, #8dc6eb 40.0%, #6baae3 60.0%, #4686dc 80.0%, #3063d4 100.0%);
background: linear-gradient(180deg in oklch, oklch(89.76% 0.0441 255.94) 0.0%, oklch(86.06% 0.0580 243.81) 20.0%, oklch(80.02% 0.0793 238.55) 40.0%, oklch(71.82% 0.1064 247.63) 60.0%, oklch(62.01% 0.1453 256.33) 80.0%, oklch(53.15% 0.1833 263.33) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.898 | 0.044 | 255.9 |
| 2 | 0.823 | 0.072 | 238 |
| 3 | 0.689 | 0.117 | 250.7 |
| 4 | 0.531 | 0.183 | 263.3 |

## In these collections

- [Monochrome blue gradients](https://grabient.com/monochrome-blue-gradients)
- [Ice gradients](https://grabient.com/ice-gradients)

## Other forms

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