# Pale lavender blue and purple palette

The Pale lavender blue and purple palette brings together dark blue, blue, purple, and light purple. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is light purple.

- Also called: Navy, blue, purple and lavender linear swatches
- Seed: `kWPUm1utBBFG6QXJyMJap1Aw`
- Page: https://grabient.com/kWPUm1utBBFG6QXJyMJap1Aw?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.8 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 | `#001e44` | `oklch(24.03% 0.0804 255.44)` | Midnight Mirage | white, 16.5 to 1 |
| 2 | `#1743d0` | `oklch(46.06% 0.2205 264.75)` | Blue Blue | white, 7.6 to 1 |
| 3 | `#777fec` | `oklch(64.17% 0.1598 277.43)` | Hera Blue | black, 6 to 1 |
| 4 | `#8a55de` | `oklch(57.87% 0.1998 297.50)` | Gloomy Purple | white, 4.7 to 1 |
| 5 | `#d6bdf5` | `oklch(83.86% 0.0799 304.90)` | Pink Illusion | black, 12.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #001e44 0.000% 20.000%, #1743d0 20.000% 40.000%, #777fec 40.000% 60.000%, #8a55de 60.000% 80.000%, #d6bdf5 80.000% 100.000%);
background: linear-gradient(90deg, oklch(24.03% 0.0804 255.44) 0.000% 20.000%, oklch(46.06% 0.2205 264.75) 20.000% 40.000%, oklch(64.17% 0.1598 277.43) 40.000% 60.000%, oklch(57.87% 0.1998 297.50) 60.000% 80.000%, oklch(83.86% 0.0799 304.90) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.101 | 255.2 |
| 2 | 0.461 | 0.22 | 264.7 |
| 3 | 0.642 | 0.16 | 277.4 |
| 4 | 0.579 | 0.2 | 297.5 |
| 5 | 0.839 | 0.08 | 304.9 |

## In these collections

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

## Other forms

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