# Muted monochrome blue to light blue linear gradient

Muted monochrome blue to light blue linear gradient with 7 colors: #21465e, #334f75, #556596, #7f8bbd, #a6b1d8, #bad1e7, #c6e0e5. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWYCuqupzC9IbwPnkT78Qq5Q`
- Page: https://grabient.com/kWYCuqupzC9IbwPnkT78Qq5Q
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light, muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.2 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 | `#21465e` | `oklch(37.80% 0.0593 239.77)` | Dark Slate Blue | white, 10 to 1 |
| 2 | `#334f75` | `oklch(42.24% 0.0730 256.99)` | Airforce | white, 8.3 to 1 |
| 3 | `#556596` | `oklch(51.53% 0.0802 269.82)` | UCLA Blue | white, 5.6 to 1 |
| 4 | `#7f8bbd` | `oklch(64.57% 0.0758 273.58)` | Iolite | black, 6.3 to 1 |
| 5 | `#a6b1d8` | `oklch(76.61% 0.0566 272.09)` | High Style | black, 9.9 to 1 |
| 6 | `#bad1e7` | `oklch(84.97% 0.0394 247.91)` | Modern Blue | black, 13.3 to 1 |
| 7 | `#c6e0e5` | `oklch(88.98% 0.0289 209.12)` | Wind Tunnel | black, 15.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #21465e 0.0%, #334f75 16.7%, #556596 33.3%, #7f8bbd 50.0%, #a6b1d8 66.7%, #bad1e7 83.3%, #c6e0e5 100.0%);
background: linear-gradient(90deg in oklch, oklch(37.80% 0.0593 239.77) 0.0%, oklch(42.24% 0.0730 256.99) 16.7%, oklch(51.53% 0.0802 269.82) 33.3%, oklch(64.57% 0.0758 273.58) 50.0%, oklch(76.61% 0.0566 272.09) 66.7%, oklch(84.97% 0.0394 247.91) 83.3%, oklch(88.98% 0.0289 209.12) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.378 | 0.059 | 239.8 |
| 2 | 0.461 | 0.079 | 265.1 |
| 3 | 0.646 | 0.076 | 273.6 |
| 4 | 0.815 | 0.047 | 265.1 |
| 5 | 0.89 | 0.029 | 209.1 |

## In these collections

- [Spring tide seagrass](https://grabient.com/spring-tide-seagrass)

## Other forms

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