# Monochrome light blue to navy linear gradient

Monochrome light blue to navy linear gradient with 7 colors: #e2f2fe, #b7d9f6, #84b5e6, #5c89ca, #425da7, #343781, #2a1d63. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU8hGr4CBA78swelqsIg`
- Page: https://grabient.com/kU8hGr4CBA78swelqsIg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.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 | `#e2f2fe` | `oklch(95.28% 0.0234 241.17)` | Wizard White | black, 18.3 to 1 |
| 2 | `#b7d9f6` | `oklch(87.06% 0.0537 244.34)` | Oh Boy! | black, 14.2 to 1 |
| 3 | `#84b5e6` | `oklch(75.59% 0.0882 249.63)` | Aero | black, 9.6 to 1 |
| 4 | `#5c89ca` | `oklch(62.62% 0.1098 257.42)` | Marina | black, 5.8 to 1 |
| 5 | `#425da7` | `oklch(49.61% 0.1226 266.53)` | Kakitsubata Blue | white, 6.2 to 1 |
| 6 | `#343781` | `oklch(37.94% 0.1220 277.10)` | Ballpoint Indigo | white, 10.4 to 1 |
| 7 | `#2a1d63` | `oklch(29.53% 0.1171 285.56)` | Night Fog | white, 14.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #e2f2fe 0.0%, #b7d9f6 16.7%, #84b5e6 33.3%, #5c89ca 50.0%, #425da7 66.7%, #343781 83.3%, #2a1d63 100.0%);
background: linear-gradient(90deg in oklch, oklch(95.28% 0.0234 241.17) 0.0%, oklch(87.06% 0.0537 244.34) 16.7%, oklch(75.59% 0.0882 249.63) 33.3%, oklch(62.62% 0.1098 257.42) 50.0%, oklch(49.61% 0.1226 266.53) 66.7%, oklch(37.94% 0.1220 277.10) 83.3%, oklch(29.53% 0.1171 285.56) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.953 | 0.023 | 241.2 |
| 2 | 0.756 | 0.088 | 249.6 |
| 3 | 0.496 | 0.123 | 266.5 |
| 4 | 0.295 | 0.117 | 285.6 |

## In these collections

- [Sky](https://grabient.com/sky)

## Other forms

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