# Monochrome light blue to blue linear gradient

Monochrome light blue to blue linear gradient with 7 colors: #c8c6f5, #a9a9f0, #8688ea, #646ae3, #4e56d9, #3b3fb0, #292874. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW1jDMWqy_cpBv0-xr-Ki5AQ`
- Page: https://grabient.com/kW1jDMWqy_cpBv0-xr-Ki5AQ
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#c8c6f5` | `oklch(84.25% 0.0661 286.88)` | Light Periwinkle | black, 12.7 to 1 |
| 2 | `#a9a9f0` | `oklch(76.07% 0.1016 284.29)` | Maximum Blue Purple | black, 9.5 to 1 |
| 3 | `#8688ea` | `oklch(66.78% 0.1435 280.89)` | Perrywinkle | black, 6.7 to 1 |
| 4 | `#646ae3` | `oklch(58.27% 0.1805 277.36)` | Exodus Fruit | black, 4.7 to 1 |
| 5 | `#4e56d9` | `oklch(52.61% 0.1974 274.70)` | Warm Blue | white, 5.7 to 1 |
| 6 | `#3b3fb0` | `oklch(43.76% 0.1753 274.90)` | Early Spring Night | white, 8.3 to 1 |
| 7 | `#292874` | `oklch(33.07% 0.1268 277.36)` | Blue Rose | white, 12.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c8c6f5 0.0%, #a9a9f0 16.7%, #8688ea 33.3%, #646ae3 50.0%, #4e56d9 66.7%, #3b3fb0 83.3%, #292874 100.0%);
background: linear-gradient(90deg in oklch, oklch(84.25% 0.0661 286.88) 0.0%, oklch(76.07% 0.1016 284.29) 16.7%, oklch(66.78% 0.1435 280.89) 33.3%, oklch(58.27% 0.1805 277.36) 50.0%, oklch(52.61% 0.1974 274.70) 66.7%, oklch(43.76% 0.1753 274.90) 83.3%, oklch(33.07% 0.1268 277.36) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.843 | 0.066 | 286.9 |
| 2 | 0.713 | 0.123 | 282.6 |
| 3 | 0.583 | 0.181 | 277.4 |
| 4 | 0.492 | 0.194 | 274.2 |
| 5 | 0.331 | 0.127 | 277.4 |

## In these collections

- [Indigo gradients](https://grabient.com/indigo-gradients)

## Other forms

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