# Lavender blue and purple palette

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

- Also called: Lavender, blue and light blue linear swatches
- Seed: `kWxknZTEG-cJIvU1wb2ap0-I`
- Page: https://grabient.com/kWxknZTEG-cJIvU1wb2ap0-I?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: dark center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.2 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 | `#c6a7eb` | `oklch(77.95% 0.1006 305.16)` | Tropical Violet | black, 10.1 to 1 |
| 2 | `#8664e0` | `oklch(59.84% 0.1805 292.48)` | Medium Slate Blue | black, 4.9 to 1 |
| 3 | `#4057d9` | `oklch(51.97% 0.1998 270.28)` | Warm Blue | white, 5.8 to 1 |
| 4 | `#004f8c` | `oklch(42.13% 0.1200 250.25)` | Lapis Blue | white, 8.4 to 1 |
| 5 | `#97d3f7` | `oklch(83.86% 0.0799 235.41)` | Long Island Sound | black, 12.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #c6a7eb 0.000% 20.000%, #8664e0 20.000% 40.000%, #4057d9 40.000% 60.000%, #004f8c 60.000% 80.000%, #97d3f7 80.000% 100.000%);
background: linear-gradient(135deg, oklch(77.95% 0.1006 305.16) 0.000% 20.000%, oklch(59.84% 0.1805 292.48) 20.000% 40.000%, oklch(51.97% 0.1998 270.28) 40.000% 60.000%, oklch(42.13% 0.1200 250.25) 60.000% 80.000%, oklch(83.86% 0.0799 235.41) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.78 | 0.101 | 305.2 |
| 2 | 0.598 | 0.181 | 292.5 |
| 3 | 0.52 | 0.2 | 270.3 |
| 4 | 0.421 | 0.181 | 250.2 |
| 5 | 0.839 | 0.08 | 235.4 |

## In these collections

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

## Other forms

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