# Blue color palette

The Blue color palette brings together blue, light blue, and pale blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is blue, and its lightest tone is pale blue.

- Also called: Monochrome blue to light blue linear gradient
- Seed: `kUfs-7zso_-MoQNwFL-g`
- Page: https://grabient.com/kUfs-7zso_-MoQNwFL-g?steps=13&angle=180
- Drawn as: linear gradient, 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.0%, #034bff 8.3%, #165cff 16.7%, #2c6cfe 25.0%, #427cfe 33.3%, #5b8afe 41.7%, #7498ff 50.0%, #8ba7fe 58.3%, #9db3fe 66.7%, #abbffe 75.0%, #b7c9fe 83.3%, #c1d1ff 91.7%, #c9d7ff 100.0%);
background: linear-gradient(180deg in oklch, oklch(49.61% 0.2717 263.69) 0.0%, oklch(51.71% 0.2699 263.50) 8.3%, oklch(54.70% 0.2504 263.21) 16.7%, oklch(58.20% 0.2270 263.15) 25.0%, oklch(61.81% 0.2039 263.67) 33.3%, oklch(65.71% 0.1804 265.22) 41.7%, oklch(70.00% 0.1554 267.50) 50.0%, oklch(74.24% 0.1311 269.72) 58.3%, oklch(77.95% 0.1102 271.07) 66.7%, oklch(81.17% 0.0927 271.16) 75.0%, oklch(84.08% 0.0775 270.47) 83.3%, oklch(86.49% 0.0652 269.56) 91.7%, oklch(88.19% 0.0565 268.96) 100.0%);
```

## 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?steps=13&angle=180)
- [PNG](https://grabient.com/kUfs-7zso_-MoQNwFL-g.png?steps=13&angle=180)
- [SVG](https://grabient.com/kUfs-7zso_-MoQNwFL-g.svg?steps=13&angle=180)
- [CSS](https://grabient.com/kUfs-7zso_-MoQNwFL-g.css?steps=13&angle=180)
- [ASE](https://grabient.com/kUfs-7zso_-MoQNwFL-g.ase?steps=13&angle=180)
- [GPL](https://grabient.com/kUfs-7zso_-MoQNwFL-g.gpl?steps=13&angle=180)
- [GRD](https://grabient.com/kUfs-7zso_-MoQNwFL-g.grd?steps=13&angle=180)
- [Design tokens](https://grabient.com/kUfs-7zso_-MoQNwFL-g.tokens.json?steps=13&angle=180)
- [Social card](https://grabient.com/api/og?seed=kUfs-7zso_-MoQNwFL-g&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)