# Vivid monochrome light blue to blue linear gradient

Vivid monochrome light blue to blue linear gradient with 7 colors: #75b3ef, #619dea, #4f86d4, #3f74b0, #32658f, #2a5a81, #245484. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWvk-xUzHA8YoP27nT7N6LAw`
- Page: https://grabient.com/kWvk-xUzHA8YoP27nT7N6LAw
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.5 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 | `#75b3ef` | `oklch(74.80% 0.1089 248.91)` | Fly Away | black, 9.4 to 1 |
| 2 | `#619dea` | `oklch(68.91% 0.1302 255.17)` | Feather Star | black, 7.5 to 1 |
| 3 | `#4f86d4` | `oklch(61.93% 0.1318 257.09)` | Berlin Blue | black, 5.7 to 1 |
| 4 | `#3f74b0` | `oklch(55.12% 0.1102 253.13)` | Athens | white, 4.8 to 1 |
| 5 | `#32658f` | `oklch(49.15% 0.0868 245.74)` | Drake’s Neck | white, 6.1 to 1 |
| 6 | `#2a5a81` | `oklch(45.30% 0.0822 245.11)` | Bahama Blue | white, 7.2 to 1 |
| 7 | `#245484` | `oklch(43.70% 0.0951 251.02)` | Boat Blue | white, 7.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #75b3ef 0.0%, #619dea 16.7%, #4f86d4 33.3%, #3f74b0 50.0%, #32658f 66.7%, #2a5a81 83.3%, #245484 100.0%);
background: linear-gradient(90deg in oklch, oklch(74.80% 0.1089 248.91) 0.0%, oklch(68.91% 0.1302 255.17) 16.7%, oklch(61.93% 0.1318 257.09) 33.3%, oklch(55.12% 0.1102 253.13) 50.0%, oklch(49.15% 0.0868 245.74) 66.7%, oklch(45.30% 0.0822 245.11) 83.3%, oklch(43.70% 0.0951 251.02) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.748 | 0.109 | 248.9 |
| 2 | 0.654 | 0.136 | 257.4 |
| 3 | 0.551 | 0.11 | 253.1 |
| 4 | 0.469 | 0.08 | 243.6 |
| 5 | 0.437 | 0.095 | 251 |

## In these collections

- [Monochrome blue gradients](https://grabient.com/monochrome-blue-gradients)

## Other forms

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