# Vivid monochrome blue linear gradient

Vivid monochrome blue linear gradient with 7 colors: #0839a7, #075ac6, #017ddf, #0d9bea, #0fadeb, #18b0dd, #1fa8c9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWZYW7RUG_FQ5Pnasj5Viq-w`
- Page: https://grabient.com/kWZYW7RUG_FQ5Pnasj5Viq-w
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.8 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 | `#0839a7` | `oklch(39.76% 0.1833 262.97)` | Philippine Blue | white, 9.7 to 1 |
| 2 | `#075ac6` | `oklch(49.14% 0.1831 258.70)` | Dead Blue Eyes | white, 6.4 to 1 |
| 3 | `#017ddf` | `oklch(58.72% 0.1741 251.78)` | Soothing Sapphire | black, 5 to 1 |
| 4 | `#0d9bea` | `oklch(66.14% 0.1571 242.89)` | Out of the Blue | black, 6.8 to 1 |
| 5 | `#0fadeb` | `oklch(70.44% 0.1442 233.46)` | Vivid Cerulean | black, 8.1 to 1 |
| 6 | `#18b0dd` | `oklch(70.59% 0.1302 225.32)` | Blue Atoll | black, 8.3 to 1 |
| 7 | `#1fa8c9` | `oklch(67.72% 0.1171 219.64)` | Pacific Blue | black, 7.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0839a7 0.0%, #075ac6 16.7%, #017ddf 33.3%, #0d9bea 50.0%, #0fadeb 66.7%, #18b0dd 83.3%, #1fa8c9 100.0%);
background: linear-gradient(90deg in oklch, oklch(39.76% 0.1833 262.97) 0.0%, oklch(49.14% 0.1831 258.70) 16.7%, oklch(58.72% 0.1741 251.78) 33.3%, oklch(66.14% 0.1571 242.89) 50.0%, oklch(70.44% 0.1442 233.46) 66.7%, oklch(70.59% 0.1302 225.32) 83.3%, oklch(67.72% 0.1171 219.64) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.398 | 0.183 | 263 |
| 2 | 0.543 | 0.181 | 255.6 |
| 3 | 0.661 | 0.157 | 242.9 |
| 4 | 0.713 | 0.138 | 229.2 |
| 5 | 0.677 | 0.117 | 219.6 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)

## Other forms

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