# Monochrome blue and light blue linear swatches

Monochrome blue and light blue linear swatches with 13 colors: #0042f8, #034bff, #165cff, #2c6cfe, #427cfe, #5b8afe, #7498ff, #8ba7fe, #9db3fe, #abbffe, #b7c9fe, #c1d1ff, #c9d7ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUfs-7zso_-MoQNwFL-g`
- Page: https://grabient.com/kUfs-7zso_-MoQNwFL-g?style=linearSwatches&steps=13&angle=180
- Drawn as: linear swatches, 13 steps, 180 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 4.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 | `#0042f8` | `oklch(49.61% 0.2717 263.69)` | Rare Blue | white, 6.7 to 1 |
| 2 | `#034bff` | `oklch(51.71% 0.2699 263.50)` | Magic Ink | white, 6 to 1 |
| 3 | `#165cff` | `oklch(54.70% 0.2504 263.21)` | Kyanite | white, 5.2 to 1 |
| 4 | `#2c6cfe` | `oklch(58.20% 0.2270 263.15)` | Gentian Flower | black, 4.7 to 1 |
| 5 | `#427cfe` | `oklch(61.81% 0.2039 263.67)` | Lightish Blue | black, 5.5 to 1 |
| 6 | `#5b8afe` | `oklch(65.71% 0.1804 265.22)` | Skinny Jeans | black, 6.4 to 1 |
| 7 | `#7498ff` | `oklch(70.00% 0.1554 267.50)` | Blue Chaos | black, 7.6 to 1 |
| 8 | `#8ba7fe` | `oklch(74.24% 0.1311 269.72)` | Widowmaker | black, 9 to 1 |
| 9 | `#9db3fe` | `oklch(77.95% 0.1102 271.07)` | Wondrous Wisteria | black, 10.3 to 1 |
| 10 | `#abbffe` | `oklch(81.17% 0.0927 271.16)` | Pastel Blue | black, 11.5 to 1 |
| 11 | `#b7c9fe` | `oklch(84.08% 0.0775 270.47)` | Light Periwinkle | black, 12.8 to 1 |
| 12 | `#c1d1ff` | `oklch(86.49% 0.0652 269.56)` | Lavender Blue | black, 13.8 to 1 |
| 13 | `#c9d7ff` | `oklch(88.19% 0.0565 268.96)` | Pale Phthalo Blue | black, 14.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #0042f8 0.000% 7.692%, #034bff 7.692% 15.385%, #165cff 15.385% 23.077%, #2c6cfe 23.077% 30.769%, #427cfe 30.769% 38.462%, #5b8afe 38.462% 46.154%, #7498ff 46.154% 53.846%, #8ba7fe 53.846% 61.538%, #9db3fe 61.538% 69.231%, #abbffe 69.231% 76.923%, #b7c9fe 76.923% 84.615%, #c1d1ff 84.615% 92.308%, #c9d7ff 92.308% 100.000%);
background: linear-gradient(180deg, oklch(49.61% 0.2717 263.69) 0.000% 7.692%, oklch(51.71% 0.2699 263.50) 7.692% 15.385%, oklch(54.70% 0.2504 263.21) 15.385% 23.077%, oklch(58.20% 0.2270 263.15) 23.077% 30.769%, oklch(61.81% 0.2039 263.67) 30.769% 38.462%, oklch(65.71% 0.1804 265.22) 38.462% 46.154%, oklch(70.00% 0.1554 267.50) 46.154% 53.846%, oklch(74.24% 0.1311 269.72) 53.846% 61.538%, oklch(77.95% 0.1102 271.07) 61.538% 69.231%, oklch(81.17% 0.0927 271.16) 69.231% 76.923%, oklch(84.08% 0.0775 270.47) 76.923% 84.615%, oklch(86.49% 0.0652 269.56) 84.615% 92.308%, oklch(88.19% 0.0565 268.96) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.496 | 0.285 | 263.7 |
| 2 | 0.618 | 0.204 | 263.7 |
| 3 | 0.78 | 0.11 | 271.1 |
| 4 | 0.882 | 0.056 | 269 |

## In these collections

- [App background gradients](https://grabient.com/app-background-gradients)
- [Electric blue gradients](https://grabient.com/electric-blue-gradients)
- [Cool swatches](https://grabient.com/cool-swatches)

## Other forms

- [JSON](https://grabient.com/kUfs-7zso_-MoQNwFL-g.json?style=linearSwatches&steps=13&angle=180)
- [PNG](https://grabient.com/kUfs-7zso_-MoQNwFL-g.png?style=linearSwatches&steps=13&angle=180)
- [SVG](https://grabient.com/kUfs-7zso_-MoQNwFL-g.svg?style=linearSwatches&steps=13&angle=180)
- [CSS](https://grabient.com/kUfs-7zso_-MoQNwFL-g.css?style=linearSwatches&steps=13&angle=180)
- [ASE](https://grabient.com/kUfs-7zso_-MoQNwFL-g.ase?style=linearSwatches&steps=13&angle=180)
- [GPL](https://grabient.com/kUfs-7zso_-MoQNwFL-g.gpl?style=linearSwatches&steps=13&angle=180)
- [GRD](https://grabient.com/kUfs-7zso_-MoQNwFL-g.grd?style=linearSwatches&steps=13&angle=180)
- [Design tokens](https://grabient.com/kUfs-7zso_-MoQNwFL-g.tokens.json?style=linearSwatches&steps=13&angle=180)
- [Social card](https://grabient.com/api/og?seed=kUfs-7zso_-MoQNwFL-g&style=linearSwatches&steps=13&angle=180)
- [Palettes like this one](https://grabient.com/palettes?q=kUfs-7zso_-MoQNwFL-g)
- [Guide for agents](https://grabient.com/llms.txt)