# Blue violet palette

The Blue violet palette brings together pale blue, light blue, blue, purple, and dark blue. 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 pale blue.

- Also called: Analogous light blue, purple and navy linear swatches
- Seed: `kW6iy85KhBFHIwW9SMFIqS-I`
- Page: https://grabient.com/kW6iy85KhBFHIwW9SMFIqS-I?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.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 | `#d9e5ff` | `oklch(92.13% 0.0376 265.07)` | Veiling Waterfalls | black, 16.6 to 1 |
| 2 | `#a6b6ff` | `oklch(79.13% 0.1056 274.59)` | Truesky Gloxym | black, 10.7 to 1 |
| 3 | `#8971fd` | `oklch(64.17% 0.1998 287.27)` | Blackthorn Berry | black, 5.8 to 1 |
| 4 | `#7034bc` | `oklch(48.03% 0.1998 298.89)` | Purple Emperor | white, 7.2 to 1 |
| 5 | `#231b55` | `oklch(27.17% 0.1006 284.10)` | Silent Orbit | white, 15.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d9e5ff 0.000% 20.000%, #a6b6ff 20.000% 40.000%, #8971fd 40.000% 60.000%, #7034bc 60.000% 80.000%, #231b55 80.000% 100.000%);
background: linear-gradient(90deg, oklch(92.13% 0.0376 265.07) 0.000% 20.000%, oklch(79.13% 0.1056 274.59) 20.000% 40.000%, oklch(64.17% 0.1998 287.27) 40.000% 60.000%, oklch(48.03% 0.1998 298.89) 60.000% 80.000%, oklch(27.17% 0.1006 284.10) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.921 | 0.061 | 265.1 |
| 2 | 0.791 | 0.11 | 274.6 |
| 3 | 0.642 | 0.2 | 287.3 |
| 4 | 0.48 | 0.2 | 298.9 |
| 5 | 0.272 | 0.101 | 284.1 |

## In these collections

- [Violet swatches](https://grabient.com/violet-swatches)

## Other forms

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