# Blue violet dusk forward swatches

Analogous lavender, blue and navy linear gradient with 32 colors: #e2dcef, #dcd6ee, #d6ceeb, #cec5e9, #c5bae6, #bcafe3, #b2a3df, #a897db, #9f8cd6, #9581d2, #8d77cd, #856fc8, #7e67c4, #775fbf, #7057ba, #6950b5, #6249b0, #5c42aa, #553ca4, #4f359d, #492f95, #432a8d, #3d2482, #372076, #301b6a, #2a175d, #241450, #1e1144, #190e38, #150c2f, #110a27, #0e0821. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous lavender, blue and navy linear gradient
- Seed: `kU5hPUTq8_bE4v0UksAg`
- Page: https://grabient.com/kU5hPUTq8_bE4v0UksAg?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light to dark, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 14.6 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 | `#e2dcef` | `oklch(90.55% 0.0262 298.13)` | Princess Fairy Tale | black, 15.7 to 1 |
| 2 | `#dcd6ee` | `oklch(88.88% 0.0324 297.89)` | Lavender Sky | black, 14.9 to 1 |
| 3 | `#d6ceeb` | `oklch(86.71% 0.0408 297.59)` | Plum’s the Word | black, 13.9 to 1 |
| 4 | `#cec5e9` | `oklch(84.14% 0.0509 297.24)` | Soap | black, 12.7 to 1 |
| 5 | `#c5bae6` | `oklch(81.26% 0.0622 296.84)` | Viking Diva | black, 11.5 to 1 |
| 6 | `#bcafe3` | `oklch(78.16% 0.0742 296.42)` | Perfume | black, 10.3 to 1 |
| 7 | `#b2a3df` | `oklch(74.94% 0.0864 295.96)` | Violet Velvet | black, 9.1 to 1 |
| 8 | `#a897db` | `oklch(71.69% 0.0983 295.49)` | Dull Lavender | black, 8.1 to 1 |
| 9 | `#9f8cd6` | `oklch(68.50% 0.1094 295.01)` | Middy’s Purple | black, 7.1 to 1 |
| 10 | `#9581d2` | `oklch(65.46% 0.1192 294.53)` | Indigo Bloom | black, 6.3 to 1 |
| 11 | `#8d77cd` | `oklch(62.67% 0.1273 294.05)` | True V | black, 5.6 to 1 |
| 12 | `#856fc8` | `oklch(60.16% 0.1336 293.57)` | True V | black, 5.1 to 1 |
| 13 | `#7e67c4` | `oklch(57.74% 0.1396 293.03)` | Lavish Spending | black, 4.6 to 1 |
| 14 | `#775fbf` | `oklch(55.41% 0.1450 292.43)` | Fuchsia Blue | white, 5 to 1 |
| 15 | `#7057ba` | `oklch(53.13% 0.1498 291.80)` | Simply Purple | white, 5.5 to 1 |
| 16 | `#6950b5` | `oklch(50.90% 0.1539 291.17)` | Blue Marguerite | white, 6.1 to 1 |
| 17 | `#6249b0` | `oklch(48.71% 0.1571 290.56)` | Swiss Plum | white, 6.7 to 1 |
| 18 | `#5c42aa` | `oklch(46.54% 0.1592 289.99)` | Swiss Plum | white, 7.4 to 1 |
| 19 | `#553ca4` | `oklch(44.38% 0.1602 289.48)` | Megadrive Screen | white, 8.1 to 1 |
| 20 | `#4f359d` | `oklch(42.22% 0.1598 289.06)` | Royal Wisteria | white, 8.9 to 1 |
| 21 | `#492f95` | `oklch(40.05% 0.1579 288.75)` | Galactic Purple | white, 9.8 to 1 |
| 22 | `#432a8d` | `oklch(37.84% 0.1543 288.57)` | Galactic Civilization | white, 10.7 to 1 |
| 23 | `#3d2482` | `oklch(35.49% 0.1478 288.54)` | Galactic Civilization | white, 11.8 to 1 |
| 24 | `#372076` | `oklch(33.02% 0.1389 288.63)` | Explorer of the Galaxies | white, 12.9 to 1 |
| 25 | `#301b6a` | `oklch(30.49% 0.1279 288.82)` | Night Fog | white, 14 to 1 |
| 26 | `#2a175d` | `oklch(27.97% 0.1157 289.09)` | Voldemort | white, 15.1 to 1 |
| 27 | `#241450` | `oklch(25.51% 0.1028 289.39)` | Praise of Shadow | white, 16.2 to 1 |
| 28 | `#1e1144` | `oklch(23.16% 0.0899 289.72)` | Shadow Planet | white, 17.2 to 1 |
| 29 | `#190e38` | `oklch(20.99% 0.0776 290.05)` | Midnight Monarch | white, 18 to 1 |
| 30 | `#150c2f` | `oklch(19.06% 0.0666 290.34)` | Spanish Roast | white, 18.6 to 1 |
| 31 | `#110a27` | `oklch(17.42% 0.0575 290.58)` | Tristesse | white, 19.1 to 1 |
| 32 | `#0e0821` | `oklch(16.14% 0.0510 290.73)` | Tristesse | white, 19.5 to 1 |

## CSS

```css
background: linear-gradient(180deg, #e2dcef 0.0%, #dcd6ee 3.2%, #d6ceeb 6.5%, #cec5e9 9.7%, #c5bae6 12.9%, #bcafe3 16.1%, #b2a3df 19.4%, #a897db 22.6%, #9f8cd6 25.8%, #9581d2 29.0%, #8d77cd 32.3%, #856fc8 35.5%, #7e67c4 38.7%, #775fbf 41.9%, #7057ba 45.2%, #6950b5 48.4%, #6249b0 51.6%, #5c42aa 54.8%, #553ca4 58.1%, #4f359d 61.3%, #492f95 64.5%, #432a8d 67.7%, #3d2482 71.0%, #372076 74.2%, #301b6a 77.4%, #2a175d 80.6%, #241450 83.9%, #1e1144 87.1%, #190e38 90.3%, #150c2f 93.5%, #110a27 96.8%, #0e0821 100.0%);
background: linear-gradient(180deg in oklch, oklch(90.55% 0.0262 298.13) 0.0%, oklch(88.88% 0.0324 297.89) 3.2%, oklch(86.71% 0.0408 297.59) 6.5%, oklch(84.14% 0.0509 297.24) 9.7%, oklch(81.26% 0.0622 296.84) 12.9%, oklch(78.16% 0.0742 296.42) 16.1%, oklch(74.94% 0.0864 295.96) 19.4%, oklch(71.69% 0.0983 295.49) 22.6%, oklch(68.50% 0.1094 295.01) 25.8%, oklch(65.46% 0.1192 294.53) 29.0%, oklch(62.67% 0.1273 294.05) 32.3%, oklch(60.16% 0.1336 293.57) 35.5%, oklch(57.74% 0.1396 293.03) 38.7%, oklch(55.41% 0.1450 292.43) 41.9%, oklch(53.13% 0.1498 291.80) 45.2%, oklch(50.90% 0.1539 291.17) 48.4%, oklch(48.71% 0.1571 290.56) 51.6%, oklch(46.54% 0.1592 289.99) 54.8%, oklch(44.38% 0.1602 289.48) 58.1%, oklch(42.22% 0.1598 289.06) 61.3%, oklch(40.05% 0.1579 288.75) 64.5%, oklch(37.84% 0.1543 288.57) 67.7%, oklch(35.49% 0.1478 288.54) 71.0%, oklch(33.02% 0.1389 288.63) 74.2%, oklch(30.49% 0.1279 288.82) 77.4%, oklch(27.97% 0.1157 289.09) 80.6%, oklch(25.51% 0.1028 289.39) 83.9%, oklch(23.16% 0.0899 289.72) 87.1%, oklch(20.99% 0.0776 290.05) 90.3%, oklch(19.06% 0.0666 290.34) 93.5%, oklch(17.42% 0.0575 290.58) 96.8%, oklch(16.14% 0.0510 290.73) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.906 | 0.026 | 298.1 |
| 2 | 0.618 | 0.13 | 293.9 |
| 3 | 0.386 | 0.156 | 288.6 |
| 4 | 0.161 | 0.051 | 290.7 |

## In these collections

- [Monochrome purple gradients](https://grabient.com/monochrome-purple-gradients)

## Other forms

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