# Blue monochromatic palette

The Blue monochromatic palette brings together pale blue, light blue, blue, and dark 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 pale blue.

- Also called: Monochrome light blue, blue and navy linear swatches
- Seed: `kW7B2zZaC_tG9wC5OkBHR1AI`
- Page: https://grabient.com/kW7B2zZaC_tG9wC5OkBHR1AI?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.8 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 | `#d7eaff` | `oklch(92.91% 0.0351 251.70)` | Veiling Waterfalls | black, 17 to 1 |
| 2 | `#91c2f5` | `oklch(79.92% 0.0896 249.61)` | Sail to the Sea | black, 11.2 to 1 |
| 3 | `#2a8fef` | `oklch(64.17% 0.1695 251.72)` | Bleu de France | black, 6.2 to 1 |
| 4 | `#0053a4` | `oklch(44.89% 0.1474 254.92)` | Victoria Blue | white, 7.5 to 1 |
| 5 | `#001b41` | `oklch(22.83% 0.0799 257.00)` | Maastricht Blue | white, 17 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d7eaff 0.000% 20.000%, #91c2f5 20.000% 40.000%, #2a8fef 40.000% 60.000%, #0053a4 60.000% 80.000%, #001b41 80.000% 100.000%);
background: linear-gradient(90deg, oklch(92.91% 0.0351 251.70) 0.000% 20.000%, oklch(79.92% 0.0896 249.61) 20.000% 40.000%, oklch(64.17% 0.1695 251.72) 40.000% 60.000%, oklch(44.89% 0.1474 254.92) 60.000% 80.000%, oklch(22.83% 0.0799 257.00) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.929 | 0.04 | 251.7 |
| 2 | 0.799 | 0.09 | 249.6 |
| 3 | 0.642 | 0.169 | 251.7 |
| 4 | 0.449 | 0.16 | 254.9 |
| 5 | 0.228 | 0.08 | 257 |

## In these collections

- [Monochromatic swatches](https://grabient.com/monochromatic-swatches)

## Other forms

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