# Blue blue and purple palette

The Blue blue and purple palette brings together dark blue and blue. The colors span a broad lightness range, combining moderate color with clear 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: Analogous navy and purple linear swatches
- Seed: `kUKUS8Kas_T4tQFQH8Mg`
- Page: https://grabient.com/kUKUS8Kas_T4tQFQH8Mg?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 5.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 | `#000535` | `oklch(16.14% 0.0937 264.38)` | Oblivion | white, 19.5 to 1 |
| 2 | `#001c55` | `oklch(25.30% 0.1087 260.91)` | Clarinet | white, 16.1 to 1 |
| 3 | `#0d3a7b` | `oklch(35.96% 0.1215 258.80)` | Azure Dragon | white, 11 to 1 |
| 4 | `#2a559c` | `oklch(45.72% 0.1260 259.94)` | Blue Sail | white, 7.3 to 1 |
| 5 | `#5d6db3` | `oklch(55.31% 0.1104 272.82)` | Loch Ness | white, 4.8 to 1 |
| 6 | `#8880ba` | `oklch(62.99% 0.0868 289.74)` | Bravo! | black, 5.8 to 1 |

## CSS

```css
background: linear-gradient(180deg, #000535 0.000% 16.667%, #001c55 16.667% 33.333%, #0d3a7b 33.333% 50.000%, #2a559c 50.000% 66.667%, #5d6db3 66.667% 83.333%, #8880ba 83.333% 100.000%);
background: linear-gradient(180deg, oklch(16.14% 0.0937 264.38) 0.000% 16.667%, oklch(25.30% 0.1087 260.91) 16.667% 33.333%, oklch(35.96% 0.1215 258.80) 33.333% 50.000%, oklch(45.72% 0.1260 259.94) 50.000% 66.667%, oklch(55.31% 0.1104 272.82) 66.667% 83.333%, oklch(62.99% 0.0868 289.74) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.161 | 0.094 | 264.4 |
| 2 | 0.327 | 0.119 | 259.1 |
| 3 | 0.488 | 0.124 | 262.3 |
| 4 | 0.63 | 0.087 | 289.7 |

## In these collections

- [Blue and purple swatches](https://grabient.com/blue-and-purple-swatches)

## Other forms

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