# Blue wallpaper palette

The Blue wallpaper palette brings together dark blue, blue, and light blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits stationery systems and print layouts. Its darkest tone is dark blue, and its lightest tone is light blue.

- Also called: Monochrome navy to light blue linear gradient
- Seed: `kUJUy8qSU_cggv1iFz7g`
- Page: https://grabient.com/kUJUy8qSU_cggv1iFz7g?steps=6&angle=180
- Drawn as: linear gradient, 6 steps, 180 degrees
- Kinds: dark to light, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.7 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 | `#010033` | `oklch(14.67% 0.1006 265.12)` | Mighty Midnight | white, 20 to 1 |
| 2 | `#03194f` | `oklch(23.86% 0.1039 262.82)` | Interstellar Blue | white, 16.7 to 1 |
| 3 | `#1d3d73` | `oklch(36.80% 0.1003 259.91)` | Blue Expanse | white, 10.6 to 1 |
| 4 | `#456a9e` | `oklch(51.96% 0.0931 256.84)` | Star Sapphire | white, 5.5 to 1 |
| 5 | `#6f96c2` | `oklch(66.15% 0.0788 252.01)` | Blue Tuna | black, 6.8 to 1 |
| 6 | `#95b9dc` | `oklch(77.17% 0.0634 247.11)` | Blues White Shoes | black, 10.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #010033 0.0%, #03194f 20.0%, #1d3d73 40.0%, #456a9e 60.0%, #6f96c2 80.0%, #95b9dc 100.0%);
background: linear-gradient(180deg in oklch, oklch(14.67% 0.1006 265.12) 0.0%, oklch(23.86% 0.1039 262.82) 20.0%, oklch(36.80% 0.1003 259.91) 40.0%, oklch(51.96% 0.0931 256.84) 60.0%, oklch(66.15% 0.0788 252.01) 80.0%, oklch(77.17% 0.0634 247.11) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.146 | 0.105 | 265.1 |
| 2 | 0.323 | 0.102 | 260.9 |
| 3 | 0.567 | 0.09 | 255.6 |
| 4 | 0.772 | 0.063 | 247.1 |

## In these collections

- [Wallpaper gradients](https://grabient.com/wallpaper-gradients)

## Other forms

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