# Blue electric blue palette

The Blue electric blue palette brings together dark blue and blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Vivid monochrome navy to blue linear gradient
- Seed: `kSN128MUS_0XdP8`
- Page: https://grabient.com/kSN128MUS_0XdP8?steps=5&angle=180
- Drawn as: linear gradient, 5 steps, 180 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.4 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 | `#000a53` | `oklch(21.65% 0.1281 264.38)` | Ravenclaw | white, 17.9 to 1 |
| 2 | `#021c76` | `oklch(29.11% 0.1542 263.91)` | Long-Haul Flight | white, 14.6 to 1 |
| 3 | `#0533a6` | `oklch(38.58% 0.1888 263.32)` | Egyptian Blue | white, 10.3 to 1 |
| 4 | `#054ad9` | `oklch(47.71% 0.2263 262.72)` | Merchant Marine Blue | white, 7 to 1 |
| 5 | `#085dff` | `oklch(54.72% 0.2507 262.26)` | Kyanite | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #000a53 0.0%, #021c76 25.0%, #0533a6 50.0%, #054ad9 75.0%, #085dff 100.0%);
background: linear-gradient(180deg in oklch, oklch(21.65% 0.1281 264.38) 0.0%, oklch(29.11% 0.1542 263.91) 25.0%, oklch(38.58% 0.1888 263.32) 50.0%, oklch(47.71% 0.2263 262.72) 75.0%, oklch(54.72% 0.2507 262.26) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.128 | 264.4 |
| 2 | 0.386 | 0.189 | 263.3 |
| 3 | 0.547 | 0.256 | 262.3 |

## In these collections

- [Electric blue gradients](https://grabient.com/electric-blue-gradients)

## Other forms

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