# Blue color palette

The Blue color 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 travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Vivid monochrome navy and blue linear swatches
- Seed: `kSM2e8MNA_8Xgv8`
- Page: https://grabient.com/kSM2e8MNA_8Xgv8?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: monochromatic
- 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 | `#000054` | `oklch(20.13% 0.1390 264.39)` | Alucard’s Night | white, 18.6 to 1 |
| 2 | `#010d7f` | `oklch(28.10% 0.1784 264.44)` | Blue Ranger | white, 15.4 to 1 |
| 3 | `#0326b5` | `oklch(38.19% 0.2205 264.38)` | Underwater Falling | white, 10.7 to 1 |
| 4 | `#0842e4` | `oklch(47.59% 0.2481 263.85)` | Merchant Marine Blue | white, 7.2 to 1 |
| 5 | `#185cff` | `oklch(54.72% 0.2503 263.32)` | Kyanite | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #000054 0.000% 20.000%, #010d7f 20.000% 40.000%, #0326b5 40.000% 60.000%, #0842e4 60.000% 80.000%, #185cff 80.000% 100.000%);
background: linear-gradient(135deg, oklch(20.13% 0.1390 264.39) 0.000% 20.000%, oklch(28.10% 0.1784 264.44) 20.000% 40.000%, oklch(38.19% 0.2205 264.38) 40.000% 60.000%, oklch(47.59% 0.2481 263.85) 60.000% 80.000%, oklch(54.72% 0.2503 263.32) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.201 | 0.142 | 264.4 |
| 2 | 0.382 | 0.22 | 264.4 |
| 3 | 0.547 | 0.266 | 263.3 |

## In these collections

- [Blue swatches](https://grabient.com/blue-swatches)
- [Ocean swatches](https://grabient.com/ocean-swatches)
- [Navy swatches](https://grabient.com/navy-swatches)
- [Cool swatches](https://grabient.com/cool-swatches)

## Other forms

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