# Lavender into the Blue Hour

The Lavender blue and mauve palette brings together blue, light purple, and dark blue. The colors span a broad lightness range, combining restrained 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 light purple.

- Also called: Muted blue, lavender and navy linear gradient
- Seed: `kSlS2335pFpoQOa`
- Page: https://grabient.com/kSlS2335pFpoQOa?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#657ea1` | `oklch(58.66% 0.0620 258.05)` | Smoky Violet | black, 5 to 1 |
| 2 | `#697fa4` | `oklch(59.40% 0.0624 260.01)` | Blue Boater | black, 5.1 to 1 |
| 3 | `#6e82a8` | `oklch(60.50% 0.0631 262.68)` | Berwick Berry | black, 5.4 to 1 |
| 4 | `#7485ad` | `oklch(61.90% 0.0638 265.93)` | Enchanting Sky | black, 5.7 to 1 |
| 5 | `#7b89b3` | `oklch(63.51% 0.0647 269.65)` | Wild Blue Yonder | black, 6 to 1 |
| 6 | `#838eb9` | `oklch(65.28% 0.0657 273.71)` | Opal Violet | black, 6.5 to 1 |
| 7 | `#8c92bf` | `oklch(67.13% 0.0667 277.99)` | PHP Purple | black, 6.9 to 1 |
| 8 | `#9497c5` | `oklch(68.99% 0.0678 282.37)` | Litmus | black, 7.4 to 1 |
| 9 | `#9d9bca` | `oklch(70.79% 0.0688 286.74)` | Cosmo Purple | black, 7.9 to 1 |
| 10 | `#a69fcf` | `oklch(72.46% 0.0697 290.96)` | Imperial Lilac | black, 8.4 to 1 |
| 11 | `#ada2d3` | `oklch(73.92% 0.0706 294.93)` | Milky Lavender | black, 8.9 to 1 |
| 12 | `#b4a5d6` | `oklch(75.11% 0.0713 298.51)` | Grape Illusion | black, 9.2 to 1 |
| 13 | `#b9a7d8` | `oklch(75.96% 0.0718 301.59)` | Grape Illusion | black, 9.5 to 1 |
| 14 | `#bca7d8` | `oklch(76.39% 0.0721 304.04)` | Perfume | black, 9.6 to 1 |
| 15 | `#bda7d7` | `oklch(76.34% 0.0721 305.75)` | Perfume | black, 9.6 to 1 |
| 16 | `#bca5d5` | `oklch(75.73% 0.0719 306.60)` | Enchanted Lavender | black, 9.4 to 1 |
| 17 | `#b8a1d0` | `oklch(74.48% 0.0713 306.46)` | Purple Premiere | black, 9 to 1 |
| 18 | `#b09bca` | `oklch(72.48% 0.0703 305.33)` | Purple Rose | black, 8.4 to 1 |
| 19 | `#a694c2` | `oklch(69.82% 0.0690 303.31)` | Enchanted Lilac | black, 7.6 to 1 |
| 20 | `#9a8bb8` | `oklch(66.58% 0.0674 300.55)` | Brave Purple | black, 6.7 to 1 |
| 21 | `#8d81ac` | `oklch(62.88% 0.0655 297.15)` | Aster Purple | black, 5.8 to 1 |
| 22 | `#7e769f` | `oklch(58.82% 0.0635 293.25)` | Voxatron Purple | black, 4.9 to 1 |
| 23 | `#6f6a92` | `oklch(54.49% 0.0613 288.97)` | Purple Grapes | white, 5 to 1 |
| 24 | `#5f5f84` | `oklch(50.00% 0.0591 284.44)` | Strong Iris | white, 6 to 1 |
| 25 | `#505376` | `oklch(45.46% 0.0567 279.77)` | Deep Orchid | white, 7.3 to 1 |
| 26 | `#414868` | `oklch(40.95% 0.0545 275.09)` | Nobility Blue | white, 8.9 to 1 |
| 27 | `#343d5a` | `oklch(36.59% 0.0523 270.53)` | Gulf Blue | white, 10.6 to 1 |
| 28 | `#28334e` | `oklch(32.47% 0.0502 266.21)` | Blue Lobelia | white, 12.5 to 1 |
| 29 | `#1d2a43` | `oklch(28.70% 0.0483 262.25)` | Eternal Darkness | white, 14.2 to 1 |
| 30 | `#142339` | `oklch(25.37% 0.0466 258.79)` | Kon | white, 15.8 to 1 |
| 31 | `#0d1c31` | `oklch(22.60% 0.0452 255.93)` | Trapped Darkness | white, 17 to 1 |
| 32 | `#08182b` | `oklch(20.47% 0.0441 253.82)` | Oxford by Night | white, 17.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #657ea1 0.0%, #697fa4 3.2%, #6e82a8 6.5%, #7485ad 9.7%, #7b89b3 12.9%, #838eb9 16.1%, #8c92bf 19.4%, #9497c5 22.6%, #9d9bca 25.8%, #a69fcf 29.0%, #ada2d3 32.3%, #b4a5d6 35.5%, #b9a7d8 38.7%, #bca7d8 41.9%, #bda7d7 45.2%, #bca5d5 48.4%, #b8a1d0 51.6%, #b09bca 54.8%, #a694c2 58.1%, #9a8bb8 61.3%, #8d81ac 64.5%, #7e769f 67.7%, #6f6a92 71.0%, #5f5f84 74.2%, #505376 77.4%, #414868 80.6%, #343d5a 83.9%, #28334e 87.1%, #1d2a43 90.3%, #142339 93.5%, #0d1c31 96.8%, #08182b 100.0%);
background: linear-gradient(135deg in oklch, oklch(58.66% 0.0620 258.05) 0.0%, oklch(59.40% 0.0624 260.01) 3.2%, oklch(60.50% 0.0631 262.68) 6.5%, oklch(61.90% 0.0638 265.93) 9.7%, oklch(63.51% 0.0647 269.65) 12.9%, oklch(65.28% 0.0657 273.71) 16.1%, oklch(67.13% 0.0667 277.99) 19.4%, oklch(68.99% 0.0678 282.37) 22.6%, oklch(70.79% 0.0688 286.74) 25.8%, oklch(72.46% 0.0697 290.96) 29.0%, oklch(73.92% 0.0706 294.93) 32.3%, oklch(75.11% 0.0713 298.51) 35.5%, oklch(75.96% 0.0718 301.59) 38.7%, oklch(76.39% 0.0721 304.04) 41.9%, oklch(76.34% 0.0721 305.75) 45.2%, oklch(75.73% 0.0719 306.60) 48.4%, oklch(74.48% 0.0713 306.46) 51.6%, oklch(72.48% 0.0703 305.33) 54.8%, oklch(69.82% 0.0690 303.31) 58.1%, oklch(66.58% 0.0674 300.55) 61.3%, oklch(62.88% 0.0655 297.15) 64.5%, oklch(58.82% 0.0635 293.25) 67.7%, oklch(54.49% 0.0613 288.97) 71.0%, oklch(50.00% 0.0591 284.44) 74.2%, oklch(45.46% 0.0567 279.77) 77.4%, oklch(40.95% 0.0545 275.09) 80.6%, oklch(36.59% 0.0523 270.53) 83.9%, oklch(32.47% 0.0502 266.21) 87.1%, oklch(28.70% 0.0483 262.25) 90.3%, oklch(25.37% 0.0466 258.79) 93.5%, oklch(22.60% 0.0452 255.93) 96.8%, oklch(20.47% 0.0441 253.82) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.587 | 0.062 | 258 |
| 2 | 0.752 | 0.072 | 306.7 |
| 3 | 0.205 | 0.044 | 253.8 |

## In these collections

- [Blue and mauve gradients](https://grabient.com/blue-and-mauve-gradients)

## Other forms

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